Add <(color|hue)-interpolation-method>; de-duplicate <hue> descriptions

files/en-us/web/css/color-interpolation-method/index.md

@@ -0,0 +1,143 @@
+---
+title: <color-interpolation-method>
+slug: Web/CSS/color-interpolation-method
+page-type: css-type
+browser-compat:
+  - css.types.color.color-mix
+  - css.types.image.gradient.conic-gradient.interpolation_color_space
+  - css.types.image.gradient.linear-gradient.interpolation_color_space
+  - css.types.image.gradient.radial-gradient.interpolation_color_space
+  - css.types.image.gradient.repeating-conic-gradient.interpolation_color_space
+  - css.types.image.gradient.repeating-linear-gradient.interpolation_color_space
+  - css.types.image.gradient.repeating-radial-gradient.interpolation_color_space
+spec-urls: https://drafts.csswg.org/css-color/#interpolation-space
+---
+
+{{CSSRef}}
+
+The **`<color-interpolation-method>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the color space used for interpolation between {{CSSXref("&lt;color&gt;")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}.
+
+When interpolating `<color>` values, the interpolation color space defaults to Oklab.
+
+## Syntax
+
+The `<color-interpolation-method>` specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method:
+
+```
+in <rectangular-color-space>
+// or
+in <polar-color-space>[ <hue-interpolation method>]
+```
+
+### Values
+
+- `<rectangular-color-space>`
+
+  - : One of the keywords `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, or `xyz-d65`.
+
+- `<polar-color-space>`
+
+  - : One of the keywords `hsl`, `hwb`, `lch`, or `oklch`.
+
+- {{CSSXref("&lt;hue-interpolation-method&gt;")}} {{optional_inline}}
+
+  - : The algorithm for hue interpolation. It defaults to `shorter hue`.
+
+## Formal syntax
+
+{{CSSSyntax}}
+
+## Examples
+
+### Comparing interpolation color spaces using gradients
+
+The following example shows the effect of using different interpolation color spaces for {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}.
+
+#### HTML
+
+```html
+<div>sRGB:</div>
+<div class="gradient srgb"></div>
+<div>Oklab:</div>
+<div class="gradient oklab"></div>
+<div>Oklch (with <code>longer hue</code>):</div>
+<div class="gradient oklch-longer"></div>
+```
+
+#### CSS
+
+```css hidden
+/* Fallback styles */
+.srgb {
+  background-image: linear-gradient(
+    to right,
+    rgb(0% 0% 100%),
+    rgb(20% 0% 80%),
+    rgb(40% 0% 60%),
+    rgb(60% 0% 40%),
+    rgb(80% 0% 20%),
+    rgb(100% 0% 0%)
+  );
+}
+.oklab {
+  background-image: linear-gradient(
+    to right,
+    oklab(45.2% -0.032 -0.312),
+    oklab(48.7% 0.019 -0.224),
+    oklab(52.2% 0.07 -0.137),
+    oklab(55.8% 0.122 -0.049),
+    oklab(59.3% 0.173 0.038),
+    oklab(62.8% 0.225 0.126)
+  );
+}
+.oklch-longer {
+  background-image: linear-gradient(
+    to right,
+    oklch(45.2% 0.313 264),
+    oklch(46.8% 0.308 243),
+    oklch(48.4% 0.303 221),
+    oklch(50% 0.298 200),
+    oklch(51.6% 0.293 179),
+    oklch(53.2% 0.288 157),
+    oklch(54.8% 0.283 136),
+    oklch(56.4% 0.278 115),
+    oklch(58% 0.273 93),
+    oklch(59.6% 0.268 72),
+    oklch(61.2% 0.263 51),
+    oklch(62.8% 0.258 29)
+  );
+}
+```
+
+```css
+.gradient {
+  height: 50px;
+  width: 100%;
+}
+.srgb {
+  background-image: linear-gradient(in srgb to right, blue, red);
+}
+.oklab {
+  background-image: linear-gradient(in oklab to right, blue, red);
+}
+.oklch-longer {
+  background-image: linear-gradient(in oklch longer hue to right, blue, red);
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("comparing_interpolation_color_spaces_using_gradients", "100%", 250)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSXref("&lt;color&gt;")}}, {{CSSXref("&lt;gradient&gt;")}}
+- {{CSSXref("&lt;hue-interpolation-method&gt;")}}

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

@@ -7,7 +7,7 @@ browser-compat: css.types.color.color-mix
 
 {{CSSRef}}
 
-The **`color-mix()`** functional notation takes two {{cssxref("color_value","<color>")}} values and returns the result of mixing them in a given colorspace by a given amount.
+The **`color-mix()`** functional notation takes two {{cssxref("<color>")}} values and returns the result of mixing them in a given colorspace by a given amount.
 
 ## Syntax
 
@@ -20,29 +20,15 @@ color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
 
 ### Values
 
-Functional notation: `color-mix(in colorspace[ hue-interpolation-method hue], color[ p1], color[ p2])`
+Functional notation: `color-mix(method, color1[ p1], color2[ p2])`
 
-- `in`
+- `method`
 
-  - : A literal token as a component of the syntax.
+  - : A {{CSSXref("<color-interpolation-method>")}} specifying the interpolation color space.
 
-- `colorspace`
+- `color1`, `color2`
 
-  - : One of `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`, `hsl`, `hwb`, `lch`, or `oklch`, specifying the color space for interpolation.
-
-- `hue-interpolation-method` {{optional_inline}}
-
-  - : One of `shorter`, `longer`, `increasing`, or `decreasing`, specifying how {{CSSXref("<hue>")}} values of the colors are interpolated.
-
-    > **Note:** This value is only valid if `colorspace` is one of `hsl`, `hwb`, `lch`, and `oklch`.
-
-- `hue`
-
-  - : A literal token as a component of the syntax.
-
-- `color`
-
-  - : Any valid {{CSSXref("<color>")}}.
+  - : {{CSSXref("<color>")}} values to mix.
 
 - `p1`, `p2` {{optional_inline}}
 
@@ -127,77 +113,63 @@ li:nth-child(6) {
 
 #### Result
 
-{{EmbedLiveSample('Mixing two colors','100%', 150)}}
+{{EmbedLiveSample("mixing_two_colors", "100%", 150)}}
 
-### Using hue interpolation methods
+### Using hue interpolation in color-mix()
 
-Hue interpolation methods can be used to control how the {{cssxref("<hue>")}} 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
+When using shorter hue interpolation, the resulting hue angle is halfway between the input angles when taking the shortest route around the color wheel.
+The longer hue interpolation method results in a hue angle which is the midpoint when taking the longer route around the color wheel.
+For more information, see {{cssxref("<hue-interpolation-method>")}}.
 
 ```html
-<div id="shorter">shorter</div>
-<div id="longer">longer</div>
-<div id="increasing">increasing</div>
-<div id="decreasing">decreasing</div>
+<div class="color-one">color one</div>
+<div class="color-two">color two</div>
+<div class="shorter">mixed shorter</div>
+<div class="longer">mixed longer</div>
 ```
 
 #### CSS
 
 ```css hidden
+body {
+  display: flex;
+  flex-wrap: wrap;
+}
 div {
-  width: 100px;
-  height: 100px;
-  margin: 10px;
   border: 1px solid;
-  display: inline-block;
+  font: bold 150% monospace;
+  height: 100px;
+  margin: 10px 5%;
+  width: 30%;
 }
 ```
 
 ```css
-/* 20 degrees */
-#shorter {
-  background-color: color-mix(
-    in hsl shorter hue,
-    hsl(10 100% 50%),
-    hsl(350 100% 50%)
-  );
+.color-one {
+  background-color: hsl(10 100% 50%);
 }
-
-/* 340 degrees */
-#longer {
-  background-color: color-mix(
-    in hsl longer hue,
-    hsl(10 100% 50%),
-    hsl(350 100% 50%)
-  );
+.color-two {
+  background-color: hsl(60 100% 50%);
 }
-
-/* The resulting angle is between 0 and 360 degrees */
-#increasing {
+.shorter {
   background-color: color-mix(
-    in hsl increasing hue,
+    in hsl shorter hue,
     hsl(10 100% 50%),
-    hsl(350 100% 50%)
+    hsl(60 100% 50%)
   );
 }
-
-/* The resulting angle is between -360 and 0 degrees */
-#decreasing {
+.longer {
   background-color: color-mix(
-    in hsl decreasing hue,
+    in hsl longer hue,
     hsl(10 100% 50%),
-    hsl(350 100% 50%)
+    hsl(60 100% 50%)
   );
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample('Using hue interpolation methods','100%', 150)}}
+{{EmbedLiveSample("using_hue_interpolation_in_color_mix", "100%", 250)}}
 
 ## Specifications
 
@@ -209,5 +181,6 @@ div {
 
 ## See also
 
-- {{cssxref("color_value")}}
+- {{CSSXref("&lt;color&gt;")}}
+- {{CSSXref("&lt;color-interpolation-method&gt;")}}
 - {{cssxref("&lt;hue&gt;")}}

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

@@ -11,8 +11,6 @@ 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 name a color profile to be used in the `color()` function to specify a color.
-
 ## Syntax
 
 ```css
@@ -93,11 +91,11 @@ div {
 
 #### Result
 
-{{EmbedLiveSample('Using_predefined_colorspaces_with_color')}}
+{{EmbedLiveSample("using_predefined_colorspaces_with_color")}}
 
-### Using xyz colorspaces with color()
+### Using the xyz colorspace with color()
 
-The following example shows how to use `xyz` colorspaces to specify a color.
+The following example shows how to use the `xyz` colorspace to specify a color.
 
 #### HTML
 
@@ -136,7 +134,7 @@ div {
 
 #### Result
 
-{{EmbedLiveSample('Using_xyz_colorspaces_with_color')}}
+{{EmbedLiveSample("using_the_xyz_colorspace_with_color")}}
 
 ### Using color-gamut media queries with color()
 
@@ -185,7 +183,7 @@ div {
 
 #### Result
 
-{{EmbedLiveSample('Using_color-gamut_media_queries_with_color')}}
+{{EmbedLiveSample("using_color-gamut_media_queries_with_color")}}
 
 ## Specifications