Add OKLCH and OKLab functions to reference (#15033)

* Add OKLCH and OKLab functions to reference * Add oklab() function page * Copy lab redirects for oklab * Add oklch() page * Apply suggestions from code review Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
mdn · Jun 2, 2022 · 608d658 · 608d658
1 parent 6dfb0e4
commit 608d658
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 0 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -11007,6 +11007,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

diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md
@@ -0,0 +1,51 @@
+---
+title: oklab()
+slug: Web/CSS/color_value/oklab
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - Web
+  - color
+  - oklab
+  - Experimental
+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("&lt;percentage&gt;")}} 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("&lt;number&gt;")}} between `0` and `1`, or a {{cssxref("&lt;percentage&gt;")}}, 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 `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
@@ -0,0 +1,50 @@
+---
+title: oklch()
+slug: Web/CSS/color_value/oklch
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - Web
+  - color
+  - oklch
+  - Experimental
+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("&lt;percentage&gt;")}} 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("&lt;number&gt;")}} between `0` and `1`, or a {{cssxref("&lt;percentage&gt;")}}, 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.
diff --git 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()")}}