9 ms·
New alternatives to HSL and HSV that better match color perception
- junon 5y ago> The main drawback of using these models directly for color picking is that the sRGB gamut has a quite irregular shape in these color spaces. As a result, changing one parameter, such as hue, can easily create a color outside the target gamut, making them quite tedious to use. Yes, and since we use color models in development primarily to model RGB light as displayed by machines, these are less than useful indeed. For anyone looking for a neat color model that is novel and is a bit more intuitive (arguably), look up HCG.
- bloopernova 5y agoHCG https://github.com/helixd2s/hcv-color https://github.com/helixd2s/hcv-color HCG = Human Chorionic Gonadotropin, which will dominate your search results.
- junon 5y agoThanks, seems they renamed it recently.
- rauhallinen 5y agoI had a project where I had to convert absorption spectrum of a liquid sample into a colour. It was one of those "Just do this quick, it doesn't have to be perfect" type of things where I didn't get a chance to really understand it. I was baffled how many standards and technicalities there is behind a seemingly simple thing.
- aaaaaaaaaaab 5y agoTake the dot product between 1 - your spectrum and the CIE XYZ color matching functions, then convert it to sRGB or any other color space of your choice.
- PaulHoule 5y agoThese 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 compelling. So I am always thinking about what environment a print is in and would love to have more tools to tune up the appearance.
- jedimastert 5y agoI think screen color space and print color space are just two entirely different considerations. They meet up in the middle somewhere, but you really can't look at both at the same time
- PaulHoule 5y agoEither the screen or the print depends on the surrounding environment. The print also depends on how it is lit. To some extent one learns that something that looks like this in one environment will look like that in that environment.
- toastal 5y agoThen 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.
- numpad0 5y ago“Technically correct” way would be to control the surroundings than adapt representations. High CRI lightbulbs, display hoods, wallpapers, etc.
- nielsbot 5y agoFTA: OKLab et al specifically excludes consideration of illumination environment for simplicity: "Should assume normal well lit viewing conditions" https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- numpad0 5y agoLooking 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 situation as units of measurements in aviation[1] being all over the places; the measurements are tied to specific devices, principles and usages of them. 1: Altitude in feet measured by pressure altimeters, distances measured in nautical miles defined as one minute of latitude, fuel in pounds and dimensions in inches, but never altitudes in miles or distances in feet, except for runway lengths which is always feet or meters.
- arthur2e5 5y agoThe 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.
- p1mrx 5y ago> Hue would be wavelength This doesn't work, because "https://en.wikipedia.org/wiki/Magenta https://en.wikipedia.org/wiki/Magenta is an extra-spectral color, meaning that it is not a hue associated with monochromatic visible light."
- egypturnash 5y agoHSV/L are conceptually close to the way artists have been thinking about color for centuries, since the days when everyone ground their own pigments. Hue is the angle on the color wheel. Which somewhat translates to wavelength if you ignore the fact that we see chords of high blue + low red as the colors we give names like purple, indigo, violet, and magenta. Saturation is how intense the color is. Lower the saturation and it turns grey, or pastel. We have a few special names here; "pink" is a low-saturation red, for instance. Value/lightness how dark/light a color is. Lower the value on that "pink" and you might get something you'd label "brick red": it's darker, it's still definitely reddish, but it's not the most intense red you can get while still being kinda dark. Saturation collapses as you go to the extremes of value/lightness, it's just pitch black at one end and pure white light at the other.
- bitL 5y agoHow is color distance computed for these? Still Euclidean or a different measure? Euclidean on RGB leads to "grayification" of colors.
- arthur2e5 5y agoOn the original OKlab Euclidean will do. Perceptually-uniform color spaces are designed for that (at least for close colors). On these slightly squished and stretched ones… I think converting back to OKlab is the better idea. You can just turn the polar stuff into Cartesian directly too, but it will be distorted.
- lettergram 5y agoThere’s some really cool features about lab-like color spaces. Particularly, the ability to quickly find, localize and transmit data (from with lower error rates): https://austingwalters.com/chromatags/ https://austingwalters.com/chromatags/ In almost every computer vision class I took, switching to the LAB color space and rerunning algorithms also still always led to improvement. The real trick in my mind is trying to do this via sensors and / or hardware.
- arthur2e5 5y agoThe OKlab definition is probably a bit easier to implement in hardware than CIELAB since there’s no funny “if” branch. Still, the number representation will be more complicated than YUV and such… fp16 maybe? IIRC author of the TFA has retweeted some shader implementation of OKlab for color interpolation.
- woofie11 5y agoI think the real story is subjective, not quantitative. Color pickers: https://bottosson.github.io/misc/colorpicker/ https://bottosson.github.io/misc/colorpicker/ OKHSL works a lot better than the alternatives. It's really nice! OKHSV doesn't seem as good, and neither do the other new ones.
- sabellito 5y agoOh that really helped me understand this whole thing.
- JKCalhoun 5y agoAnd speaking subjectively, I have always preferred HSV because I came to color from the background of mixing pigments (painting). Adding white to a pigment to desaturate it (make it more pastel) is intuitive with paints ... as is adding black to darken a pigment. HSV (and Okhsv) more closely match my painterly intuition.
- dasyatidprime 5y agoHSV and not HSL for that mental model? That's surprising to me—I thought the tint/shade system would lead to wanting to put max-chroma in the middle.
- chrismorgan 5y agoGood related reading: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html 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 any of the three parameters in either direction without going out of gamut (play with it at https://css.land/lch/ https://css.land/lch/ to get a vague idea of what I mean, though it doesn’t handle going out of gamut well). Yet such colours have plenty of practical value, and it’s a shame that many things eschew them because they’ve drunk too much perceptual uniformity kool-aid. Colour palettes often just don’t have any decent yellows at all. (To be sure, you do need to use such colours with care, but to remove them altogether is distressing.) For colour pickers especially, perceptual colour spaces have just been no good, because of their weird shapes and because you’re more likely to want to pick interesting colours nearer gamut bounds. So I’m really glad to see this, because it’s just what I’ve been grumbling about the absence of. Thank you Björn, I continue to enjoy your work!
- nerdponx 5y agoIMO 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.
- atoav 5y agoAnother application that might not be as rare as one would like to think is color-interpolation. Interpolating colors in a way that doesn't make them perceptually brighter or darker is hard. As someone who deals with color pickers a lot, it is just nice to have multiple options. Sometimes I just wanna punch in a hex number, sometimes I want a SV+H square, sometimes HS+V works better, etc. I see value in having a color picker that allows you to pick colors without changing brightness. E.g. imagine you let users pick colors that should work on a background that you designed. giving them a color wheel that stays perceptually at the same brightness has value here, because no matter which color they choose the brightness-contrast on your background will work.
- NGRhodes 5y agoIt gets even worse when you go from human eye to screen (eg sRGB) to print (eg Pantone).
- toastal 5y agoMy phone and laptop, and browsers support DCI-P3. Is there a color picker for wider gamuts? Because the article keeps talking about sRGB and picking in that color space, but I feel like is limiting the capabilities of current technology.
- zamadatix 5y agoI had the same question looking into HSLuv recently. Came across this https://github.com/hsluv/hsluv/issues/73 https://github.com/hsluv/hsluv/issues/73 but it didn't really gain much traction. Maybe it'll be more popular once Chrome finishes CSS Color Module Level 4 color space support.
- wolframhempel 5y agoI'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/ https://wolframhempel.github.io/skeeem/
- spicybright 5y agoThis is ridiculously cool, thank you for sharing :)
- ziml77 5y agoWhy does it flood my navigation history? I couldn't use my back button to return to here after playing around a bit.
- arthur2e5 5y agoApparently 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/replace https://developer.mozilla.org/en-US/docs/Web/API/Location/re...
- danzk 5y agoCraig Blackwell on YouTube has a great series of videos about the fundamentals of color vision. https://youtu.be/iDsrzKDB_tA https://youtu.be/iDsrzKDB_tA
- danzk 5y agoI think what you are seeing is the effect of optical brighteners that are used in paper. They absorb UV light to and emit blue light to make the paper look whiter. The amount of UV light in the environment changes the color of the paper.
- deltron3030 5y agoWhat'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.
- herf 5y agoI love this work - the OKLab model is really wonderful. But I think for color pickers, there are cases where "constant lightness" is not the most important constraint. For instance, you might really mean "the most saturated primary in each hue" and then - you may want the most saturated colors to appear on a line (saturated red, saturated blue, etc.). A constant lightness constraint makes these appear in a really unpredictable pattern. In less saturated colors, this constraint is very useful and feels right, but I think at the extremes it may reduce usability.
- Applejinx 5y agoThis is great work. I love how the result is a representation of maximally saturated colors that correctly depict perceptual lightness of what those maximum saturations are. You can get a little palette out of that which contains 'all colors' but which makes intuitive sense in a way that traditional representations don't. It's like fitting maximum saturation into a palette that's more linear. From canary yellow you don't HAVE a lot of room to go to pure white: there's very little difference. And it translates to very little linear space between the points. So nice.
- ianbicking 5y agoMy 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. A purely algorithmic color picker probably isn't the answer because it's not just our color perception that matters, but also the way colors are formed in our environment (which is what gives us so many browns).
- kortex 5y agoBrown is weird [1]. It's basically dark orange. Flesh tones fall into that same category - people are orange-hued [2]. Oranges/reds are mostly produced by various unsaturated molecules, such as carotenes, lignins, phenols, and tars, and browns are just dark collections of many kinds red-orange pigments. It does not map well to any of the common color spaces because its inherently heterogeneous. The solution would probably be pallettes that let you pick arbitrary axes to move through color space. 1 - https://youtu.be/wh4aWZRtTwU https://youtu.be/wh4aWZRtTwU 2 - According to Neil Harbisson, the guy with the color-sensing antenna, in-person conversation, but you can also verify with photoshop.
- chrisseaton 5y agoI don’t understand that video. Can’t all colours be described differentially to another colour? And don’t we have lots of names for different shades? Why does this make brown unusual?
- ThatCaio 5y agoIn 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 to blues/greens. These "color categories" that we form in our brains can be different in every culture or language. That is issue with what was suggested.
- kzrdude 5y agoDid Björn do this work for the benefit of any particular app or project?
- eyelidlessness 5y agoI’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.
- eyelidlessness 5y agoIt 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:.
- eyelidlessness 5y agoWhen 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.
- jobarion 5y agoFor what it's worth, as someone who has deuteranopia (red-green color blindness) the resulting OKHSL color picker seems to be harder to use than the HSL one. The OKHSV one is fine since yellow separates green and red.
- codedokode 5y agoWhat I don't like in standard HSV color picker [1] is that the colors are distributed non-uniformly. For example, there is a wide area of same looking green color, but just a thin line of yellow and orange. I didn't understand if new models solve this issue. [1] https://bottosson.github.io/img/colorpicker/hsv-picker.png https://bottosson.github.io/img/colorpicker/hsv-picker.png
- anderskaseorg 5y agoYou can try it out in the interactive color picker comparison page linked from the article. https://bottosson.github.io/misc/colorpicker/ https://bottosson.github.io/misc/colorpicker/
- codedokode 5y agoThank you for the link, very interesting. Now I see there's another problem: the colors on the hue bar (especially with OKLrCH model) look too blurred and mixed with each other. And there's almost no green, but mostly reddish and blueish tones.
- caturopath 5y agoGreat conference talk with a brief recap of color perception https://www.youtube.com/watch?v=xAoljeRJ3lU https://www.youtube.com/watch?v=xAoljeRJ3lU
- zeroimpl 5y agoAny good explanation why HSV has the color distortion problem mentioned in the article? I thought hue was the main thing it got right. Is it due to a problem with sRGB itself?
- armchairhacker 5y agoI really like the de-saturated color wheel / hue slider in this. It makes it very noticeably easier to pick good de-saturated colors.
- kdrag0n 5y agoIt'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 https://twitter.com/kdrag0n/status/1427822417313898498 (using ZCAM, not Oklab or the new Oklab/Okhsv) / https://www.figma.com/file/ZeqPgO1RgA6eg8TMm7r8Ae/kdrag0n's-theme-engine%3A-new-color-model?node-id=0%3A1 https://www.figma.com/file/ZeqPgO1RgA6eg8TMm7r8Ae/kdrag0n's-... Full generated palettes: https://twitter.com/kdrag0n/status/1431100523894083589 https://twitter.com/kdrag0n/status/1431100523894083589 / https://www.figma.com/file/mZ6VxvsC2yN4zD9rDR4S2I/kdrag0n's-theme-engine%3A-full-palette-comparisons 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.
- egypturnash 5y agoDamn, the way OKLrCH wiggles around as you drag the hue slider is kind of really unpleasant.
- Daub 5y agoArt teacher speaking. Hope the author is reading. The figures directly under the sentence ‘Here is the sRGB gamut plotted for set of hues…’ have real utility which the author may have missed. They clearly show that the peak saturation value has a different lightness value for each hue. For example, a peak saturated yellow is required to be brighter than a peak saturated blue. Explaining this to designers can be a real grind. These figures would make the task a lot easier. I really wish for a color picker that did not normalize the color space (as in the figures that follow).