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 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..7fbc7388ab56a36 --- /dev/null +++ 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("<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. + 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..3c3d7397336083c --- /dev/null +++ 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("<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. 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()")}}