Live data from Hacker News

New alternatives to HSL and HSV that better match color perception

bottosson.github.io

21–30 of 80 posts

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

#21

These days I would want a color picker that considers the lighting and surrounding colors. I have an office which has huge windows facing (mostly) away from the sun so I have bright light from either clouds or blue sky. Reproductions of renaissance paintings and photographs on ‘bright white’ paper look great, but at home the color temps are in the high 2000s usually and I need coated papers for the images to be compe…

Then get a colorimeter that can measure that ambient light and recalibrate your screen. The highest end monitors have hoods on them to prevent external light from having too much influence on your screen.

If your desk doesn't move, you could always have a cron job that loads different color profiles based on time of day and possibly weather if you really want to make a project of it.

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

#22

I'm fascinated by this field - ultimately all 2D color pickers show a slice of a 3D structure and we use one dimension (usually brightness) to navigate through the Z axis of this structure. A while ago I built this experiment to show how true 3D color pickers would work: https://wolframhempel.github.io/skeeem/

Why does it flood my navigation history? I couldn't use my back button to return to here after playing around a bit.

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

#23

Good related reading: https://raphlinus.github.io/color/2021/01/18/oklab-critique.... , with some analysis of various colour spaces of different types, focusing especially on their behaviour in gradients, to do with interpolation. My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard. For example, with #ff0 (yellow) in LCH, you can’t tweak a…

Wow, you’re not kidding about the LCH picker working poorly near the gamut boundary. Changing hue is especially poorly behaved.

Hint to people trying to reproduce this: start by clicking the input button at the top and typing #ff0

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

#25

Good related reading: https://raphlinus.github.io/color/2021/01/18/oklab-critique.... , with some analysis of various colour spaces of different types, focusing especially on their behaviour in gradients, to do with interpolation. My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard. For example, with #ff0 (yellow) in LCH, you can’t tweak a…

My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard.

I agree, this can be awkward. I like using perceptual spaces because they are self-evidently a “neater” starting point for colour work than something artificially distorted like HSL or (horror!) RGB, but it’s important to recognise that they offer an incremental improvement and don’t magically solve all problems. In particular, producing a useful and/or aesthetically pleasing result still isn’t necessarily as simple as varying one axis in isolation, because you can quickly fall outside the available gamut that way.

As a practical example of this, I recently needed a scheme for a variation of syntax highlighting in a structured document. My requirements were:

1. around 10 clearly distinct hues

2. all colours maintaining good contrast with a white background

3. no colour appearing too bright relative to the near-black unhighlighted text

4. all colours at a similar level of perceived lightness to avoid unintentional bias or emphasis.

My starting point was to choose evenly spaced hues within a perceptually uniform colour space, pick a medium-to-low value and look for maximum chroma in each case. This wasn’t a bad start, but it still needed significant practical adjustments like increasing the value for colours around the yellow/green area and dropping a hue entirely so I could space others around the blue/purple area more widely. Otherwise, however perceptually uniform the scheme might theoretically have been, in practice it would have ended up with the yellow/green area colours looking washed out and the blue/purple ones not distinctive enough under some realistic viewing conditions.

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

#26

Good related reading: https://raphlinus.github.io/color/2021/01/18/oklab-critique.... , with some analysis of various colour spaces of different types, focusing especially on their behaviour in gradients, to do with interpolation. My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard. For example, with #ff0 (yellow) in LCH, you can’t tweak a…

IMO perceptual uniformity isn't even necessarily desirable in all (or even most) cases. The only time I think it's really necessary is making color palettes for data visualizations. Otherwise, if you're e.g. designing a color palette for a webpage, you probably do want some variation in perceived brightness. Heck, I could think of plenty of valid data visualization scenarios where you'd want this.

I want to be able to have variation in perceived brightness, but not as a side effect while browsing for a hue. I doubt most designers would argue otherwise.

Compare it to waiting for a compiler: Sure, you can use the time off to stretch and take a sip of tea but there would be no serious opposition to compilers working at double speed tomorrow. It's simply better to not have to wait (all else being equal). But it's something you accepted and you deal with it, so wait you will.

The current color pickers are an annoyance that we have lived with since, well, always, but an annoyance nonetheless. Happy to adopt these pickers if they gain adoption. OKHSL and OKHSV look spiffy.

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

#27

Good related reading: https://raphlinus.github.io/color/2021/01/18/oklab-critique.... , with some analysis of various colour spaces of different types, focusing especially on their behaviour in gradients, to do with interpolation. My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard. For example, with #ff0 (yellow) in LCH, you can’t tweak a…

My biggest complaint about perceptual colour spaces has been that they make working with colours near gamut boundaries really hard. I agree, this can be awkward. I like using perceptual spaces because they are self-evidently a “neater” starting point for colour work than something artificially distorted like HSL or (horror!) RGB, but it’s important to recognise that they offer an incremental improvement and don’t mag…

I played around with a perceptual color space and made an interactive doodle that you can see here: https://hexpansion.io/ → click on "Colors".

The blobs attempt to spread out in a perceptual color space. You can add more blobs with + and remove them by clicking on their pie slices or on a blob directly.

Code is based on an older perceptual color space: https://github.com/neolefty/hexerals/tree/master/src/color

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

#28
post #6

Looking at the author's explanation for HSV and HSL, it sounds like they are designed for hypothetical programmable wavelength lights and paints. Hue would be wavelength, Saturation is either output filter bandwidth or conversion element efficiency, Value/Lightness is either output current or amount of ink. RGB is likewise for fixed wavelength three-color lights/filters, and CMYK is for prints. I think it's the same…

The whole HSL and HSV business has never been about hypothetical light sources. HSL and HSV are created from monitor CRT RGB using piecewise functions for the hue. No colorimetric considerations are given at all: it’s all about how to mix an algebraic mean.

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

#29
post #22

I'm fascinated by this field - ultimately all 2D color pickers show a slice of a 3D structure and we use one dimension (usually brightness) to navigate through the Z axis of this structure. A while ago I built this experiment to show how true 3D color pickers would work: https://wolframhempel.github.io/skeeem/

Why does it flood my navigation history? I couldn't use my back button to return to here after playing around a bit.

Apparently it saves what you do to the address bar. Which is good on its own, but messes up history when you use href.assign() instead of .replace().

https://developer.mozilla.org/en-US/docs/Web/API/Location/re...

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

#30
What's interesting is that the HSL/HSV wheel in Adobe programs has a slightly different disribution compared to the rest of the industry, they've basically tweaked it perceptually. This yields different results in their color grading tools within camera raw and premiere.
Post reply on HN