3 ms·

In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces

by zokier 3y ago

altairprime 3y ago
Note that CSS Color Module Level 4 is still at the Recommendation Draft stage, and "supports" here is more accurately stated as "supports, except for Microsoft Edge (chromium) and Pale Moon (goanna)": https://test.csswg.org/harness/results/css-color-4_dev/grouped/ https://test.csswg.org/harness/results/css-color-4_dev/group...
- jcranmer 3y ago
  https://caniuse.com/css-lch-lab https://caniuse.com/css-lch-lab is probably a better resource for support, and it notes that the main layout engines all supported it earlier this year, and gives an estimated global support rate of ~85%.
  - altairprime 3y ago
    sRGB/ProPhoto/DCI-P3 and HSL/HSLuv/Lch/Lab/OKLab are two distinct sets of functionality. The former defines the colorspaces (such as sRGB), the latter defines colors within a given colorspace. To see a visual demo of this, visit https://oklch.com/#70,0.1,165,100 https://oklch.com/#70,0.1,165,100 and enable Show P3 and Show Rec2020; two additional thin white lines will be added showing the colorspace truncation points for the OKLCH color (70% 0.1 165). https://caniuse.com/css-color-function https://caniuse.com/css-color-function tracks support for the colorspaces, complementing the above link for Lch/Lab, and showing essentially the same current data: All desktop and the two top mobile browsers now support it. I'm really glad to see this. Thank you for sharing. That makes me much more optimistic about what will come of this. (Note that all browsers are currently failing LCH and OKLCH tests 9 and 10, and Firefox failing 15% of the CSS Color v4 parsing tests, at https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-color?label=experimental&lab... — but this is still a page full of great success for CSS Color v4! So happy.)
whoopsie 3y ago
Personally worked with oklab and several other LAB spaces. Oklab is fantastic for cutting into simple computations!
efedorenko 3y ago
Author here. The article was published 2 years ago, and when I started working on the tool the spec for OkLCH didn't even come out yet (late Dec 2020). Today I'd choose OkLCH over LCH as it solves a few problems with it.
mbo 3y ago
Here's a color model built on Oklch, but instead of lightness uses APCA’s (WCAG 3) contrast ratio: https://github.com/antiflasher/apcach https://github.com/antiflasher/apcach

In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces

by zokier 3y ago

In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces

altairprime 3y ago

Note that CSS Color Module Level 4 is still at the Recommendation Draft stage, and "supports" here is more accurately stated as "supports, except for Microsoft Edge (chromium) and Pale Moon (goanna)": https://test.csswg.org/harness/results/css-color-4_dev/grouped/ https://test.csswg.org/harness/results/css-color-4_dev/group...

jcranmer 3y ago
https://caniuse.com/css-lch-lab https://caniuse.com/css-lch-lab is probably a better resource for support, and it notes that the main layout engines all supported it earlier this year, and gives an estimated global support rate of ~85%.
- altairprime 3y ago
  sRGB/ProPhoto/DCI-P3 and HSL/HSLuv/Lch/Lab/OKLab are two distinct sets of functionality. The former defines the colorspaces (such as sRGB), the latter defines colors within a given colorspace. To see a visual demo of this, visit https://oklch.com/#70,0.1,165,100 https://oklch.com/#70,0.1,165,100 and enable Show P3 and Show Rec2020; two additional thin white lines will be added showing the colorspace truncation points for the OKLCH color (70% 0.1 165). https://caniuse.com/css-color-function https://caniuse.com/css-color-function tracks support for the colorspaces, complementing the above link for Lch/Lab, and showing essentially the same current data: All desktop and the two top mobile browsers now support it. I'm really glad to see this. Thank you for sharing. That makes me much more optimistic about what will come of this. (Note that all browsers are currently failing LCH and OKLCH tests 9 and 10, and Firefox failing 15% of the CSS Color v4 parsing tests, at https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-color?label=experimental&lab... — but this is still a page full of great success for CSS Color v4! So happy.)

whoopsie 3y ago

Personally worked with oklab and several other LAB spaces. Oklab is fantastic for cutting into simple computations!

efedorenko 3y ago

Author here. The article was published 2 years ago, and when I started working on the tool the spec for OkLCH didn't even come out yet (late Dec 2020). Today I'd choose OkLCH over LCH as it solves a few problems with it.

mbo 3y ago

Here's a color model built on Oklch, but instead of lightness uses APCA’s (WCAG 3) contrast ratio: https://github.com/antiflasher/apcach https://github.com/antiflasher/apcach