Re: [csswg-drafts] [css-color][css-images] Interpolation method / color space that favors chroma over lightness (#10135)

> [HCT](https://material.io/blog/science-of-color-design) seeks to strike a balance here, with a reliable lightness lever while also enabling vibrant gradients and nice interpolation.

Just to clarify, HCT doesn't do anything magical. They are using the same lightness preserving, chroma reduction GMA. There's actually does a tighter chroma reduction than the currently suggested CSS algorithm. I've been able to replicate their behavior [here](https://facelessuser.github.io/coloraide/colors/hct/#tonal-palettes). That is how they produce their tonal palettes. I am unaware of them doing anything else. They use CAM16 for perceptual hues and Lab D65 lightness in their model to provide good contrast.

To be honest, HCT is based on CAM16 which isn't the best preserver of hue. CAM16 still has the purple hue shift. You can actually produce tonal palettes in OkLCh simply by using Lab (D65 white point) to scale your lightness properly. And you'll avoid the purple shift in blue.

[Example](https://facelessuser.github.io/coloraide/playground/?code=gmap_hct%20%3D%20%7B%22method%22%3A%20%22raytrace%22%2C%20%22lch%22%3A%20%22hct%22%7D%0Agmap_oklch%20%3D%20%7B%22method%22%3A%20%22raytrace%22%2C%20%22lch%22%3A%20%22oklch%22%7D%0Adef%20tonal_palette_hct%28color%29%3A%0A%20%20%20%20hct%20%3D%20Color%28color%29%2econvert%28%27hct%27%2C%20norm%3DFalse%29%0A%20%20%20%20tones%20%3D%20%5B0%2C%2010%2C%2020%2C%2030%2C%2040%2C%2050%2C%2060%2C%2070%2C%2080%2C%2090%2C%2095%2C%20100%5D%0A%20%20%20%20return%20%5Bhct%2eclone%28%29%2eset%28%27t%27%2C%20tone%29%2efit%28%27srgb%27%2C%20%2a%2agmap_hct%29%20for%20tone%20in%20tones%5D%0A%0Adef%20tonal_palette_oklch%28color%29%3A%0A%20%20%20%20oklch%20%3D%20Color%28color%29%2econvert%28%27oklch%27%2C%20norm%3DFalse%29%0A%20%20%20%20tones%20%3D%20%5B0%2C%2010%2C%2020%2C%2030%2C%2040%2C%2050%2C%2060%2C%2070%2C%2080%2C%2090%2C%2095%2C%20100%5D%0A%20%20%20%20return%20%5Boklch%2eclone%28%29%2eset%28%27l%27%2C%20Color%28%27lab-d65%27%2C%20%5Btone%2C%200%2C%200%5D%29%2econvert%28%27oklab%27%29%5B%27l%27%5D%29%2efit%28%27srgb%27%2C%20%2a%2agmap_oklch%29%20for%20tone%20in%20tones%5D%0A%0ASteps%28tonal_palette_hct%28%27blue%27%29%29%0ASteps%28tonal_palette_oklch%28%27blue%27%29%29%0ASteps%28%5Bc%2efit%28%27srgb%27%2C%20%2a%2agmap_hct%29%20for%20c%20in%20Color%2esteps%28%5B%27blue%27%2C%20%27yellow%27%5D%2C%20space%3D%27hct%27%2C%20steps%3D500%29%5D%29%0ASteps%28%5Bc%2efit%28%27srgb%27%2C%20%2a%2agmap_oklch%29%20for%20c%20in%20Color%2esteps%28%5B%27blue%27%2C%20%27yellow%27%5D%2C%20space%3D%27oklch%27%2C%20steps%3D500%29%5D%29%0A%20%20%20%20).

<img width="1360" alt="Screenshot 2024-03-25 at 4 09 47 PM" src="https://github.com/w3c/csswg-drafts/assets/1055125/81edaa83-548e-4afe-ace0-31e775e37f1e">







-- 
GitHub Notification of comment by facelessuser
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10135#issuecomment-2019013850 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 25 March 2024 22:15:17 UTC