TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

HSLuv, a developer friendly perceptual color space (2020)

110 pointsby lemaxover 3 years ago

11 comments

undershirtover 3 years ago
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.<p>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&#x2F;UV color spaces, where the Y-axis represents luminance.<p>[1] <a href="https:&#x2F;&#x2F;medium.com&#x2F;@erikdkennedy&#x2F;color-in-ui-design-a-practical-framework-e18cacd97f9e" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@erikdkennedy&#x2F;color-in-ui-design-a-practi...</a>
评论 #29880480 未加载
makeworldover 3 years ago
Also see Okhsv and Okhsl, which is likely an even better color space for color picking.<p><a href="https:&#x2F;&#x2F;bottosson.github.io&#x2F;posts&#x2F;colorpicker&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bottosson.github.io&#x2F;posts&#x2F;colorpicker&#x2F;</a>
评论 #29878160 未加载
zokierover 3 years ago
While good attempt in 2012, afaik we can do better these days with e.g. ok* family of colorspaces: <a href="https:&#x2F;&#x2F;bottosson.github.io&#x2F;posts&#x2F;colorpicker&#x2F;" rel="nofollow">https:&#x2F;&#x2F;bottosson.github.io&#x2F;posts&#x2F;colorpicker&#x2F;</a> (includes section on hsluv)
评论 #29878747 未加载
paulirishover 3 years ago
LCH [1] is quite similar [2] to HSLuv and already shipped as a CSS color function in Safari (and soon in Chromium).<p>[1] <a href="https:&#x2F;&#x2F;lea.verou.me&#x2F;2020&#x2F;04&#x2F;lch-colors-in-css-what-why-and-how&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lea.verou.me&#x2F;2020&#x2F;04&#x2F;lch-colors-in-css-what-why-and-...</a><p>[2] <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18425916" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18425916</a> similar thread from 3 years ago
评论 #29882901 未加载
blunteover 3 years ago
What I immediately noticed was how easy it was to read the article’s “dark mode” presentation.<p>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.<p>Even in ye olde days working on green on black CRTs I was uncomfortable.<p>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.
rpastuszakover 3 years ago
I was considering using HSLUV for the background effect on <a href="https:&#x2F;&#x2F;potato.horse" rel="nofollow">https:&#x2F;&#x2F;potato.horse</a> and documented my progress in this article: <a href="https:&#x2F;&#x2F;sonnet.io&#x2F;posts&#x2F;use-rainbow&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sonnet.io&#x2F;posts&#x2F;use-rainbow&#x2F;</a><p>It&#x27;s a (very rudimentary) introduction to colour modes.
soperjover 3 years ago
Why is that seemingly every single article about color on the web never meets accessibility guidelines for contrast of text to background?
评论 #29880193 未加载
zamadatixover 3 years ago
There is also HPLuv which adds in absolute saturation, albeit at the cost of having even less saturated colors. <a href="https:&#x2F;&#x2F;www.hsluv.org&#x2F;comparison&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.hsluv.org&#x2F;comparison&#x2F;</a> would be interesting to see how much saturation changing from sRGB to e.g. DCI-P3 would bring.
bee_riderover 3 years ago
I&#x27;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.
评论 #29877766 未加载
lootsauceover 3 years ago
Using this for my css themes to target specific contrast target across light and dark themes.
TheRealNGeniusover 3 years ago
surprised to see such poor color choice from an article talking about colors. Unless of course you&#x27;re going for that green tinted matrix vibe. In which case, please carry on...
评论 #29885541 未加载