Re: [csswg-drafts] [css-color] Add OkHSL (#8659)

I'm not going to comment on whether CSS should adopt Okhsl. Okhsl is an approximation of the sRGB gamut and isn't precisely all in gamut. I'm not 100% sure if it fits what CSS is looking for, but I can't really say. But if you want to calculate a value in Okhsl that maps to OkLCh, using a [tool](https://facelessuser.github.io/coloraide/demos/colorpicker.html?color=color%28--okhsl+228+0.70726+0.63979+%2F+0.85%29&out=oklch) is easy enough, and I'm sure more may pop up in the future.

I'm not saying whether this is a good idea or not, but I'm going to answer this question because it sounded like fun to try.

> Yes, that's a big disadvantage and if it's can't be stretched to P3

So, it can be switched to P3. All of the information needed was provided by [bottosson](https://github.com/bottosson) and can be found in the Okhsl/Okhsv blog. Particularly [this](https://colab.research.google.com/drive/1JdXHhEyjjEE--19ZPH1bZV_LiGQBndzs) code which was used to tune the constants for approximating the sRGB gamut. Simply calculate the matrices for P3 <-> LMS, plug them in, and generate the new constants needed. I used this script to ensure the Okhsl implementation I support tightly integrates with the adjusted Oklab matrix we use that aligns with the CSS white point.

Once you have the constants, you can operate in the P3 gamut using the Okhsl model:

![okhsl-p3-space](https://user-images.githubusercontent.com/1055125/230685361-c72ac892-e3c5-46ab-827f-efa62fd00c62.png)

Let's do a sanity check. Okhsl P3 should use the same hue that OkLCh does, but it should have an adjusted lightness and saturation. Fully saturated red, green, and blue should sit on the edge of saturation as well.

```py
>>> Color('display-p3', [1, 0, 0]).convert('oklch')
color(--oklch 0.64857 0.29949 28.958 / 1)
>>> Color('display-p3', [1, 0, 0]).convert('okhsl-p3')
color(--okhsl 28.958 1 0.59189 / 1)
>>> Color('display-p3', [0, 1, 0]).convert('okhsl-p3')
color(--okhsl 145.64 1 0.82405 / 1)
>>> Color('display-p3', [0, 0, 1]).convert('okhsl-p3')
color(--okhsl 264.05 1 0.38284 / 1)
```

Yep, everything checks out. You can see it working live [here](https://facelessuser.github.io/coloraide/playground/?source=https%3A%2F%2Fgist.githubusercontent.com%2Ffacelessuser%2F2315c37741ae5253b8b42d2d41bcfa5a%2Fraw%2F5c3d5ca85a3020c28dc25af2b82086fae886b594%2Fokhsl_p3.py). If you have a P3 monitor, and are using the latest Chrome or Safari, it _should_ show genuine P3 colors.

I haven't tested this beyond generating the 3D model and doing a basic smoke test, but it _seems_ like its working well enough.

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


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

Received on Friday, 7 April 2023 22:36:44 UTC