Skip to content

Commit 3883af6

Browse files
svgeesussvgeesus
committed
[css-images-4] add radial gradient example
1 parent 6586151 commit 3883af6

File tree

3 files changed

+51
-3
lines changed

3 files changed

+51
-3
lines changed

‎css-images-4/Overview.bs

+26-3
Original file line numberDiff line numberDiff line change
@@ -1207,9 +1207,9 @@ The effect of colorspace on interpolation can be marked.
12071207
which here gives almost the same result as CIE Lab.
12081208

12091209
<ul class="lang-css">
1210-
<li>linear-gradient(in lab to right, #F01, #081)</li>
1211-
<li>linear-gradient(in srgb to right, #F01, #081)</li>
1212-
<li>linear-gradient(in oklab to right, #F01, #081)</li>
1210+
<li><code>linear-gradient(in lab to right, #F01, #081)</code></li>
1211+
<li><code>linear-gradient(in srgb to right, #F01, #081)</code></li>
1212+
<li><code>linear-gradient(in oklab to right, #F01, #081)</code></li>
12131213
</ul>
12141214

12151215
<!-- source: images/rectangular-f01-081.html -->
@@ -1331,6 +1331,29 @@ to customize color interpolation in gradients as described in [[css-color-4#inte
13311331
)
13321332
</pre>
13331333

1334+
<div class="example">
1335+
In this example, a radial gradient between the same pair of colors
1336+
color(display-p3 0.918 0.2 0.161) and #081 is drawn in three different colorspaces.
1337+
Notice that the color stops do not all need to be in the same colorspace.
1338+
The middle gradient uses gamma-encoded sRGB,
1339+
the result is clearly too dark at the midpoint.
1340+
The upper gradient uses CIE Lab,
1341+
giving a more perceptually uniform result;
1342+
while the lower gradient uses OKLab,
1343+
which here gives almost the same result as CIE Lab.
1344+
1345+
<ul class="lang-css">
1346+
<li><code>linear-gradient(in lab farthest-side at left bottom, color(display-p3 0.918 0.2 0.161), #081)</code></li>
1347+
<li><code>linear-gradient(in srgb farthest-side at left bottom, color(display-p3 0.918 0.2 0.161), #081)</code></li>
1348+
<li><code>linear-gradient(in oklab farthest-side at left bottom, color(display-p3 0.918 0.2 0.161), #081)</code></li>
1349+
</ul>
1350+
1351+
<!-- source: images/radial-rectangular-f01-081.html -->
1352+
<img src="images/radial-rectangular-f01-081.png"
1353+
width="360" height="330"
1354+
alt="red to green gradient in three colorspaces" />
1355+
</div>
1356+
13341357
<!--
13351358
██████ ███████ ██ ██ ████ ██████
13361359
██ ██ ██ ██ ███ ██ ██ ██ ██

‎css-images-4/images/radial-rectangular-f01-081.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<title>Effect of Interpolation Colorspace on Gradient between color(display-p3 0.9175 0.2003 0.1608) [= #F01] and #081: rectangular</title>
3+
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
4+
See https://colorjs.io/apps/gradients/?color1=%23f01&color2=%23081
5+
and set gamut mapping off, output space sRGB, steps 6 deltaE -->
6+
<style>
7+
div.gradient {
8+
width: 400px;
9+
height: 120px;
10+
margin: 0;
11+
}
12+
#srgb {
13+
background: radial-gradient(farthest-side at left bottom, rgb(100% 0% 6.67%), rgb(98.33% 0.89% 6.67%), rgb(96.67% 1.78% 6.67%), rgb(95% 2.67% 6.67%), rgb(93.33% 3.56% 6.67%), rgb(91.67% 4.44% 6.67%), rgb(90% 5.33% 6.67%), rgb(88.33% 6.22% 6.67%), rgb(86.67% 7.11% 6.67%), rgb(85% 8% 6.67%), rgb(83.33% 8.89% 6.67%), rgb(81.67% 9.78% 6.67%), rgb(80% 10.67% 6.67%), rgb(78.33% 11.56% 6.67%), rgb(76.67% 12.44% 6.67%), rgb(75% 13.33% 6.67%), rgb(73.33% 14.22% 6.67%), rgb(71.67% 15.11% 6.67%), rgb(70% 16% 6.67%), rgb(68.33% 16.89% 6.67%), rgb(66.67% 17.78% 6.67%), rgb(65% 18.67% 6.67%), rgb(63.33% 19.56% 6.67%), rgb(61.67% 20.44% 6.67%), rgb(60% 21.33% 6.67%), rgb(58.33% 22.22% 6.67%), rgb(56.67% 23.11% 6.67%), rgb(55% 24% 6.67%), rgb(53.33% 24.89% 6.67%), rgb(51.67% 25.78% 6.67%), rgb(50% 26.67% 6.67%), rgb(48.33% 27.56% 6.67%), rgb(46.67% 28.44% 6.67%), rgb(45% 29.33% 6.67%), rgb(43.33% 30.22% 6.67%), rgb(41.67% 31.11% 6.67%), rgb(40% 32% 6.67%), rgb(38.33% 32.89% 6.67%), rgb(36.67% 33.78% 6.67%), rgb(35% 34.67% 6.67%), rgb(33.33% 35.56% 6.67%), rgb(31.67% 36.44% 6.67%), rgb(30% 37.33% 6.67%), rgb(28.33% 38.22% 6.67%), rgb(26.67% 39.11% 6.67%), rgb(25% 40% 6.67%), rgb(23.33% 40.89% 6.67%), rgb(21.67% 41.78% 6.67%), rgb(20% 42.67% 6.67%), rgb(18.33% 43.56% 6.67%), rgb(16.67% 44.44% 6.67%), rgb(15% 45.33% 6.67%), rgb(13.33% 46.22% 6.67%), rgb(11.67% 47.11% 6.67%), rgb(10% 48% 6.67%), rgb(8.33% 48.89% 6.67%), rgb(6.67% 49.78% 6.67%), rgb(5% 50.67% 6.67%), rgb(3.33% 51.56% 6.67%), rgb(1.67% 52.44% 6.67%), rgb(0% 53.33% 6.67%));
14+
}
15+
#oklab {
16+
background: radial-gradient(farthest-side at left bottom, rgb(100% 0% 6.67%), rgb(95.76% 17% 6.69%), rgb(91.47% 24.2% 6.71%), rgb(87.12% 29.28% 6.72%), rgb(82.69% 33.26% 6.73%), rgb(78.17% 36.56% 6.74%), rgb(73.53% 39.36% 6.75%), rgb(68.75% 41.78% 6.75%), rgb(63.79% 43.89% 6.75%), rgb(58.6% 45.76% 6.75%), rgb(53.09% 47.41% 6.74%), rgb(47.14% 48.89% 6.73%), rgb(40.53% 50.2% 6.72%), rgb(32.82% 51.37% 6.7%), rgb(22.79% 52.41% 6.69%), rgb(0% 53.33% 6.67%));
17+
}
18+
#cielab {
19+
background: radial-gradient(farthest-side at left bottom, rgb(100% 0% 6.67%), rgb(95.43% 17.85% 5.84%), rgb(90.82% 25.26% 5.08%), rgb(86.17% 30.43% 4.39%), rgb(81.47% 34.46% 3.8%), rgb(76.7% 37.74% 3.37%), rgb(71.85% 40.5% 3.1%), rgb(66.88% 42.86% 2.98%), rgb(61.77% 44.89% 3.02%), rgb(56.47% 46.66% 3.21%), rgb(50.9% 48.19% 3.55%), rgb(44.95% 49.53% 4.02%), rgb(38.41% 50.7% 4.6%), rgb(30.88% 51.71% 5.25%), rgb(21.22% 52.58% 5.94%), rgb(0% 53.33% 6.67%))
20+
}
21+
</style>
22+
23+
<div class="gradient" id="cielab"></div>
24+
<div class="gradient" id="srgb"></div>
25+
<div class="gradient" id="oklab"></div>

‎css-images-4/images/radial-rectangular-f01-081.png

137 KB
Loading

0 commit comments

Comments
 (0)