HSL: An Intuitive Way to Represent Color in CSS(helpscout.com) |
HSL: An Intuitive Way to Represent Color in CSS(helpscout.com) |
The rest of us need to work with average-brain color systems such as HSL (or the even better but sadly not well supported HSB) with an acronym for colors at every 60° in the wheel.
Hue: Young(60°-Yellow) Guys(120°-Green) Can(180°-Cyan) Be(240°-Blue) Messy(300°-Magenta) Rascals(0°/360°-Red)
Saturation: From 0%-Dullard Gray to 100%-Eye Popping Full Color of Hue
Lightness: From 0%-Black to 100%-White.
Usually one fixes the Hue and then adjusts saturation/lightness to get the tints one needs.
You can split hue even further at 30° intervals to get the some more standard named colors.
30°-Orange between 0°-Red and 60°-Yellow
90°-Chartreuse between 60°-Yellow and 120°-Green
150°-Spring Green between 120°-Green and 180°-Cyan
210°-Azure between 180°-Cyan and 240°-Blue
270°-Violet between 240°-Blue and 300°-Magenta
330°-Rose between 300°-Magenta and 360°-Red
Colour computer screens use RGB - colour printers use CMYK. (K is ‘black’, which is not a primary or secondary colour, so we’ll ignore it for now.)
They nest into eachother, with RGB being primary colours and CMY being secondary: R-y-G-c-B-m-R. Any kid that’s used fingerprints or water colours knows how to combine primary colours to get secondary colours.
You know if you want red, then you do 100% red. You know if you want yellow, you do 50% red, 50% green. If you want orange, which is a more reddish yellow, you do 75% red, 25% green. Brown might be a little more complicated - but still, what is brown? Darker orange? Maybe 25% red, 15% green? Try it and see!
(Also for black and white - again, any kid with a prism and a flashlight (or sunbeam) knows that white light is all colours together - red 100%, green 100%, blue 100%. The opposite of white is black, which is no light at all, which is just 0% across the board.)
No math adeptety or cube visualization necessary, this is all elementary school children level stuff. You already know most of it.
In the end, I think it's just a case of use the type of encoding that is appropriate for what, specifically, you're doing.
S controls saturation and V controls brightness.
S and L are normalized as 0-100 %
A great article on why OKLCH: “OKLCH in CSS: why we moved from RGB and HSL” [1].
[1]: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
confirmed - and a valid color name gets converted to #hexval; on spacebar it seems
Whereas, Hue in a 360° axis gives you a braindead-simple, direct color access - cycling across the color wheel with well-defined, named and representative colors at regular degree intervals. The 2D visualization of a circle is far easier.
You grab your primary color - hue and then you adjust your saturation and lightness (which is across a simple, linear semantic axis) to get tones and shades. FAR more simpler than RGB to get an elegant color palette going. You can knock out a distinct color palette for a site using HSL in ~5-10mins. Use a color-contrast tool against text to check accessibility and then you never pay attention to color again.
