Issues with Color Spaces and Perceptual Brightness
John Austin addresses challenges in color spaces like CIELab and its variants, highlighting issues with brightness perception in saturated colors and introducing L_EAL for improved accuracy in color representation.
Read original article
John Austin discusses the challenges associated with color spaces and perceptual brightness, particularly focusing on the CIELab color space and its modern variants like CIECAM02 and Oklab. These color spaces aim to be perceptually uniform, meaning that numerical changes should correspond to human perception of color changes. However, they often fail to accurately represent the brightness of highly saturated colors, such as red, due to the Helmholtz-Kohlrausch effect, which causes these colors to appear brighter than their calculated lightness values suggest. Austin highlights recent research that introduces the "Predicted Equivalent Achromatic Lightness" (L_EAL), which better aligns perceived lightness with actual color saturation. This value is particularly useful for desaturating images, as it provides a more accurate gray representation for the final output. Austin notes that while working on a tool to desaturate game screenshots, he observed that red assets appeared darker than expected, leading to potential misjudgments in asset brightness. He expresses a need for perceptually uniform color spaces that incorporate these transformations to improve accuracy in color representation.
- CIELab and its variants aim for perceptual uniformity but struggle with saturated colors.
- The Helmholtz-Kohlrausch effect causes discrepancies in perceived brightness.
- The "Predicted Equivalent Achromatic Lightness" (L_EAL) offers a better measure for perceived lightness.
- Accurate desaturation is crucial for evaluating game asset brightness.
- There is a lack of perceptually uniform color spaces that account for saturation effects.
Related
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.
Beautiful shadows need beautiful colors
Considering shadow colors in UI design is crucial to avoid mismatched appearances. Factors like light sources, object shapes, and surface colors define shadows. Challenges in consistent application exist, with proposed solutions and limitations in CSS capabilities discussed. Alternative methods like Figma's Effect styles are suggested for ideal shadow effects.
sRGB Gamut Clipping (2021)
The article addresses RGB gamut clipping in image processing, criticizing clamping methods and proposing two novel techniques using the Oklab color space to reduce color distortion while preserving lightness and chroma.
Making a natural looking color generator algorithm
A new algorithm for generating realistic color palettes aims to enhance design by ensuring harmonious transitions and vibrancy, while addressing challenges in color representation and providing practical implementation examples.
Explaining color gamuts and color spaces in HDTVs and monitors
Color gamuts define the color range of displays, while color spaces standardize color organization. HDR TVs offer superior color quality, and a 95% DCI-P3 coverage suffices for general use.
- Many commenters express interest in the complexities of color perception, including the differences between brightness, lightness, and chroma.
- Several users mention alternative color spaces like Oklab, LCH, and HSLuv as potential solutions for more accurate color representation.
- There are discussions about the impact of color blindness on perception and the effectiveness of corrective lenses.
- Some comments highlight the challenges of achieving accurate color reproduction on uncalibrated devices and the limitations of current color spaces.
- Practical applications, such as color palette editors and tone mapping in rendering, are also mentioned as relevant to the topic.
22 commentsHearing has a few quirks too:
- When we measure sound pressure, we measure it in log (so, every 3dB is a doubling in sound pressure), but our hearing perceives this as a linear scale. If you make a linear volume slide, the upper part will seem as if it barely does anything.
- The lower the volume, the less perceivable upper and lower ranges are compared to the midrange. This is what "loudness" intends to fix, although poor implementations have made many people assume it is a V-curve button. A proper loudness implementation will lessen its impact as volume increases, completely petering off somewhere around 33% of maximum volume.
- For the most "natural" perceived sound, you don't try to get as flat a frequency response as possible but instead aim for a Harman curve.
- Bass frequencies (<110Hz, depending on who you ask) are omnidirectional, which means we cannot accurately perceive which direction the sound is coming from. Subwoofers exploit this fact, making it seem as if deep rich bass is coming from your puny soundbar and not the sub hidden behind the couch :).
This has issues. When you go from a dark space to a bright space, the eye's iris stops down. But not instantaneously. It takes a second or two. This can be simulated. Cyberpunk 2077 does this. Go from a dark place in the game to bright sunlight and, for a moment, the screen becomes blinding, then adjusts.
In the other direction, go into a dark space, and it's dark at first, then seems to lighten up after a while. Dark adaptation is slower then light adaptation.
Tone mapping is not just an intensity adjustment. It has to compensate for the color space intensity problems the OP mentions. Human eyes are not equally sensitive to the primary colors.
Some visually impaired people hate this kind of adjustment, it turns out.
Here's a clip from Cyberpunk 2077.[2] Watch what happens to screen brightness as the car goes into the tunnel and then emerges into daylight.
#ff0000 is, in terms of brightness, pretty dark compared to #ffffff yet there is a way it seems to "pop out" psychology. It is unusual for something red to really be the brightest color in a natural scene unless the red is something self-luminous like an LED in a dark night.
OSA-UCS takes the Helmholtz-Kohlrausch effect into consideration.
> evaluate relative brightnesses between art assets, and improve overall game readability
The method in Color2Gray is trying to enhance salience, but the paper does a good job of comparing the problems (including red / blue examples in particular).
Like other commenters, I think oklab would look better than CIELAB on the example given in the OP. https://bottosson.github.io/posts/oklab/#comparison-with-oth... and the Munsell data below it show it to be a lot more uniform than either CIELAB or CIELUV.
It was actually quite shocking how much more sense most color choices in art and design made to me, which was a much bigger reason for me to keep wearing the glasses than being able to distinguish red, green and brown better than before. The world just looks "more balanced" color-wise with them.
While it was very obvious early on in my life that I experienced most green, red and brown colors as ambiguously the same (I did not know peanut butter was not green until my early thirties), the fact that there also were differences in perceptual brightness had stayed completely under the radar.
¹ And yes, these lenses do work, at least for me. They're not as scummy as enchroma or other colorblind-"correcting" lenses, for starters you can only buy them after trying them out in person with an optometrist, who tests which type of correction you need at which strength. Ironically their website is a broken mess that looks untrustworthy[0]. And their list of scientific publications doesn't even show up on Google Scholar, so they probably have near-zero citations[1]. But the lenses work great for me.)
[0] https://www.colorlitelens.com/
[1] https://www.colorlitelens.com/color-blindness-correction-inf...
A Better Default Colormap for Matplotlib | SciPy 2015 | Nathaniel Smith and Stéfan van der Walt https://www.youtube.com/watch?v=xAoljeRJ3lU
A benefit of doing it this way is you account for color blindness and accessibility e.g. all colors at L=50 will have the same WCAG contrast ratio against all colors at L=25. This helps when finding colors with the contrast you want.
Related, I'm working on a color palette editor based around creating accessible palettes where I use the HSLuv color space which has the above property:
https://www.inclusivecolors.com/
You can try things like maxing out the saturation of each swatch to see how some some hues get more bold looking at the same lightness (the Helmholtz-Kohlrausch effect mentioned in the article I think). You can also explore examples of open source palettes (Tailwind, IBM Carbon, USWDS), where it's interesting to compare how they vary their saturation and lightness curves per swatch e.g. red-700 and green-700 in Tailwind v3 have different lightnesses but are the same in IBM Carbon (the "Contrast > View colors by luminance only" option is interesting to see this).
Accurate color reproduction on uncalibrated consumer devices is just wishful thinking and will not be fixed in the forseeable future.
So unless you work in a color controlled and calibrated environment it's hard to make any reliable statements about perception.
I simply would not worry too much about optimizing perceptual color spaces at this point.
https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklc...
Y = 0.299 * R + 0.587 * G + 0.114 * B
> Unfortunately, I haven’t been able to find any perceptually uniform color spaces that seem to include these transformations in the final output space. If you’re aware of one, I would love to know.
Traditional painting.
Also, to the author on the same blog, came across this: https://johnaustin.io/articles/2023/how-we-can-actually-move...
Get off the internet.
Related
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.
Beautiful shadows need beautiful colors
Considering shadow colors in UI design is crucial to avoid mismatched appearances. Factors like light sources, object shapes, and surface colors define shadows. Challenges in consistent application exist, with proposed solutions and limitations in CSS capabilities discussed. Alternative methods like Figma's Effect styles are suggested for ideal shadow effects.
sRGB Gamut Clipping (2021)
The article addresses RGB gamut clipping in image processing, criticizing clamping methods and proposing two novel techniques using the Oklab color space to reduce color distortion while preserving lightness and chroma.
Making a natural looking color generator algorithm
A new algorithm for generating realistic color palettes aims to enhance design by ensuring harmonious transitions and vibrancy, while addressing challenges in color representation and providing practical implementation examples.
Explaining color gamuts and color spaces in HDTVs and monitors
Color gamuts define the color range of displays, while color spaces standardize color organization. HDR TVs offer superior color quality, and a 95% DCI-P3 coverage suffices for general use.