adobe / leonardo

Generate colors based on a desired contrast ratio
http://www.leonardocolor.io
Apache License 2.0
1.94k stars 104 forks source link

Changed saturation color space #199

Closed NateBaldwinDesign closed 1 year ago

NateBaldwinDesign commented 1 year ago

Description

Theme and Color saturation is currently set using HSLuv color space. This PR updates the color space used for desaturation to OKLCH for better perceptual uniformity. Fixes #200

Motivation

HSLuv does not have uniform perceptual hue across chroma axis. As a color lowers in chroma, its appearance shifts towards other hues.

OKLCH utilizes a hue distribution that is much more uniform, enabling chroma shifts to occur without compromising the perceived hue of the color. For detailed information on comparison and derivation of OKLCH/OKLAB from other color spaces, see this post.

Screenshots

This screenshot demonstrates two blue colors used in the test script. The original color, when desaturated using the existing HSLuv method appears to shift towards a purple hue. Comparatively, the OKLCH method is much more uniform in hue appearance when desaturated.

image

To-do list

NateBaldwinDesign commented 1 year ago

@DmitryBaranovskiy, @GarthDB, or @lazd would one of you be able to look at this and publish? This would be a breaking change as output color values would differ (if consumer is setting saturation, which is edge case). However, this is a necessary improvement.

GarthDB commented 1 year ago

@NateBaldwinDesign I released it https://www.npmjs.com/package/@adobe/leonardo-contrast-colors/v/1.0.0-alpha.17