HSLuv, a developer friendly perceptual color space (2020) | Hacker News Reader

HSLuv, a developer friendly perceptual color space (2020)

kuon.ch

110 pointslemax33 comments

Erik Kennedy has an interesting hack[1] to naturally darken or lighten any color using the standard HSB color picker. He mimicks how colors generally change when shadows are cast on them in the real world—simply by twisting the Saturation and Brightness knobs in opposite directions.

I thought a lot about why that needs to happen. He describes it as an operation that is “adding or subtracting white”. Geometrically, you’re just moving the color closer or further from the white corner of the RGB cube. So I wonder if that maps close enough to moving up-and-down in the CIELAB/UV color spaces, where the Y-axis represents luminance.

[1] https://medium.com/@erikdkennedy/color-in-ui-design-a-practi...

For hue he noticed the correct trend but misattributed the reason. The reason for the color shift in sunlit shadows is that outdoors the fill light is blue-toned due to Raleigh scattering while the direct light is from the sun and is closer to yellow.

Also see Okhsv and Okhsl, which is likely an even better color space for color picking.

https://bottosson.github.io/posts/colorpicker/

I originally wrote a perceptual color mangler of sorts using HSLuv, but then switched to OKLab and got better results for the same job.

I tried to do the same switch and found the results wildly unpredictable. That said, to get there I reverse engineered some demo code that was very hard to follow, and I probably made a mistake. Either way I’m perfectly happy with my HSLuv results so I reverted.

While good attempt in 2012, afaik we can do better these days with e.g. ok* family of colorspaces: https://bottosson.github.io/posts/colorpicker/ (includes section on hsluv)

Kinda sad that there is no distinction made between color selection and color production. RGB based color opponents (e.g. red - cyan, green - purple) are less pleasing to the eye and culturally relevant than RYB ones (red - green, yellow - purple).

Let's say you develop a luxury theme, the yellow - purple opponency would naturally lead you to the classic colors of royality, purple and gold.

A good RYB based picker is the good old Paletton: https://paletton.com/

If (and that is a big if) using opponents results pleasing pairings only with some specially crafted wonky RYB colorspace then to me that is more just an indication that using opponents is not a robust way of picking pleasant pairings.

I am also very dubious about the claim of the color pairings being more or less "culturally relevant".

They're more pleasing because artists and graphic designers used RYB pairings for decades, these pairings all over the place in analog and digital media, people are more used to them. Even Adobe still uses an RYB wheel in their software, RGB only for color grading (it still deviates slightly from a normal RGB color distribution).

RYB is more culturally relevant because artists and designers "produce" culture based on it.

> Classic colors of royalty

I think this is a stretch, red and blue are also classic colours of royalty.

Purple was the color of royalty because it was expensive. Same for gold.

LCH [1] is quite similar [2] to HSLuv and already shipped as a CSS color function in Safari (and soon in Chromium).

[1] https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-...

[2] https://news.ycombinator.com/item?id=18425916 similar thread from 3 years ago

yeah but I swear LCH and LAB have been almost read to ship in chrome and FF for the last year now.

What I immediately noticed was how easy it was to read the article’s “dark mode” presentation.

Normally with very dark background and white or light gray or yellow text, I quickly develop weird persistent white and black ghost rows which eventually make reading very uncomfortable.

Even in ye olde days working on green on black CRTs I was uncomfortable.

Somehow the green and purple colors on the dark background are easily readable and leave no temporary burn-in on my eyes. This is amazing and wonderful.

I was considering using HSLUV for the background effect on https://potato.horse and documented my progress in this article: https://sonnet.io/posts/use-rainbow/

It's a (very rudimentary) introduction to colour modes.

Why is that seemingly every single article about color on the web never meets accessibility guidelines for contrast of text to background?

Hello, author here.

I realize the color palette might not be the most readable as I tried to use my "signature palette". Anyway I did check the contrast, and it passes the recommendations I found. If you can pin point a place where it does not, I'd be happy to fix it.

Your main heading is barely visible [1] (font-weight: 100 is only good on macs, where fonts all get thickened by the system on display).

The colour of it (#4D644F on #090D1D) fails WCAG AAA at both large and small sizes.

The colour of every code tag (#6B7280 on #281234) also fails WCAG AAA and has readability reduced by having a contrasting edge against the background.

Your "last update" text at the problem is also lacking contrast.

That was just from glancing through (and copying numbers around). However, it is made worse by blue-light exposure reduction software (like that built in to Windows 10, Android and others, or provided by f.lux).

[1] https://imgur.com/a/G6g0vNG

Thanks for the screenshot, I will fix it. It is not that thin on my linux box, but I did tune fontconfig.

I wasn't trying to blame you specifically, so sorry if it feels that way. There's a lot of things posted about color. No one seems to take accessibility seriously, and in that space it should be one of the few things taken into account.

None of your header text or link text passes WCAG standards. So I don't know what recommendations you were looking at.

Don't feel bad, I do take accessibility seriously, and I'm happy I got feedback.

If you run Chrome Lighthouse you will get a list of all the color contrast issues.

Thanks, I ran the tool and the text/background is fine, but there are a few places where it is not (mainly code blocks). I'll fix it.

There is also HPLuv which adds in absolute saturation, albeit at the cost of having even less saturated colors. https://www.hsluv.org/comparison/ would be interesting to see how much saturation changing from sRGB to e.g. DCI-P3 would bring.

I've got an OLED and a some more conventional (I actually forget the tech, haha) monitor. HSLuv example actually looks less uniform on the OLED -- green, cyan, and to a lesser extent blue are notably brighter. Looks good on the conventional monitor, though. I could just be miscalibrated, though, my OLED is pretty cheap.

And probably using a colour profile intended to make media or games look better, rather than making everything more colour-accurate.

It is a thin-and-light so I hope they didn't calibrate it for gaming, but who knows with some of these OEMs.

My SpyderX was a really good investment, because now I can actually use my panel's entire range without everything looking hideous on my desktop.

I would second this. If you care about seeing the right colors, get a monitor calibration tool. Although once you get one you'll see that everything is actually fucked and wrong.

Although of course a colour calibrator can't magically invent more colours, so if your panel can only do 80% sRGB, that's the absolute best a Spyder will get you. Still very much worth getting, but it won't fix a narrow gamut.

Using this for my css themes to target specific contrast target across light and dark themes.

surprised to see such poor color choice from an article talking about colors. Unless of course you're going for that green tinted matrix vibe. In which case, please carry on...

And yet, I find it the most pleasantly readable dark mode text I’ve seen.

Reply on news.ycombinator.com