Skip to content

Commit 7e1f815

Browse files
committed
[css-images-4] Add example of missing hues when interpolating with neutrals, w3c#4928
1 parent 176a042 commit 7e1f815

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

css-images-4/Overview.bs

+19
Original file line numberDiff line numberDiff line change
@@ -1764,6 +1764,25 @@ Coloring the Gradient Line</h4>
17641764
the color space used for gradient interpolation
17651765
is the default interpolation color space, Oklab, as defined in [[css-color-4]].
17661766

1767+
<div class="example">
1768+
For example, given the following gradient definition:
1769+
1770+
<pre class="lang-css">
1771+
linear-gradient(in oklch, red, #888, green)
1772+
</pre>
1773+
1774+
the conversion of the neutral #888 to oklch
1775+
gives a missing hue component:
1776+
<span class="lang-css">oklch(0.6268 0 none)</span>
1777+
1778+
and thus, in the first gradient segment,
1779+
the hue is taken from red,
1780+
which is <span class="lang-css">oklch(0.628 0.2577 29.234)</span>;
1781+
while in the second segment
1782+
it is taken from green,
1783+
which is <span class="lang-css">oklch(0.5198 0.1769 142.5)</span>
1784+
</div>
1785+
17671786
By default,
17681787
this interpolation is linear--
17691788
at 25%, 50%, or 75% of the distance between two <a>color stops</a>,

0 commit comments

Comments
 (0)