Oh goigly, oh boy! color variables! yay

a feature I’d like to see in hopscotch is:

a type of variable that saves color values instead of numbers or strings

i’d someone else could use it for this type of project:

when making an art pad or color gradient, there are too many moving pieces, like 3 variables for hsb, one for width, increases, having 3 values to be constantly setting at once. i’m sure it’s still a pain to do. wouldn’t it be great if there was just a single variable that could just remember the whole color??

here are some examples of hopscotch code that could be improved if we had this:

here is an excerpt from my infamous art pad:
when game starts:
set color: hsb[275, 35, 100]
when self is tapped:
repeat times [1]:
set [hue] to: 275
set [saturation] to: 35
set [brightness] to: 100

and here’s what it could be:
when game starts:
set color: hsb[275, 35, 100]
when self is tapped:
set [color] to: hsb[275, 35, 100]

here is an example design i’ve made:

literally just variable blocks but the box accepts colors
color variables!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
i’m sure some modifications might be necessary that i didn’t think of, but this is the idea

i’ve seen something similar in another programming languages, it looks like this:

i have not jk that’s not true, get pranked

the hs colors have loopover values, so purple = 1, blue = 2, etc, and it loops over! [i don’t remember exactly what it is] so variable blocks can accept these, but it’s not really as complete as i’d like
[hs is a coding language, is it not??]


You can kind of already do this.

You can store rgb values by inputting the hexadecimal format (#abcdef), or by inputting an HSL color format (hsl(30,89,47)

(Note: an L (lightness) of 50 in HSL is the same as a B (brightness) of 100 in HSB)

As for the default colors, those can be stored as a value from 0 to 28 (with 0 being purple and 28 being that dark brown color. So 8 = orange, 13 = medium green, 17 = blue, 20 = black, 23 = white, etc.)


This would be incredibly useful. Right now you can use strings as colors, but that is not as easy to read as being able to use the color blocks. (What color is hsb(100,25,75)? It’s not nearly as clear as the actual hsb block which will show you the exact color). For example, in https://c.gethopscotch.com/p/11bycfpp0j I use variables to define the colors of the ui. That project was made before strings from variable could be used as colors so I use three variables per color, but using variables for colors is a very useful thing that I believe I have done in most of my recent projects. I think actually that it might just be bears vs sloths and all the others used math to go from some single color value to a specific hue.

Being able to Group variables together would also be very useful for this – categorizing color variables used in the way I did in the example above into a single group would be very useful.


This would be super cool! The image above was obviously edited, but you get the point…


yes i am aware i actually already said that, but

also it’s hard to see which color your value refers to without memorizing stuff or checking every time, both of which are things i do not want to do

as petrichor said this is rather difficult to track - i know firsthand using an alternate base is a pain, and i don’t really understand hsl [other than that it is similar to hsb] also the values are difficult to change individually.

also there’s nothing that indicates to users who don’t know this is possible, that it can be done [this is why i refer to stuff like cmyk, hsl, and tessary as “secret color systems”].

yes! my artpad had 3 hsb save files, and that meant 9 variables to scroll through. and i can’t imagine how many variables one would need for an artpad that can alternate between hsb, rgb, and hs colors [or, heaven forbid, the secret color systems??] whereas one color variable [oh goigly, oh boy!] can handle all of that with ease, and maybe another that determines which system you’re using.

i was around before the code blocks turned their hsb colors, so i taught myself around hsb to an extent that i can just look at the hsb value and visualize it in my head, but i feel like i am a rare exception in that case and people do need this. by the way, hsb[100, 25, 75] is like a grayish green.
Screenshot 2023-03-21 12.09.49 PM
yay, i was right! i promise i did not cheat, why would i do that

also, if any secret color systems ever get promoted to normally available code blocks, you can look at its color to get a sense of what it outputs, but since that means it’s not a string anymore, it kind of defeats the whole purpose of the color variable idea.


this would definitely be cool, i think it could be done by entering this into the variable parameter: HSB (100,86,96 and putting the variable in a set colour block, but it would be great to have an easier way to do it!



and since color slots already accept string variables [for secret color systems] and number variables [for hs color encoding], it’s not that much of a change!


Fun fact. The black color value itself is secretly a color format that reads HSB(0,0,0), and you can confirm this by adding an addition operator to the color variable.


cool. i guess that’s what happens when enough people complain about “fake black”.

hey wait, how would an “increase by” block work with color variables?


It wouldn’t. It’ll behave like all incompatible values: it’ll just convert the whole thing to the number 0 and increase it like normal.

i.e, increase “test” by 1 will return 1, as “test” was automatically converted to a 0.


oh i didn’t even know incompatible variables did that

i mean yes i did color variables should do that

maybe color variables with hsb or rgb values should have a way to adjust one of their values without touching the others [maybe i’m dreaming too much]


it would be fairly cool if we had a method to get the properties of a value and increase specifically that - instead of attempting to increase a color value by a numerical value. in this case something like increase colorvariable.hue by 100, that way you could modify specific parameters without needing extra variables. :)


yes yeah something like that


most programming languages that i’ve used do have this- you can usually get a specific value of an element by adding a dot and the name of the property, like position.x or velocity.y? maybe hopscotch could do something similar with nesting? sorry for not adding this in my first post, i hadn’t seen it until now lol. :sweat_smile:
alternatively having variables that can store a list or array of values could be useful too


I’m thinking of a block that closely resembles an object trait variable, but instead of the options being every object in your project, the options would read hue, saturation, brightness, red, green, and blue. And the variable name would be “color value”

So, for example, [increase ((red) color value) by ( 1 )]

If there is no red value in the original color format, nothing would happen…


actually yeah that was the idea

and if any secret color systems get promoted, their parameters too [except tessary, which is just one thing and would therefore be a pain to adjust] and this is basically synonymous with the 30 billion variables one has to create for an artpad, except they’re all in a dropdown or smth, so you don’t have to spend twelve years scrolling through them! oh goigly, oh boy!


Another fun fact:

You can literally type “RED” in the variable to get the color \textcolor{rgb(255,0,0)}{\text{Red}}


so, html colors?


Not exactly… it’s just a value that reads “red”

If you mean how I did it on this forum, then

$\textcolor{rgb(255,0,0)}{\text{Red}}$ ($$ is basically a math format thing, but you can make colored text with it too)



if it’s not the html colors, then what color names return stuff on hs?
[also does the forum formatting accept hsb??]