Add OKLCH and OKLab functions to reference

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

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("<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/)
+- [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.
+

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("<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.

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()")}}