docs(CSS): add examples of hue interpolation methods, add hue page (#…

…25350) * docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): add examples of hue interpolation methods, add hue page * docs(CSS): consistent use of lt gt brackets inside cssref macros * Update files/en-us/web/css/color_value/index.md Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> * docs(CSS): fix some flaws for links to CSS ref pages * Update files/en-us/web/css/hue/index.md Co-authored-by: Adam Argyle <argyle@google.com> * docs(CSS): use front-matter suggestion from Estelle on hue page, add oklch and oklab * Apply suggestions from code review * space * white space * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> --------- Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com> Co-authored-by: Adam Argyle <argyle@google.com> Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
mdn · Mar 27, 2023 · 27bce57 · 27bce57
1 parent a83bde9
commit 27bce57
Show file tree

Hide file tree

Showing 5 changed files with 319 additions and 37 deletions.
diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md
@@ -14,27 +14,41 @@ The **`color-mix()`** functional notation takes two {{cssxref("color_value","col
 ## Syntax
 
 ```css
-color-mix(in lch, peru 40%, lightgoldenrod);
+color-mix(in lch, peru, pink);
+color-mix(in lch, peru 40%, pink);
 color-mix(in srgb, #34c9eb 20%, white);
+color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
 ```
 
 ### Values
 
-- Functional notation: `color-mix( in <colorspace> , [ <color> && <percentage>? ]#{2})`
+- Functional notation: `color-mix( <color-interpolation-method> , [ [<color>](/en-US/docs/Web/CSS/color_value) && [<percentage [0,100]>](/en-US/docs/Web/CSS/percentage)? ]#{2} )`
 
-  - : `<colorspace>` is one of `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`, `hsl`, `hwb`, `lch`, `oklch`. There is no default.
+  - `<color-interpolation-method>` is the keyword `in` (for interpolation) followed by either:
 
-    `<color>` is any valid {{cssxref("color_value","color")}}.
+    - `<rectangular-color-space>` or
+    - `<polar-color-space>` and an optional `<hue-interpolation-method>`.
 
-    `<percentage>` is the percentage of that color to mix.
+  - `<rectangular-color-space>` is one of `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`.
+
+  - `<polar-color-space>` is one of `hsl`, `hwb`, `lch`, `oklch`.
+
+  - `<hue-interpolation-method>` is one of `shorter`, `longer`, `increasing`, `decreasing` followed by the keyword `hue`.
+
+  - `<color>` is any valid {{cssxref("color_value","color")}}
+
+  - `<percentage>` is a number between 0 and 100 with an optional `%` sign.
+    If no percentage is specified, the default is 50%.
 
 ### Formal syntax
 
 {{csssyntax}}
 
 ## Examples
 
-### HTML
+### Mixing two colors
+
+In a supporting browser the three items become more blue as a higher percentage of `#34c9eb` is mixed in.
 
 ```html
 <ul>
@@ -44,15 +58,13 @@ color-mix(in srgb, #34c9eb 20%, white);
 </ul>
 ```
 
-### CSS
-
 ```css hidden
 ul {
   display: flex;
   list-style-type: none;
   font-size: 150%;
   gap: 10px;
-  border: 2px solid #34c9eb;
+  border: 2px solid;
   padding: 10px;
 }
 
@@ -75,11 +87,71 @@ li:nth-child(3) {
 }
 ```
 
-#### Result
+{{EmbedLiveSample('Mixing two colors','100%', 150)}}
 
-In a supporting browser the three items become more blue as a higher percentage of `#34c9eb` is mixed in.
+### Using hue interpolation methods
 
-{{EmbedLiveSample('Examples','100%', 200)}}
+Hue interpolation methods can be used to control how the {{cssxref("&lt;hue&gt;")}} is interpolated between two colors.
+For `shorter` the result will be the shortest distance between the two angles (the default) and conversely, `longer` uses the larger value between the two angles in a circle.
+
+For `increasing`, the result will be the angle between 0 and 360 degrees and for `decreasing` the result will be the angle between -360 and 0 degrees.
+
+```html
+<div id="shorter">shorter</div>
+<div id="longer">longer</div>
+<div id="increasing">increasing</div>
+<div id="decreasing">decreasing</div>
+```
+
+```css hidden
+div {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 1px solid;
+  display: inline-block;
+}
+```
+
+```css
+/* 20 degrees */
+#shorter {
+  background-color: color-mix(
+    in hsl shorter hue,
+    hsl(10 100% 50%),
+    hsl(350 100% 50%)
+  );
+}
+
+/* 340 degrees */
+#longer {
+  background-color: color-mix(
+    in hsl longer hue,
+    hsl(10 100% 50%),
+    hsl(350 100% 50%)
+  );
+}
+
+/* The resulting angle is between 0 and 360 degrees */
+#increasing {
+  background-color: color-mix(
+    in hsl increasing hue,
+    hsl(10 100% 50%),
+    hsl(350 100% 50%)
+  );
+}
+
+/* The resulting angle is between -360 and 0 degrees */
+#decreasing {
+  background-color: color-mix(
+    in hsl decreasing hue,
+    hsl(10 100% 50%),
+    hsl(350 100% 50%)
+  );
+}
+```
+
+{{EmbedLiveSample('Using hue interpolation methods','100%', 150)}}
 
 ## Specifications
 
@@ -88,3 +160,8 @@ In a supporting browser the three items become more blue as a higher percentage
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{cssxref("color_value")}}
+- {{cssxref("&lt;hue&gt;")}}
diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md
@@ -12,20 +12,29 @@ A `<color>` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Al
 
 A `<color>` can be defined in any of the following ways:
 
-- Using a keyword (such as `blue` or `transparent`). All existing keywords specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB).
-- Using the [RGB cubic-coordinate](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) system (via the #-hexadecimal or the `rgb()` functional notation).
-  These always specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB).
-- Using the [HSL cylindrical-coordinate](https://en.wikipedia.org/wiki/HSL_and_HSV) system (via the {{cssxref("color_value/hsl","hsl()")}} functional notation).
-  These always specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB).
-- Using the [HWB cylindrical-coordinate](https://en.wikipedia.org/wiki/HWB_color_model) system (via the {{cssxref("color_value/hwb","hwb()")}} functional notation).
-  These always specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB).
-- Using the [LCH cylindrical coordinate system](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC), via the {{cssxref("color_value/lch","lch()")}} functional notation.
-  This can specify any visible color.
-- Using the [Lab coordinate system](https://en.wikipedia.org/wiki/CIELAB_color_space), via the {{cssxref("color_value/lab","lab()")}} functional notation.
-  This can specify any visible color.
-- Using the {{cssxref("color_value/color","color()")}} functional notation, to specify a color in a variety of predefined or custom color spaces.
-
-> **Note:** This article describes the `<color>` data type in detail. To learn more about using color in HTML, see [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color).
+- For the [sRGB color space](https://en.wikipedia.org/wiki/SRGB):
+
+  - A predefined keyword (such as `blue` or `pink`) as described in the [`<named-color>` page](/en-US/docs/Web/CSS/named-color).
+
+  - {{cssxref("color_value/rgb","rgb()")}} functional notation or [`#` hexadecimal](/en-US/docs/Web/CSS/hex-color) using the [RGB cubic-coordinate](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) system.
+
+  - {{cssxref("color_value/hsl","hsl()")}} functional notation using the [HSL cylindrical-coordinate](https://en.wikipedia.org/wiki/HSL_and_HSV) system.
+
+  - {{cssxref("color_value/hwb","hwb()")}} functional notation using the [HWB cylindrical-coordinate](https://en.wikipedia.org/wiki/HWB_color_model) system.
+
+- Any visible color with the following:
+
+  - {{cssxref("color_value/lch","lch()")}} functional notation using the [LCH cylindrical coordinate system](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC).
+
+  - {{cssxref("color_value/oklch","oklch()")}} functional notation using the [Oklch cylindrical coordinate system](https://bottosson.github.io/posts/oklab/).
+
+  - {{cssxref("color_value/lab","lab()")}} functional notation using the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space.
+
+  - {{cssxref("color_value/oklab","oklab()")}} functional notation using the [Oklab](https://bottosson.github.io/posts/oklab/) color space.
+
+- The {{cssxref("color_value/color","color()")}} functional notation, using a variety of predefined or custom color spaces.
+
+> **Note:** These color values can be used to [apply color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color).
 
 ## Syntax
 
@@ -37,7 +46,7 @@ The `<color>` data type is specified using one of the options listed below.
 
 Named colors are case-insensitive identifiers that represent a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the names used.
 
-The complete list of such keywords is available [here](/en-US/docs/Web/CSS/named-color).
+The complete list of such keywords is described on the [`<named-color>` page](/en-US/docs/Web/CSS/named-color).
 
 ### currentcolor keyword
 
@@ -63,22 +72,22 @@ RGB colors can be expressed through both hexadecimal (prefixed with `#`) and fun
 
 - [Hexadecimal notation](/en-US/docs/Web/CSS/hex-color): `#RGB[A]` or`#RRGGBB[AA]`
   - : `R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0–9, A–F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. The three-digit notation (`#RGB`) is a shorter version of the six-digit form (`#RRGGBB`). For example, `#f09` is the same color as `#ff0099`. Likewise, the four-digit RGB notation (`#RGBA`) is a shorter version of the eight-digit form (`#RRGGBBAA`). For example, `#0f38` is the same color as `#00ff3388`.
-- [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) or [`rgba()`](/en-US/docs/Web/CSS/color_value/rgba): `rgb[a](R, G, B[, A])` or `rgb[a](R G B[ / A])`
+- [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) (and the legacy `rgba()`): `rgb(R G B[ / A])` (or `rgb[a](R, G, B[, A])`
   - : `R` (red), `G` (green), and `B` (blue) can be either {{cssxref("&lt;number&gt;")}}s or {{cssxref("&lt;percentage&gt;")}}s, where the number `255` corresponds to `100%`. `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).
 
 ### HSL color model
 
 The HSL color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
 
-- [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl): `hsl(H S L [ / A])` or `hsl(H, S, L [, A])`
-  - : Where the `H` is the hue, taking as a value an {{cssxref("&lt;angle&gt;")}} of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in the [CSS Color](https://drafts.csswg.org/css-color/#the-hsl-notation) specification. When written as a unitless {{cssxref("&lt;number&gt;")}}, it is interpreted as degrees. The `S` is the saturation as a `<percentage>` value where 100% is completely saturated, while 0% is completely unsaturated (gray). The `L` is the lightness as a `<percentage>` value where 100% is white, 0% is black, and 50% is "normal". The optional `A` is alphatransparency as a `<percentage>` or a `<number>` between 0 and 1, where the number 1 or 100% and means full opacity and 0 or 0% and means fully transparent.
+- {{cssxref("color_value/hsl","hsl()")}}: `hsl(H S L [ / A])` (or legacy `hsl(H, S, L [, A])`)
+  - : Where the `H` is the hue, taking as a value an {{cssxref("&lt;angle&gt;")}} of the [color circle](/en-US/docs/Web/CSS/color_value/hsl#values) given in `deg`s, `rad`s, `grad`s, or `turn`s. By definition, red is `0deg`, yellow is `60deg`, green is `120deg`, cyan is `180deg`, blue is `240deg`, and magenta is `300deg`. When written as a unitless {{cssxref("&lt;number&gt;")}}, it is interpreted as degrees. The `S` is the saturation as a `<percentage>` value where 100% is completely saturated, while 0% is completely unsaturated (gray). The `L` is the lightness as a `<percentage>` value where 100% is white, 0% is black, and 50% is "normal". The optional `A` is alpha transparency as a `<percentage>` or a `<number>` between 0 and 1, where the number 1 or 100% and means full opacity and 0 or 0% and means fully transparent.
 
 Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).
 However, using HSL to create color variations can produce surprising results, as it is not [perceptually uniform](https://en.wikipedia.org/wiki/Color_difference#Tolerance). For example, both `hsl(240 100% 50%)` and `hsl(60 100% 50%)` have the same lightness, even though the former is much darker than the latter.
 
-HSL colors are expressed through the functional {{cssxref("color_value/hsl()", "hsl()")}} notation.
+HSL colors are expressed through the functional {{cssxref("color_value/hsl", "hsl()")}} notation.
 
-> **Note:** The legacy {{cssxref("color_value/hsla", "hsla()")}} syntax is an alias for `hsl()`, accepting the same parameters and behaving in the same way.
+> **Note:** The legacy `hsla()` syntax is an alias for {{cssxref("color_value/hsl","hsl()")}}, accepting the same parameters and behaving in the same way.
 
 ### HWB color model
 
@@ -122,7 +131,7 @@ They are not limited to a specific color space, and can represent the entire spe
 
 In fact, LCH is the polar form of Lab. It is more human friendly than Lab, as its chroma and hue components specify qualities of the desired color, as opposed to mixing.
 It is similar to HSL in that way, although it is far more perceptually uniform.
-Unlike HSL that describes both `hsl(60 100% 50%)` and `hsl(240 100% 50%)` as having the same lightness, LCH (and Lab) correctly ascribes different lightnesses to them:
+Unlike HSL which describes both `hsl(60 100% 50%)` and `hsl(240 100% 50%)` as having the same lightness, LCH (and Lab) correctly ascribes different lightness to them:
 the former (yellow) has an L of 97.6 and the latter (blue) an L of 29.6.
 Therefore, LCH can be used to create palettes across entirely different colors, with predictable results.
 Please note that LCH hue is not the same as HSL hue and LCH chroma is not the same as HSL saturation, although they do share some conceptual similarities.
@@ -135,11 +144,13 @@ as well as custom color spaces, defined via the [`@color-profile`](/en-US/docs/W
 
 ## Interpolation
 
-In animations and [gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients), `<color>` values are {{Glossary("interpolation", "interpolated")}} on each of their red, green, and blue components. Each component is interpolated as a real, floating-point number. Note that interpolation of colors happens in the [alpha-premultiplied sRGBA color space](https://www.w3.org/TR/css-color-4/#interpolation-alpha) to prevent unexpected gray colors from appearing. In animations, the interpolation's speed is determined by the [timing function](/en-US/docs/Web/CSS/easing-function).
+In animations and [gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients), `<color>` values are {{Glossary("interpolation", "interpolated")}} on each of their red, green, and blue components. By default, animation occurs in an RGBA color space, with interpolation's speed being determined by the [timing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. To prevent unexpected colors from appearing, consider using [`color-mix()`](/en-us/Web/CSS/color_value/color-mix) functional notation.
+
+Interpolating the {{cssxref("&lt;hue&gt;")}} of two colors in functions that accept a hue angle is also possible and is described in more detail in the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) functional notation documentation.
 
 ## Accessibility considerations
 
-Some people have difficulty distinguishing colors. The [WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [Color and color contrast](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast) for more information.
+Some people have difficulty distinguishing colors. The [WCAG 2.0](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [color and color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for more information.
 
 ## Formal syntax
 
@@ -504,5 +515,6 @@ hsl(240 100% 50% / 5%)       /*   5% opaque blue */
 ## See also
 
 - The {{Cssxref("opacity")}} property lets you define transparency at the element level.
+- The {{cssxref("&lt;hue&gt;")}} data type represents a color by hue angle.
 - Some common properties that use this data type: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}
 - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color)
diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md
@@ -7,7 +7,7 @@ browser-compat: css.types.color.oklab
 
 {{CSSRef}}
 
-The **`oklab()`** functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. The `oklab()` works with a Cartesian coordinate system on the OKlab color space, the a- and b-axes. If you want a polar color system, chroma and hue, use {{cssxref("color_value/oklch", "oklch()")}}.
+The **`oklab()`** functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. The `oklab()` works with a Cartesian coordinate system on the Oklab color space, the a- and b-axes. If you want a polar color system, chroma and hue, use {{cssxref("color_value/oklch", "oklch()")}}.
 
 Oklab is a perceptual color space and is useful to:
 

diff --git a/files/en-us/web/css/css_types/index.md b/files/en-us/web/css/css_types/index.md
@@ -91,12 +91,14 @@ Some CSS properties can take a dimension or a percentage value. In this case the
 
 ## Color
 
-[The CSS Color Specification](https://www.w3.org/TR/css-color-3/) defines the {{cssxref("&lt;color&gt;")}} data type, and other types which relate to color in CSS.
+[The CSS Color Specification](https://www.w3.org/TR/css-color-4/) defines the {{cssxref("&lt;color&gt;")}} data type, and other types which relate to color in CSS.
 
 - {{cssxref("&lt;color&gt;")}}
   - : Specified as a keyword or a numerical color value.
 - {{cssxref("&lt;alpha-value&gt;")}}
   - : Specifies the transparency of a color. May be a `<number>`, in which case 0 is fully transparent and 1 is fully opaque, or a `<percentage>`, in which case 0% is fully transparent and 100% fully opaque.
+- {{cssxref("&lt;hue&gt;")}}
+  - : Specifies the `<angle>`, with a unit identifier of `deg`, `grad`, `rad`, or `turn`, or unitless `<number>` interpreted as `deg`, of the {{glossary("color wheel")}} specific to the `<absolute-color-functions>` of which it is a component.
 
 ## Images