fix(css): add color space info to gradient pages

OnkarRuikar · Nov 5, 2023 · 1a46230 · 1a46230
1 parent 281dd9b
commit 1a46230
Show file tree

Hide file tree

Showing 6 changed files with 356 additions and 26 deletions.
diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md
@@ -16,25 +16,29 @@ The **`conic-gradient()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web
 ```css
 /* A conic gradient rotated 45 degrees,
    starting blue and finishing red */
-conic-gradient(from 45deg, blue, red);
+conic-gradient(from 45deg, blue, red)
 
 /* A bluish purple box: the gradient goes from blue to red,
    but only the bottom right quadrant is visible, as the
    center of the conic gradient is at the top left corner */
-conic-gradient(from 90deg at 0 0, blue, red);
+conic-gradient(from 90deg at 0 0, blue, red)
+
+/* Interpolation in polar color space
+  with longer hue interpolation method */
+conic-gradient(in hsl longer hue, red, blue, green, red)
 
 /* Color wheel */
-background: conic-gradient(
-    hsl(360, 100%, 50%),
-    hsl(315, 100%, 50%),
-    hsl(270, 100%, 50%),
-    hsl(225, 100%, 50%),
-    hsl(180, 100%, 50%),
-    hsl(135, 100%, 50%),
-    hsl(90, 100%, 50%),
-    hsl(45, 100%, 50%),
-    hsl(0, 100%, 50%)
-);
+conic-gradient(
+  hsl(360, 100%, 50%),
+  hsl(315, 100%, 50%),
+  hsl(270, 100%, 50%),
+  hsl(225, 100%, 50%),
+  hsl(180, 100%, 50%),
+  hsl(135, 100%, 50%),
+  hsl(90, 100%, 50%),
+  hsl(45, 100%, 50%),
+  hsl(0, 100%, 50%)
+)
 ```
 
 ### Values
@@ -215,6 +219,46 @@ div {
 
 {{EmbedLiveSample("Checkerboard", 120, 120)}}
 
+### Interpolation in polor color space with hue interpolation methods
+
+```html
+<div class="shorter"></div>
+<div class="longer"></div>
+```
+
+```css hidden
+div {
+  display: inline-block;
+  margin-top: 1rem;
+  width: 45vw;
+  height: 80vh;
+}
+
+.shorter::before {
+  content: "shorter hue";
+  display: block;
+  margin-top: -1rem;
+}
+
+.longer::before {
+  content: "longer hue";
+  display: block;
+  margin-top: -1rem;
+}
+```
+
+```css
+.shorter {
+  background-image: conic-gradient(in hsl shorter hue, red, blue, green, red);
+}
+
+.longer {
+  background-image: conic-gradient(in hsl longer hue, red, blue, green, red);
+}
+```
+
+{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
+
 ### More conic-gradient examples
 
 Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples.
@@ -231,6 +275,8 @@ Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradie
 
 - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
 - Other gradient functions: {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
+- [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method)
+- [`<color-interpolation-method>`](/en-US/docs/Web/CSS/color-interpolation-method)
 - {{cssxref("&lt;image&gt;")}}
 - {{cssxref("image/image","image()")}}
 - {{cssxref("element", "element()")}}

diff --git a/files/en-us/web/css/gradient/linear-gradient/index.md b/files/en-us/web/css/gradient/linear-gradient/index.md
@@ -16,27 +16,37 @@ The **`linear-gradient()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/We
 ```css
 /* A gradient tilted 45 degrees,
    starting blue and finishing red */
-linear-gradient(45deg, blue, red);
+linear-gradient(45deg, blue, red)
 
 /* A gradient going from the bottom right to the top left corner,
    starting blue and finishing red */
-linear-gradient(to left top, blue, red);
+linear-gradient(to left top, blue, red)
+
+/* Interpolation in rectangular color space */
+linear-gradient(in oklab, blue, red)
+
+/* Interpolation in polar color space */
+linear-gradient(in hsl, blue, red)
+
+/* Interpolation in polar color space
+  with longer hue interpolation method */
+linear-gradient(in hsl longer hue, blue, red)
 
 /* Color stop: A gradient going from the bottom to top,
    starting blue, turning green at 40% of its length,
    and finishing red */
-linear-gradient(0deg, blue, green 40%, red);
+linear-gradient(0deg, blue, green 40%, red)
 
 /* Color hint: A gradient going from the left to right,
    starting red, getting to the midpoint color
    10% of the way across the length of the gradient,
    taking the rest of the 90% of the length to change to blue */
-linear-gradient(.25turn, red, 10%, blue);
+linear-gradient(.25turn, red, 10%, blue)
 
 /* Multi-position color stop: A gradient tilted 45 degrees,
    with a red bottom-left half and a blue top-right half,
    with a hard line where the gradient changes from red to blue */
-linear-gradient(45deg, red 0 50%, blue 50% 100%);
+linear-gradient(45deg, red 0 50%, blue 50% 100%)
 ```
 
 ### Values
@@ -147,6 +157,50 @@ body {
 
 {{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}
 
+### Interpolation in rectangular color space
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background: linear-gradient(90deg in oklab, blue, red);
+}
+```
+
+{{EmbedLiveSample("Interpolation in rectangular color space", 120, 120)}}
+
+### Interpolation in polor color space with hue interpolation methods
+
+```html
+<div class="shorter">shorter hue</div>
+<div class="longer">longer hue</div>
+```
+
+```css hidden
+div {
+  height: 50vh;
+  color: white;
+  font-weight: bolder;
+}
+```
+
+```css
+.shorter {
+  background: linear-gradient(90deg in hsl shorter hue, blue, red);
+}
+
+.longer {
+  background: linear-gradient(90deg in hsl longer hue, blue, red);
+}
+```
+
+{{EmbedLiveSample("Interpolation in polor color space with hue interpolation methods", 120, 120)}}
+
 ### Gradient with multi-position color-stops
 
 This example uses multi-position color-stops, with adjacent colors having the same color-stop value, creating a striped effect.
@@ -189,6 +243,8 @@ Please see [using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradie
 
 - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
 - Other gradient functions: {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method)
+- [`<color-interpolation-method>`](/en-US/docs/Web/CSS/color-interpolation-method)
 - {{CSSxRef("&lt;image&gt;")}}
 - {{cssxref("element", "element()")}}
 - {{cssxref("image/image","image()")}}

diff --git a/files/en-us/web/css/gradient/radial-gradient/index.md b/files/en-us/web/css/gradient/radial-gradient/index.md
@@ -17,6 +17,9 @@ The **`radial-gradient()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/We
 /* A gradient at the center of its container,
    starting red, changing to blue, and finishing green */
 radial-gradient(circle at center, red 0, blue, green 100%)
+
+/* hsl color space with lognger hue interpolation */
+radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)
 ```
 
 A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the _ending shape_ (the 100% ellipse).
@@ -121,6 +124,56 @@ Color-stop points are positioned on a _virtual gradient ray_ that extends horizo
 
 {{EmbedLiveSample('Non-centered_gradient', 240, 120)}}
 
+### Interpolation in polor color space with hue interpolation methods
+
+```html
+<div class="shorter"></div>
+<div class="longer"></div>
+```
+
+```css hidden
+div {
+  display: inline-block;
+  margin-top: 1rem;
+  width: 45vw;
+  height: 80vh;
+}
+
+.shorter::before {
+  content: "shorter hue";
+  display: block;
+  margin-top: -1rem;
+}
+
+.longer::before {
+  content: "longer hue";
+  display: block;
+  margin-top: -1rem;
+}
+```
+
+```css
+.shorter {
+  background-image: radial-gradient(
+    circle at center in hsl shorter hue,
+    red,
+    blue,
+    green
+  );
+}
+
+.longer {
+  background-image: radial-gradient(
+    circle at center in hsl longer hue,
+    red,
+    blue,
+    green
+  );
+}
+```
+
+{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
+
 ### More radial-gradient examples
 
 Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples.
@@ -137,6 +190,8 @@ Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradie
 
 - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
 - Other gradient functions: {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
+- [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method)
+- [`<color-interpolation-method>`](/en-US/docs/Web/CSS/color-interpolation-method)
 - {{cssxref("&lt;image&gt;")}}
 - {{cssxref("image/image","image()")}}
 - {{cssxref("element", "element()")}}

diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
@@ -18,11 +18,15 @@ The **`repeating-conic-gradient()`** [CSS](/en-US/docs/Web/CSS) [function](/en-U
    is a starburst of lighter and darker blue,
    centered in the upper left quadrant,
    offset by 3degrees so there is no up/down straight line */
-background: repeating-conic-gradient(
+repeating-conic-gradient(
   from 3deg at 25% 25%,
   hsl(200, 100%, 50%) 0deg 15deg,
   hsl(200, 100%, 60%) 10deg 30deg
-);
+)
+
+/* Interpolation in polar color space
+  with longer hue interpolation method */
+repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)
 ```
 
 ### Values
@@ -157,6 +161,56 @@ div {
 
 {{EmbedLiveSample("Off-centered_gradient", 220, 220)}}
 
+### Interpolation in polor color space with hue interpolation methods
+
+```html
+<div class="shorter"></div>
+<div class="longer"></div>
+```
+
+```css hidden
+div {
+  display: inline-block;
+  margin-top: 1rem;
+  width: 45vw;
+  height: 80vh;
+}
+
+.shorter::before {
+  content: "shorter hue";
+  display: block;
+  margin-top: -1rem;
+}
+
+.longer::before {
+  content: "longer hue";
+  display: block;
+  margin-top: -1rem;
+}
+```
+
+```css
+.shorter {
+  background-image: repeating-conic-gradient(
+    in hsl shorter hue,
+    red,
+    blue 90deg,
+    green 180deg
+  );
+}
+
+.longer {
+  background-image: repeating-conic-gradient(
+    in hsl longer hue,
+    red,
+    blue 90deg,
+    green 180deg
+  );
+}
+```
+
+{{EmbedLiveSample('Interpolation in polor color space with hue interpolation methods', 240, 200)}}
+
 ### More repeating-conic-gradient examples
 
 Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) for more examples.
@@ -173,6 +227,8 @@ Please see [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradie
 
 - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
 - Other gradient functions: {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
+- [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method)
+- [`<color-interpolation-method>`](/en-US/docs/Web/CSS/color-interpolation-method)
 - {{cssxref("&lt;image&gt;")}}
 - {{cssxref("image/image","image()")}}
 - {{cssxref("element", "element()")}}