microsoft
Add CIE LCH, Oklab and Oklch formats to Color Picker
Description of the new feature / enhancement
CIE LCH, Oklab and Oklch colours are coming to CSS Color Module 4. See here.
For a summary and in-depth explanation of the benefits see OKLCH in CSS: why we moved from RGB and HSL.
There is an online colour picker for Oklch here: https://oklch.com/
Scenario when this would be used?
As an emerging and important new standard, these colour definitions needs tools to help designers adopt them. Currently no colour pickers provide these formats, as far as I know.
Miriam Suzanne, core contributor to Sass and Invited Expert on the W3C CSS Working Group in When Our Tools Hold Us Back writes:
I don’t know of any popular design tools that provide LCH, or the newer okLAB/okLCH variants, let alone relative colors defined as a function of mixing or adjusting other underlying colors.
And when it comes to copying our colors out of a design tool, the options are generally 6-digit HEX, or copying individual channel values, one at a time. Either way, converting our colors into a more human-friendly syntax would often be an extra step, and may not be worth the effort.
Since all legacy colors on the web rely on a single color model (RGB) and gamut (sRGB), there has been little meaningful difference between formats (until now). Once we used a graphic interface to pick the color we want, it maybe didn’t matter what format we copy-pasted into a variable somewhere.
But what’s the designer path towards using new, extended color spaces in CSS? Can they ever gain traction on the web without first finding support in our design tools? I’m not sure.
And Chris Coyier in Hex Colors Aren’t Great At Anything Except Being Popular:
Perhaps it’s best to think of this as an opportunity: someone (please) make a kick-ass color app that supports all the newest color formats, relative colors, color mixing, and all that, and have the app help out with their usage in CSS (copy and paste with quality fallbacks, etc).
Supporting information
- OK, OKLCH 👑 - Chris Coyier
- LCH colors in CSS: what, why, and how?
- OK LCH, I’m Convinced
- LCH is the best color space!
Adam Argyle has said lab, lch, oklab, oklch, etc are going to land in Chrome 110.
OKLCH now supported by all modern browsers - https://caniuse.com/?search=oklch()
I'd like to work on a PR for this issue.
@lemonyte
Hi. Any progress? I see the repo on your account but looks like no updates since creating it?
I was waiting for a reply to https://github.com/microsoft/PowerToys/issues/28769#issuecomment-2613848057 but I guess I can start an implementation on my fork.
Version 0.91.0 states to have included oklab and oklch - I have updated and restarted the pc, but I do not see them in the color picker settings.
Oh, and a general question. With the two color modes present, can the way they are represented be changed with the custom formats? Like, if % or decimal are used for the values?
It seems like you must delete the Color Picker's settings file for the new formats to show up. I believe the path is
%APPDATA%/Local/Microsoft/PowerToys/ColorPicker/settings.json
I do not see them in the color picker settings.
They don't get added by upgrade. I presume they are present with clean install.
So, you need to add them manually:
oklch(%Lo %Oc %Oh)
oklab(%Lo %Oa %Ob)
can the way they are represented be changed with the custom formats
No, e.g. oklch(0.5 0.2 359) - it doesn't offer L as %.
Thanks, cool, both methods work. :)
I made a new version as oklch(0.24 0 0 / 100%) - without the commas and with an alpha-value that is the only one pickable anyway, but can be easily adjusted.
If in the future it could be possible with an update to choose to use percentages or decimals for L, that would be very much appreciated. I use it in a certain way on all sites I have been using oklch at and would like to keep it consistent.
I use it in a certain way: oklch(24% 0 0 / 100%)
That's also my preferred syntax.
Perhaps this could be coded to check for presence of % then adjust L accordingly. Could also extend to R%G%B%, HS%L%, etc. - restricted to colors from https://www.w3.org/TR/css-color-4/
@lemonyte - would you be interested in looking at this? Sorry to ask for more after your excellent contribution already! If not, I may take a look....
Until then :)
; OnClipboardChange("HandleOKLCH")
; see next post for fixed version
The above script may have unwanted side effects (it looked for all kinds of content, may break files, images etc.), please use this instead:
#NoEnv
#Persistent
OnClipboardChange("HandleOKLCH")
return
HandleOKLCH(Type) {
if (Type != 1) ; Nur auf Plaintext reagieren
return
Text := Clipboard
if RegExMatch(Text, "oklch\((0?\.\d+)\s+([^\s]+)\s+([^\s]+)(\s*/\s*[^)]+)?\)", m) {
Lval := m1 * 1
Lpercent := Round(Lval * 100) . "%"
New := "oklch(" . Lpercent . " " . m2 . " " . m3 . m4 . ")"
; nur ersetzen, wenn sich etwas ändert
if (New != Text)
Clipboard := New
TrayTip, OKLCH →, %New%, 1, 17
}
}
Perhaps this could be coded to check for presence of
%then adjust L accordingly. Could also extend toR%G%B%,HS%L%, etc. - restricted to colors from https://www.w3.org/TR/css-color-4/@lemonyte - would you be interested in looking at this? Sorry to ask for more after your excellent contribution already! If not, I may take a look....
Do you want to create a new issue for this? I think it's best to get some feedback from the maintainers.
It seems like you must delete the Color Picker's settings file for the new formats to show up. I believe the path is
%APPDATA%/Local/Microsoft/PowerToys/ColorPicker/settings.json
This solved the issue for me, but it would be nice if the file got updated automatically and btw proper paths is:
%LocalAppData%/Microsoft/PowerToys/ColorPicker/settings.json
