relnote(Fx111): color(), lab(), lch(), oklab(), oklch() support

files/en-us/mozilla/firefox/releases/111/index.md

@@ -20,6 +20,10 @@ This article provides information about the changes in Firefox 111 that affect d
 
 ### CSS
 
+- CSS color functions `color()`, `lab()`, `lch()`, `oklab()`, and `oklch()` are now supported.
+  These features are disabled by default and can be enabled by setting the preference `layout.css.more_color_4.enabled` to true.
+  For more information, see the [CSS color value](/en-US/docs/Web/CSS/color_value) documentation ([Firefox bug 1352757](https://bugzil.la/1352757) and [Firefox bug 1128204](https://bugzil.la/1128204)).
+
 #### Removals
 
 ### JavaScript

files/en-us/web/css/@media/color-gamut/index.md

@@ -31,6 +31,11 @@ The `color-gamut` feature is specified as one of the following keyword values:
 ### CSS
 
 ```css
+p {
+  padding: 10px;
+  border: solid;
+}
+
 @media (color-gamut: srgb) {
   p {
     background: #f4ae8a;
@@ -52,5 +57,6 @@ The `color-gamut` feature is specified as one of the following keyword values:
 
 ## See also
 
+- [color()](/en-US/docs/Web/CSS/color_value/color) function to specify colors in a defined colorspace.
 - [@media](/en-US/docs/Web/CSS/@media) at-rule that is used to specify the color-gamut expression.
 - [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to understand when and how to use a media query.

files/en-us/web/css/color_value/color/index.md

@@ -11,7 +11,7 @@ The **`color()`** functional notation allows a color to be specified in a partic
 
 Support for a particular colorspace can be detected with the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) CSS media feature.
 
-The [`@color-profile`](/en-US/docs/Web/CSS/@color-profile) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to define and names a color profile to be used in the `color()` function to specify a color.
+The [`@color-profile`](/en-US/docs/Web/CSS/@color-profile) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to define and name a color profile to be used in the `color()` function to specify a color.
 
 ## Syntax
 
@@ -34,6 +34,135 @@ color(display-p3 1 0.5 0 / .5);
 
 {{csssyntax}}
 
+## Examples
+
+### Using predefined colorspaces with color()
+
+The following example shows the effect of varying the lightness, a-axis, and b-axis values of the `color()` function.
+
+```html
+<div data-color="red-a98-rgb"></div>
+<div data-color="red-prophoto-rgb"></div>
+<div data-color="green-srgb-linear"></div>
+<div data-color="green-display-p3"></div>
+<div data-color="blue-rec2020"></div>
+<div data-color="blue-srgb"></div>
+```
+
+```css hidden
+div {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid black;
+}
+```
+
+```css
+[data-color="red-a98-rgb"] {
+  background-color: color(a98-rgb 1 0 0);
+}
+[data-color="red-prophoto-rgb"] {
+  background-color: color(prophoto-rgb 1 0 0);
+}
+[data-color="green-srgb-linear"] {
+  background-color: color(srgb-linear 0 1 0);
+}
+[data-color="green-display-p3"] {
+  background-color: color(display-p3 0 1 0);
+}
+[data-color="blue-rec2020"] {
+  background-color: color(rec2020 0 0 1);
+}
+[data-color="blue-srgb"] {
+  background-color: color(srgb 0 0 1);
+}
+```
+
+{{EmbedLiveSample('Using_predefined_colorspaces_with_color')}}
+
+### Using xyz colorspaces with color()
+
+The following example shows how to use `xyz` colorspaces to specify a color.
+
+```html
+<div data-color="red"></div>
+<div data-color="green"></div>
+<div data-color="blue"></div>
+```
+
+```css hidden
+div {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid black;
+}
+```
+
+```css
+[data-color="red"] {
+  background-color: color(xyz 45 20 0);
+}
+
+[data-color="green"] {
+  background-color: color(xyz-d50 0.3 80 0.3);
+}
+
+[data-color="blue"] {
+  background-color: color(xyz-d65 5 0 50);
+}
+```
+
+{{EmbedLiveSample('Using_xyz_colorspaces_with_color')}}
+
+### Using color-gamut media queries with color()
+
+This example shows how to use the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) media query to detect support for a particular colorspace and use that colorspace to specify a color.
+
+```html
+<div></div>
+<div></div>
+<div></div>
+```
+
+```css hidden
+div {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid black;
+}
+```
+
+```css
+@media (color-gamut: p3) {
+  div {
+    background-color: color(display-p3 0 0 1);
+  }
+}
+
+@media (color-gamut: srgb) {
+  div:nth-child(2) {
+    background-color: color(srgb 0 0 1);
+  }
+}
+
+@media (color-gamut: rec2020) {
+  div:nth-child(3) {
+    background-color: color(rec2020 0 0 1);
+  }
+}
+```
+
+{{EmbedLiveSample('Using_color-gamut_media_queries_with_color')}}
+
 ## Specifications
 
 {{Specifications}}
@@ -44,4 +173,6 @@ color(display-p3 1 0.5 0 / .5);
 
 ## See also
 
+- [The `<color>` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations
+- [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) media feature
 - [Wide Gamut Color in CSS with Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)

files/en-us/web/css/color_value/lab/index.md

@@ -23,18 +23,114 @@ lab(52.2345% 40.1645 59.9971 / .5);
 
 - Functional notation: `lab(L a b [/ A])`
 
-  - : `L` specifies the CIE Lightness, and is a {{cssxref("<percentage>")}} between `0%` representing black and `100%` representing white.
+  - `L` is a {{cssxref("<number>")}} between `0` and `100` or a {{cssxref("<percentage>")}} between `0%` and `100%` that specifies the CIE Lightness where the number `0` corresponds to `0%` (black) and the number `100` corresponds to `100%` (white).
 
-    The second argument `a` is the distance along the `a` axis in the Lab colorspace.
+  - `a` is a {{cssxref("<number>")}} between `-125` and `125` or a {{cssxref("<percentage>")}} between `-100%` and `100%`, specifying the distance along the `a` axis in the Lab colorspace, that is how green/red the color is.
 
-    The third argument `b` is the distance along the `b` axis in the Lab colorspace.
+  - `b` is a {{cssxref("<number>")}} between `-125` and `125` or a {{cssxref("<percentage>")}} between `-100%` and `100%`, specifying the distance along the `b` axis in the Lab colorspace, that is how blue/yellow the color is.
 
-    `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity).
+  - `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity).
+
+> **Note:** Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`.
+> This case is notable where `100%` is equal to the number `100` for the `L` value and `125` for the `a` and `b` values.
 
 ### Formal syntax
 
 {{csssyntax}}
 
+## Examples
+
+### Adjusting lightness and color axes with lab()
+
+The following example shows the effect of varying the lightness, a-axis, and b-axis values of the `lab()` function.
+
+```html
+<div data-color="red"></div>
+<div data-color="red-a"></div>
+
+<div data-color="green"></div>
+<div data-color="green-b"></div>
+
+<div data-color="blue"></div>
+<div data-color="blue-light"></div>
+```
+
+```css hidden
+div {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid black;
+}
+```
+
+```css
+[data-color="red"] {
+  background-color: lab(100 125 125);
+}
+[data-color="red-a"] {
+  background-color: lab(100 110 125);
+}
+
+[data-color="green"] {
+  background-color: lab(75% -120 125);
+}
+[data-color="green-b"] {
+  background-color: lab(75% -120 10);
+}
+
+[data-color="blue"] {
+  background-color: lab(0 -120 -120);
+}
+[data-color="blue-light"] {
+  background-color: lab(70 -120 -120);
+}
+```
+
+{{EmbedLiveSample("Adjusting_lightness_and_color_axes_with_lab")}}
+
+### Adjusting opacity with lab()
+
+The following example shows the effect of varying the `A` (alpha) value of the `lab()` functional notation.
+The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity.
+Giving `A` a value of `0.4` makes the color 40% opaque.
+
+```html
+<div id="background-div">
+  <div data-color="red"></div>
+  <div data-color="red-alpha"></div>
+</div>
+```
+
+```css hidden
+div {
+  width: 50px;
+  height: 50px;
+  padding: 5px;
+  margin: 5px;
+  display: inline-block;
+  border: 1px solid black;
+}
+#background-div {
+  background-color: lightblue;
+  width: 150px;
+  height: 40px;
+}
+```
+
+```css
+[data-color="red"] {
+  background-color: lab(100 125 125);
+}
+[data-color="red-alpha"] {
+  background-color: lab(100 125 125 / 0.4);
+}
+```
+
+{{EmbedLiveSample('Adjusting_opacity_with_lab')}}
+
 ## Specifications
 
 {{Specifications}}
@@ -45,5 +141,6 @@ lab(52.2345% 40.1645 59.9971 / .5);
 
 ## See also
 
+- The [`<color>` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations
 - [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
 - [Safari Technology Preview 122 release notes](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/): includes `lab()` and {{cssxref("color_value/lch",'lch()')}} colors.