HSL: An Intuitive Way to Represent Color in CSS | Hacker News Reader

HSL: An Intuitive Way to Represent Color in CSS

helpscout.com

19 pointstinkertrain10 comments

For me HSL is not intuitive at all. I always struggle to remember what hue of each colour is. I would even say that rgb is still the most intuitive for picking a particular color hue, but of course HSL or the newer ones like oklch are much better at picking matching saturation and lightness levels.

RGB is intuitive for math adepts or for folks that can visualize the full RGB cube along 3-axis in their minds.

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

See https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/RG...

You don’t need to know anything more about math to understand additive colour mixing.

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.

Did you observe that in ALL your examples you have given only 2 colors at a time ? This is because it is extremely difficult to visualize 3 colors additively together. Doing it with trial and error and "try it and see" is painful. Too much wasted time. (Well..there ARE some people who are expert at mixing 3 colors - they visualize the full RGB cube and magically output 3-color permutations off the bat after looking into space...)

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.

I agree. HSV is the opposite of intuitive to me. But "intuitive" is subjective, and HSV encoding does, as you point out, make certain types of operations much easier than RGB encoding does (and vice versa).

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.

H cycles ROYGBIV from 0 to 360 degrees, normalized 0 to 255.

S controls saturation and V controls brightness.

I don't think H is normalized to 255, it's just 0-360 °

S and L are normalized as 0-100 %

Why using hsl instead of oklch or any perceptual colorspace ?

Great question.

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...

my intuiton tells me my emacs shows me a colorname, rgb, hex and hsl or whathaveyou in color.

confirmed - and a valid color name gets converted to #hexval; on spacebar it seems

Reply on news.ycombinator.com