Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New alternatives to HSL and HSV that better match color perception

bottosson.github.io

Post reply on HN
Print view View original

61–70 of 80 posts

Re: New alternatives to HSL and HSV that better match color perception

#61

Post by retsibsi »

chrisseaton wrote: post #59
kortex wrote: post #58

Earlier quoted context omitted.

I think what makes brown unique in this regard is its ubiquity in nature, partial desaturation, and lack of obvious mapping to a saturated color. Emergence of names of colors in languages usually goes black, white, red, yellow, grue, then blue forks from blue, brown, orange, then "specialty" colors like pink, purple, indigo, teal. It's the only partially saturated shade that gets a name before its saturated variant (…

> lack of obvious mapping to a saturated color 30 degrees hue, 50% value, 100% saturated, looks exactly brown to me? > brown is not "dark orange." I think it is. In fact, take my 30 degrees hue, 50% value, 100% saturated, then gradually increase the value and see where you get to!

I don't think the other commenter is disagreeing with you on those things -- they're talking about human perceptions, and saying that although brown is in fact dark orange, that's not how we name it or how we tend to see it.

Re: New alternatives to HSL and HSV that better match color perception

#62

Post by beckerdo »

ianbicking wrote: post #39

My personal complaint with color pickers is that they make it hard to find many normal environmental colors. Where is brown? I've learned to find it around red, a little toward orange, and a dark saturation. It's not intuitive, and I don't feel like I just pick _some_ brown because I can't easily explore the space of browns through beige and tan. Flesh tones are similarly difficult. I'm not sure what the solution is.…

Some color pickers allow you to load a palette of names and they locate those names and values in the color picker interface.

You can load common name sets (e.g. X11 color names, CSS names, Munsell names, Behr) and they map their values into your color pickers.

This works well especially with paint pigments as every manufacturer has their exotic names that they hype for that year. "Oh, 'Ice Blue' is really just a slightly blueish white."

Re: New alternatives to HSL and HSV that better match color perception

#63

Post by retsibsi »

chrisseaton wrote: post #54
ThatCaio wrote: post #52

Earlier quoted context omitted.

In English, pink and brown are very specific colors which the brains of native speakers might not associate with their true hue values. That's why the original commenter was having difficulty finding brown, because we do not necessarily associate it with a dark orange or flesh color with de-saturated red or orange. But if we were trying to paint something like dark teal water. The brain would immediately go straight…

> That's why you were having difficulty finding brown Not sure if you’re replying to the right person? I didn’t say anything about finding brown being difficult. I don't even know what that would mean for it to be difficult to find a colour? > because you do not necessarily associate it with a dark orange That’s what brown is - a dark orange. The same way navy is a dark blue. But nobody makes videos claiming that nav…

It sounds like the brown-orange link is intuitively obvious to you. But I think the claim being made is that for most native English-speakers, the link between orange and brown is significantly less obvious than that between X and dark X, for most colours X. FWIW that is true in my case.

(Not that I deny the link exists; but when I look at e.g. an orange next to a dark brown tree branch, I don't see them as versions of the same colour in the way I do with, say, a lime and a dark green leaf. That's not a great example but hopefully you see what I'm getting at.)

Re: New alternatives to HSL and HSV that better match color perception

#64

Post by retsibsi »

chrisseaton wrote: post #59
kortex wrote: post #58

Earlier quoted context omitted.

I think what makes brown unique in this regard is its ubiquity in nature, partial desaturation, and lack of obvious mapping to a saturated color. Emergence of names of colors in languages usually goes black, white, red, yellow, grue, then blue forks from blue, brown, orange, then "specialty" colors like pink, purple, indigo, teal. It's the only partially saturated shade that gets a name before its saturated variant (…

> lack of obvious mapping to a saturated color 30 degrees hue, 50% value, 100% saturated, looks exactly brown to me? > brown is not "dark orange." I think it is. In fact, take my 30 degrees hue, 50% value, 100% saturated, then gradually increase the value and see where you get to!

Just out of curiosity, what if you go to a significantly darker brown, say 30/100/20 h/s/v. Unfortunately these subjective tests will vary from monitor to monitor, but assuming that's still clearly brown rather than black to you (to me it's a more archetypal brown than the brighter version you initially named, which I might call orange-brown) -- what do you perceive when you keep the saturation and value fixed, and vary the hue? Would you agree that many or most of the other hues give you a colour more obviously 'dark X', where X is the 100%-value counterpart, than hue 30 does? For me it's much more obvious at the green-blue-purple segment of the spectrum than the red-orange-yellow segment.

This isn't meant as a trick question or anything -- if I'm getting at anything specific, it's that maybe part of the reason the orange-brown link seems more obvious to you than to me is that when you think of a central example of brown, you think of something brighter (and thus more obviously orange) than I do.

Re: New alternatives to HSL and HSV that better match color perception

#65

Post by dard12 »

chrisseaton wrote: post #54
ThatCaio wrote: post #52

Earlier quoted context omitted.

In English, pink and brown are very specific colors which the brains of native speakers might not associate with their true hue values. That's why the original commenter was having difficulty finding brown, because we do not necessarily associate it with a dark orange or flesh color with de-saturated red or orange. But if we were trying to paint something like dark teal water. The brain would immediately go straight…

> That's why you were having difficulty finding brown Not sure if you’re replying to the right person? I didn’t say anything about finding brown being difficult. I don't even know what that would mean for it to be difficult to find a colour? > because you do not necessarily associate it with a dark orange That’s what brown is - a dark orange. The same way navy is a dark blue. But nobody makes videos claiming that nav…

This seems like a simple case of different people finding different things unintuitive.

My theory is that many people have a mental model of colors that maps roughly to the hue and value in HSV, so for example terms like "dark orange" is a value followed by a hue. Now suppose you understand brown as a "dark beige", that's suddenly confusing because beige introduces saturation and you cannot map beige back to orange without thinking about saturation.

Re: New alternatives to HSL and HSV that better match color perception

#66

Post by kdrag0n »

It's true that perceptual color spaces can be hard to work with, but they can help generate fairly good UI themes on-the-fly when used correctly. For UI, the ability to keep lightness constant regardless of chroma and hue is essential to preserve contrast. Likewise, hue is quite important to keep constant because it's the most prominent part of a dynamic theme. This leaves chroma as the remaining component that can be reduced to bring colors in gamut.

UI examples: https://twitter.com/kdrag0n/status/1427822417313898498 (using ZCAM, not Oklab or the new Oklab/Okhsv) / https://www.figma.com/file/ZeqPgO1RgA6eg8TMm7r8Ae/kdrag0n's-...

Full generated palettes: https://twitter.com/kdrag0n/status/1431100523894083589 / https://www.figma.com/file/mZ6VxvsC2yN4zD9rDR4S2I/kdrag0n's-...

Yes, it's very easy to create colors outside the sRGB gamut boundaries, and you have to compromise something in order to bring them back in gamut. However, when working with colors programmatically, I'd still recommend considering perceptually-uniform color spaces instead of HSL/HSV-style models that are made to simplify interactive color picking.

Re: New alternatives to HSL and HSV that better match color perception

#67

Post by eyelidlessness »

eyelidlessness wrote: post #43

I’ve used HSLuv a fair bit, and while it’s great for e.g. programmatically ensuring good contrast… it produces some unpleasant colors especially in the yellowish range. I’m going to try out Okhsl as a replacement because it sure looks nicer to my eyes, at least on my phone.

It turned out… not good. That said the entire JS interface was unclear what numeric types it expected and I have no idea if I was using it correctly. I’ll take the yucky mustard yellow browns I have for now :shrug:.

Re: New alternatives to HSL and HSV that better match color perception

#68

Post by eyelidlessness »

eyelidlessness wrote: post #67
eyelidlessness wrote: post #43

I’ve used HSLuv a fair bit, and while it’s great for e.g. programmatically ensuring good contrast… it produces some unpleasant colors especially in the yellowish range. I’m going to try out Okhsl as a replacement because it sure looks nicer to my eyes, at least on my phone.

It turned out… not good. That said the entire JS interface was unclear what numeric types it expected and I have no idea if I was using it correctly. I’ll take the yucky mustard yellow browns I have for now :shrug:.

When I did eventually produce colors I expected to be generally perceptually uniform, everything bluish was much much brighter than I expected. Drastically worse than HSL.

I don’t think this is a problem with the color space, I think the JS source wasn’t designed to be used by humans.

Re: New alternatives to HSL and HSV that better match color perception

#69

Post by chrisseaton »

dard12 wrote: post #65
chrisseaton wrote: post #54

Earlier quoted context omitted.

> That's why you were having difficulty finding brown Not sure if you’re replying to the right person? I didn’t say anything about finding brown being difficult. I don't even know what that would mean for it to be difficult to find a colour? > because you do not necessarily associate it with a dark orange That’s what brown is - a dark orange. The same way navy is a dark blue. But nobody makes videos claiming that nav…

This seems like a simple case of different people finding different things unintuitive. My theory is that many people have a mental model of colors that maps roughly to the hue and value in HSV, so for example terms like "dark orange" is a value followed by a hue. Now suppose you understand brown as a "dark beige", that's suddenly confusing because beige introduces saturation and you cannot map beige back to orange w…

> Now suppose you understand brown as a "dark beige"

I think my point is brown is dark beige, and beige is light brown. Neither is canonical. Is orange canonical? Maybe it's high frequency red? Or low frequency yellow? That's what Newton thought! It's all relative.

Re: New alternatives to HSL and HSV that better match color perception

#70

Post by chrisseaton »

retsibsi wrote: post #64
chrisseaton wrote: post #59

Earlier quoted context omitted.

> lack of obvious mapping to a saturated color 30 degrees hue, 50% value, 100% saturated, looks exactly brown to me? > brown is not "dark orange." I think it is. In fact, take my 30 degrees hue, 50% value, 100% saturated, then gradually increase the value and see where you get to!

Just out of curiosity, what if you go to a significantly darker brown, say 30/100/20 h/s/v. Unfortunately these subjective tests will vary from monitor to monitor, but assuming that's still clearly brown rather than black to you (to me it's a more archetypal brown than the brighter version you initially named, which I might call orange-brown) -- what do you perceive when you keep the saturation and value fixed, and v…

> Would you agree that many or most of the other hues give you a colour more obviously 'dark X'

Hmm not really. But we're not going to resolve what seems like a subjective question!

Post reply on HN