From 9253707c4d08bfd6ad7c41edf6e284d0b37df44f Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Fri, 15 Apr 2022 21:18:55 +0200 Subject: [PATCH 1/5] Add OKLCH and OKLab functions to reference --- files/en-us/web/css/css_functions/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index 120a8863569b46d..28505caa5746aa8 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -173,6 +173,10 @@ Functions which specify different color representations. These may be used anywh - : Lab color is device-independent and specifies physical measurements of color. - {{cssxref("color_value/lch", "lch()")}} {{Experimental_Inline}} - : LCH color is device-independent and specifies color using polar coordinates for chroma and hue. +- {{cssxref("color_value/oklab", "oklab()")}} {{Experimental_Inline}} + - : OKLab color is device-independent and specifies physical measurements of color. +- {{cssxref("color_value/oklch", "oklch()")}} {{Experimental_Inline}} + - : OKLCH color is device-independent and specifies color using polar coordinates for chroma and hue. - {{cssxref("color_value/rgb", "rgb()")}} - : The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency. - {{cssxref("color_value/rgba", "rgba()")}} From 115903e2da6381bfdf186ac58adfc60b74414b83 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Tue, 10 May 2022 21:35:43 +0200 Subject: [PATCH 2/5] Add oklab() function page --- .../en-us/web/css/color_value/oklab/index.md | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 files/en-us/web/css/color_value/oklab/index.md diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md new file mode 100644 index 000000000000000..206e47bd76f74b5 --- /dev/null +++ b/files/en-us/web/css/color_value/oklab/index.md @@ -0,0 +1,48 @@ +--- +title: oklab() +slug: Web/CSS/color_value/oklab +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - Web + - color + - oklab +browser-compat: css.types.color.oklab +--- +{{CSSRef}} + +The **`oklab()`** functional notation expresses a given color in the Oklab color space. Oklab represents the entire range of color that humans can see. + +## Syntax + +```css +oklab(40.1% 0.1143 0.045); +oklab(59.69% 0.1007 0.1191); +oklab(59.69% 0.1007 0.1191 / .5); +``` + +### Values + +- Functional notation: `oklab(L a b [/ A])` + + - : `L` specifies the perceived lightness, and is a {{cssxref("<percentage>")}} between `0%` representing black and `100%` representing white. + + The second argument `a` is the distance along the `a` axis in the Oklab colorspace. + + The third argument `b` is the distance along the `b` axis in the Oklab colorspace. + + `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity). + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) From adfbd7684a8b4a7f2c50c0a0489f32f24e3bef63 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Tue, 10 May 2022 21:36:37 +0200 Subject: [PATCH 3/5] Copy lab redirects for oklab --- files/en-us/_redirects.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index c923a6fda7ec6b6..85b0df0f6f66cfb 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -10965,6 +10965,8 @@ /en-US/docs/Web/CSS/color_value/hwb() /en-US/docs/Web/CSS/color_value/hwb /en-US/docs/Web/CSS/color_value/lab() /en-US/docs/Web/CSS/color_value/lab /en-US/docs/Web/CSS/color_value/lch() /en-US/docs/Web/CSS/color_value/lch +/en-US/docs/Web/CSS/color_value/oklab() /en-US/docs/Web/CSS/color_value/oklab +/en-US/docs/Web/CSS/color_value/oklch() /en-US/docs/Web/CSS/color_value/oklch /en-US/docs/Web/CSS/color_value/rgb() /en-US/docs/Web/CSS/color_value/rgb /en-US/docs/Web/CSS/color_value/rgba() /en-US/docs/Web/CSS/color_value/rgba /en-US/docs/Web/CSS/conic-gradient /en-US/docs/Web/CSS/gradient/conic-gradient From 1f71848b02319b477250f7589edb16834187ed49 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Tue, 10 May 2022 21:40:12 +0200 Subject: [PATCH 4/5] Add oklch() page --- .../en-us/web/css/color_value/oklab/index.md | 2 + .../en-us/web/css/color_value/oklch/index.md | 49 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 files/en-us/web/css/color_value/oklch/index.md diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md index 206e47bd76f74b5..6537357761b66db 100644 --- a/files/en-us/web/css/color_value/oklab/index.md +++ b/files/en-us/web/css/color_value/oklab/index.md @@ -46,3 +46,5 @@ oklab(59.69% 0.1007 0.1191 / .5); ## See also - [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) +- [Safari Technology Preview 137 release notes](https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/): includes `oklab()` and {{cssxref("color_value/oklch",'oklch()')}} colors. + diff --git a/files/en-us/web/css/color_value/oklch/index.md b/files/en-us/web/css/color_value/oklch/index.md new file mode 100644 index 000000000000000..6ac75dd3816e04b --- /dev/null +++ b/files/en-us/web/css/color_value/oklch/index.md @@ -0,0 +1,49 @@ +--- +title: oklch() +slug: Web/CSS/color_value/oklch +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - Web + - color + - oklch +browser-compat: css.types.color.oklch +--- +{{CSSRef}} + +The **`oklch()`** functional notation expresses a given color in the OKLCH color space. It has the same L axis as {{cssxref("color_value/oklab","oklab()")}}, but uses polar coordinates C (Chroma) and H (Hue). + +## Syntax + +```css +oklch(40.1% 0.123 21.57) +oklch(59.69% 0.156 49.77) +oklch(59.69% 0.156 49.77 / .5) +``` + +### Values + +- Functional notation: `oklch(L C H [/ A])` + + - : `L` specifies the perceived lightness, and is a {{cssxref("<percentage>")}} between `0%` representing black and `100%` representing white. + + The second argument `C` is the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 0.4). + + The third argument `H` is the hue angle. `0deg` points along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue). + + `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity). + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) +- [Safari Technology Preview 137 release notes](https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/): includes `oklch()` and {{cssxref("color_value/oklab",'oklab()')}} colors. From c84564083e4c3eb0d556931690757ad2e6de23b6 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Tue, 17 May 2022 12:41:41 +0200 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> --- files/en-us/web/css/color_value/oklab/index.md | 1 + files/en-us/web/css/color_value/oklch/index.md | 1 + 2 files changed, 2 insertions(+) diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md index 6537357761b66db..7fbc7388ab56a36 100644 --- a/files/en-us/web/css/color_value/oklab/index.md +++ b/files/en-us/web/css/color_value/oklab/index.md @@ -9,6 +9,7 @@ tags: - Web - color - oklab + - Experimental browser-compat: css.types.color.oklab --- {{CSSRef}} diff --git a/files/en-us/web/css/color_value/oklch/index.md b/files/en-us/web/css/color_value/oklch/index.md index 6ac75dd3816e04b..3c3d7397336083c 100644 --- a/files/en-us/web/css/color_value/oklch/index.md +++ b/files/en-us/web/css/color_value/oklch/index.md @@ -9,6 +9,7 @@ tags: - Web - color - oklch + - Experimental browser-compat: css.types.color.oklch --- {{CSSRef}}