[HN Gopher] HSLuv, a developer friendly perceptual color space (...
___________________________________________________________________
HSLuv, a developer friendly perceptual color space (2020)
Author : lemax
Score : 97 points
Date : 2022-01-08 06:23 UTC (2 days ago)
(HTM) web link (www.kuon.ch)
(TXT) w3m dump (www.kuon.ch)
| undershirt wrote:
| 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...
| dwallin wrote:
| 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.
| paulirish wrote:
| 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
| bryanrasmussen wrote:
| yeah but I swear LCH and LAB have been almost read to ship in
| chrome and FF for the last year now.
| zamadatix wrote:
| 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.
| bee_rider wrote:
| 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.
| TheRealPomax wrote:
| And probably using a colour profile intended to make media or
| games look better, rather than making everything more colour-
| accurate.
| bee_rider wrote:
| It is a thin-and-light so I hope they didn't calibrate it for
| gaming, but who knows with some of these OEMs.
| tadfisher wrote:
| 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.
| kingcharles wrote:
| 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.
| makeworld wrote:
| Also see Okhsv and Okhsl, which is likely an even better color
| space for color picking.
|
| https://bottosson.github.io/posts/colorpicker/
| DiabloD3 wrote:
| I originally wrote a perceptual color mangler of sorts using
| HSLuv, but then switched to OKLab and got better results for
| the same job.
| eyelidlessness wrote:
| 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.
| lootsauce wrote:
| Using this for my css themes to target specific contrast target
| across light and dark themes.
| [deleted]
| zokier wrote:
| 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)
| deltron3030 wrote:
| 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/
| aaaaaaaaaaab wrote:
| Purple was the color of royalty because it was expensive.
| Same for gold.
| Aethylia wrote:
| > Classic colors of royalty
|
| I think this is a stretch, red and blue are also classic
| colours of royalty.
| zokier wrote:
| 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".
| soperj wrote:
| Why is that seemingly every single article about color on the web
| never meets accessibility guidelines for contrast of text to
| background?
| kuon wrote:
| 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.
| soperj wrote:
| 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.
| daok wrote:
| If you run Chrome Lighthouse you will get a list of all the
| color contrast issues.
| kuon wrote:
| 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.
| ghusbands wrote:
| 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). Even the main text could do with a bit more
| contrast, even if it does officially pass.
|
| [1] https://imgur.com/a/G6g0vNG
| rpastuszak wrote:
| 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.
___________________________________________________________________
(page generated 2022-01-10 23:01 UTC)