hi
so this is how to use the HSB coloring system
yeah
H – hue
In the HSB system, the H stands for hue, and [spoiler alert] the S stands for saturation, while the B stands for brightness.
Hue Values
The value of the hue can be any number, but the numbers from 0 to 359 can work to get any color achievable by everything else, so I’m sticking to that for now.
Pure Colors
Computers remember colors using the RGB system [red, green, and blue] and there are lots of fabulous people to ask about how that system works that aren’t me. While HSB doesn’t entirely base itself around these three colors, they are where the H-value starts for beginners really well. Ever seen these three blinding shades of red, green, and blue?
They’re what computers base RGB on, and they have nice hue values as well:
- H = 0 is red
- H = 120 is green
- H = 240 is blue
The secondary colors are nice values as well:
- H = 60 is yellow
- H = 180 is cyan [that lovely lighter shade of blue in the center]
- H = 300 is magenta [fancy name for a vivid pinkish color]
These colors come every sixty - 0 for red, 60 for yellow, 120 for green, and so on. The colors between these values are like a smooth gradient between them. Notable other “pure” values for color hunters include:
- H = 30 is orange
- H = 90 is lime
- H = 150 is teal
- H = 210 is cornflower blue
- H = 270 is purple
- H = 330 is hot pink
Picking the Hue
Don’t worry about committing all these to memory, but remember that HSB orders H-values according to the rainbow. Red first, then orange a little farther down, then yellow, and so on. Choosing an H-value to start with is what I see as picking a “base color,” and the other two values merely do things to them, instead of making colors of their own.
The other H-values are more specific, which is why each specific base color is for a different situation. Need a bright blue for something you’re making? Cyan’s bright, so go with H = 180. Well, actually, it’d be nice if it was a little greener, so maybe go with H = 165. As you get more specific, each individual value becomes a different option. In this case, I settled with H = 171. lovely!
Believe it or not, as you try out more and more H-values, and also get used to knowing the values for your favorites that you’ll most likely use recurringly, you will – slowly – start to subconsciously memorize the values for different hues along the scale. Promise!
Large H-values
Pink
When I said that the extra H-values were like a gradient between the “pure” colors, there’s a detail missing-- how can the bigger numbers gradient when there’s no other color up there to transition to? The highest h-value “pure” color is magenta, H = 300. but H goes up to 359. in that case, the remaining values pretend H = 360 is red [it’s actually H = 0], and create a gradient to it.
As I said earlier, H = 330 is hot pink, and the values from 331-358 are even hotter pinks, until H = 359 is essentially [but not exactly] red.
Loopover
Positive
So when I said H = 360 isn’t red, that’s not entirely true. H = 360 will generate red. so will 2 × 360, or 720. The hue scale repeats after it reaches 360, over and over infinitely. Some people like selecting h values from out here, but if you know H-values by their smallest value, just subtract 360 until you get below it.
Negative
All values below 0 do the same thing-- loop infinitely. In that case, add 360 until you get to the “normal” values.
Now that you have your base color, it’s time to apply effects!! Starting with…
S – saturation
Saturation is a way to modify the base hue, and it’s [typically] a number between 0 and 100.
The Effect of Saturation
At H = 0 [red], this is S = 0, S = 20, S = 40, S = 60, S = 80, and S = 100 [“original”]. Saturation determines how much of the color is there, and when there’s no color [S = 0], the resulting image is white. The H-value determines what color moves to the next step, while the S-value judges how much of that color proceeds.
Saturation doesn’t do very much on its own, so I’ll be explaining it while I move into…
B – brightness
The third and final step in the HSB system, brightness is also a 0-100 scale that permits the usage of darker colors.
The Effect of Brightness
At H = 0 and S = 100, this is B in intervals of 20 from 0 to 100 [“original”]. Brightness affects the color from H and S by mixing it with black. The B-value judges how much of the color and how much black to mix together. B = 100 means only the color from H and S, and B = 0 means only black.
Black and Dark Colors
B = 0 means only black. This is always true! No matter what H and S are, if B = 0, the color is black. And if B is close to 0, brightness will mix mostly black, with just a little bit of the original color, which will make a really dark, deep shade of that color.
Brown is made this way! Brown is dark orange, so try an H-value around 30, a higher S-value, and a low B-value, and…
…voilá!! This specific brown is HSB(30, 90, 30).
Grayscale
Remember how S = 0 makes white, regardless of the H-value? Brightness judges, in this case, how much black and white to mix together, which is how shades of gray are made!
Just use S = 0, and turn the B-value into the grayscale. B = 100 is white, B = 0 is black, and everything else are all the grays in between!
Saturation and Brightness
The way you pick your S and B-values sort of interlock with each other!
Colors Using S and B
- With a low S-value and a low B-value, the outcome is a dark gray or black, with a slight tint of that color.
HSB(154, 21, 14)
- With a low S-value and a middle B-value, the outcome is a grayish version of that color.
HSB(122, 10, 50)
- With a low S-value and a high B-value, the outcome is a light or pastel version of that color.
HSB(277, 6, 91)
- With a middle S-value and a low B-value, the outcome is a darkened, softened version of that color.
HSB(311, 52, 22)
- With a middle S-value and a middle B-value, the outcome is a sort of toned-down, faded version of that color.
HSB(104, 75, 66)
- With a middle S-value and a high B-value, the outcome is a bright, vivid version of that color.
HSB(197, 64, 93)
- With a high S-value and a low B-value, the outcome is a deep or dark version of that color.
HSB(222, 73, 34)
- With a high S-value and a middle B-value, the outcome is a somewhat shaded version of that color.
HSB(120, 100, 55)
- With a high S-value and a high B-value, the outcome is very close to the original H-value color-- bright and vivid, but a little more solid.
HSB(261, 84, 99)
Loopover in S and B
Positive
Much like hue, saturation loops over with values above 100. It doesn’t loop S = 0, though, so S = 101 results in S = 1, S = 243 results in S = 43, and S = 4,261,923 results in S = 23. Brightness does the exact same thing.
Negative
However, all negative values of both S and B do not loop-- they just result in 0.
FAQ
“360 seems like a strange number to base H on. Why that?”
Some alternate versions of HSB have H as a scale from 1-100, like S and B. Hue was imagined to be a “color circle,” as it goes in a cycle. On Hopscotch, the 360 values for H represent the degrees in a circle.
“Which can produce more colors: RGB, HSB, or hexadecimal?”
The HSB color system is capable of producing 3,626,102 unique colors. Hexadecimal is another way of representing the RGB system, so they both produce the same number of colors-- 16,777,216, which is just under five times more options.
“If that’s the case, why is HSB so great?”
HSB is good because once someone understands the basics of navigating HSB, and generally the way around the system, they can imagine a color they want, and much more easily figure out the values for HSB, than RGB [from my experience].
“SBYP!!”
Just under four years ago, @/MewtwoCreator created a very helpful guide to learning the ropes to HSB as well. It’s very informative, but in my opinion, it doesn’t cover every important detail. [No offense to MewtwoCreator, of course!] You can check out the topic here! Before that, the summer of 2017 was the product of an even simpler guide, made by @/Kikflip. Once again, I don’t personally think it covers every base.
“What about CMYK?”
The CMYK coloring system is mechanically very similar to RGB, and produces even more colors: 103,030,101!! It stands for Cyan, Magenta, Yellow, and blacK [no, I don’t know why it’s like that, either], but is not, in any case, a feature of Hopscotch. If it’s added in the future, the niceness of having a forum tutorial for it will be more relevant, but in the meantime, as with RGB, great explanations exist elsewhere.
“Hang on, aren’t HSL and HSV the same thing as HSB?”
The H and S in all three of these things stand for “hue” and “saturation”, respectively, but while HSB bears “brightness”, HSV expresses “value”, and HSL outputs “lightness.” Bottom line-- brightness and value are synonyms, and therefore, so are HSB and HSV. They mean the same thing, but I’m glad Hopscotch went with the former, as it’s much more clear what “brightness” does. “Value” is too vague. The reason “HSV” is sometimes used is because HSB and RGB both having a “B” occasionally causes confusion.
Be warned-- HSL is not the same thing as HSB or HSV. The lightness value has a confusingly similar name, but HSL focuses its last value as a spectrum between black and white, rather than splitting their inclusions between two values. HSL is a different coloring system.
“Is HSB capable of alpha?”
Sometimes, yes! But not on Hopscotch. Alpha is a number that determines how transparent an object is after having been colored using RGB [or HSB, or CMYK, etc].
Set invisibility is a great substitute in the case of objects, but trails can’t really do alpha at all. Very sad.
“If there are 36,259 ways to say ‘black’ in HSB, what do I tell someone asking me what it is?”
When it doesn’t matter what you set a value to, and it will output the same color overall, it’s commonplace to quote the arbitrary values as 0, which in HSB, is just black [H and S] and the grayscale colors [just H], including white [H]. Black, for example, is widely known as HSB(0, 0, 0) even though HSB(236, 89, 0) produces the exact same thing.
“Wow, this topic is great! Why haven’t you summoned your tag list yet?”
Thanks for the reminder! Hopefully I’ll remember.
“What HSB color are the Hopscotch blocks?”
@/William04GamerA has an answer for you, in the form of this wonderful topic from 2018! All of them are correct!!
“Okay, what about the default Hopscotch colors? You know, like the ones in set color?”
I'm not sure why you would need them, since they're already options as Hopscotch colors, but the approximate values are here in this details folder.
- HSB(288, 66, 38) - Dark purple
- HSB(268, 74, 76) - Bright burple
- HSB(237, 37, 98) - Pastel indigo
- HSB(288, 35, 86) - Pastel purple
- HSB(332, 36, 97) - Pastel pink
- HSB(349, 73, 84) - Salmon
- HSB(333, 100, 76) - Pinkish red
- HSB(351, 100, 74) - Red
- HSB(24, 98, 95) - Orange
- HSB(50, 97, 95) - Golden yellow
- HSB(57, 83, 99) - Yellow
- HSB(121, 39, 100) - Mint green
- HSB(92, 71, 80) - Lime green
- HSB(111, 68, 57) - Green
- HSB(160, 61, 88) - Teal
- HSB(197, 46, 100) - Baby blue
- HSB(190, 87, 78) - Aquamarine
- HSB(208, 79, 82) - Blue
- HSB(222, 71, 41) - Dark blue
- HSB(0, 0, 27) - Dark gray
- HSB(308, 19, 17) - “Fake black”
- HSB(20, 73, 42) - Brown
- HSB(0, 0, 77) - Light gray
- HSB(0, 0, 100) - White
- HSB(0, 0, 0) - “Real black”
Sorry if I missed any!
“You still didn’t summon your tag list, you know.”
Oh yeah. Oops.
Hey, @crayneeum_club, check this topic out! It’s great! It’s so great, in fact, that the act of viewing it is most likely better than deciding to commit a felony instead!
“Can I do both?”
That’s physically possible, but I’d advise against it. You might get in trouble with some very important people.
“You said that middle values for S and B would create a shaded version of that color, but I heard that you can get the same effect, well, actually, a better version of the effect, by adjusting H with it, one way or the other, depending on which direction the nearest primary color is from what H is currently at. What about that?”
You’re right, H does do that! But that might be a little confusing to other people who don’t know HSB that well [and me, at one time], and this topic is just for covering the basics.
“Can you please cover shading by adjusting the hue with it, now? I really, really want to hear about it!”
Maybe in the future, but no promises at the moment. Again, this topic is just for the basics.
“Please?”
No.
“PLEASE???”
Can you stop?
"Wait one sixtieth of a minute, does this concept mean that, without changing S or B, some H-values are, to human eyes, lighter than others, even if HSB doesn’t see it that way?
Yup. HSL is based on this very concept! For reference, H = 0, H = 120, and H = 240 are the darkest, while H = 60, H = 180, and H = 300 are the lightest! Sound familiar?
To know for certain whether one color is lighter or darker than another, convert them to RGB, and add the three values together.
“Wait, how do I convert HSB to RGB?”
Google search “color picker” and you’ll find a lovely apparatus that can convert between RGB, HSB, HSL, RGB, CMYK, and hexadecimal. It also can select a color based on the very concepts HSB is built on!
“You said ‘RGB’ twice.”
Yes, I did.
“I have too much time on my hands. How can I convert between RGB and HSB using pencil and paper?”
You’re weird.
RGB can be converted into HSB using the following:
Define a variable M to be the largest of the three RGB values, and Q to be the smallest one.
Brightness is easy: M divided by 2.55.
If M = 0, saturation is also 0, but if M is anything else, saturation is 100(1 - M/Q).
Here’s the hard part-- hue! Ready?
H = arccos((R-(G/2)-(B/2))/sqrt(R²+G²+B²-RG-RB-GB))
If the original RGB color has a higher B-value than G, subtract that whole mess from 360.
HSB can be converted into RGB using the following:
This one’s actually a case-by-case basis. There are different formulas depending on what the H-value is. [Note: I’m using B to represent blue, and b to represent brightness.]
H = 0-59:
R = 2.55b
G = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
B = 2.55b(100-S)
H = 60-119:
R = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
G = 2.55b
B = 2.55b(100-S)
H = 120-179:
R = 2.55b(100-S)
G = 2.55b
B = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
H = 180-239:
R = 2.55b(100-S)
G = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
B = 2.55b
H = 240-299:
R = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
G = 2.55b(100-S)
B = 2.55b
H = 300-359:
R = 2.55b
G = 2.55b(100-S)
B = (-2.55b(99-S))(1-|((H/60)mod 2)-1|)
“Can HSB values not be integers?”
Yes, even in Hopscotch! It works the way you’d expect for H, but unfortunately S and B round to the nearest integer before outputting. Also, just know, regardless of S and B, if H is between 359 and 360 [or 719 and 720, etc] the color will output as black, for some reason.
“Are we done yet?”
We are!