Skip to content

Commit 6586151

Browse files
svgeesussvgeesus
committed
[css-images-4] Add examples of the effect of color interpolation space
1 parent e1ec9ed commit 6586151

9 files changed

+222
-0
lines changed

‎css-images-4/Overview.bs

+114
Original file line numberDiff line numberDiff line change
@@ -1193,6 +1193,120 @@ to customize color interpolation in gradients as described in [[css-color-4#inte
11931193
<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
11941194
</pre>
11951195

1196+
The effect of colorspace on interpolation can be marked.
1197+
1198+
<div class="example">
1199+
In this example, a linear gradient between the same pair of colors
1200+
#f01 and #081 is drawn in three different colorspaces.
1201+
The middle gradient uses gamma-encoded sRGB,
1202+
which was the only choice in CSS Images 3;
1203+
the result is clearly too dark at the midpoint.
1204+
The upper gradient uses CIE Lab,
1205+
giving a more perceptually uniform result;
1206+
while the lower gradient uses OKLab,
1207+
which here gives almost the same result as CIE Lab.
1208+
1209+
<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>
1213+
</ul>
1214+
1215+
<!-- source: images/rectangular-f01-081.html -->
1216+
<img src="images/rectangular-f01-081.png"
1217+
width="360" height="330"
1218+
alt="red to green gradient in three colorspaces" />
1219+
</div>
1220+
1221+
<div class="example">
1222+
In this example, a linear gradient between the same pair of colors
1223+
white and #01E is drawn in three different colorspaces.
1224+
The middle gradient uses gamma-encoded sRGB,
1225+
the result is again too dark at the midpoint,
1226+
is a little desaturated, and has a slight purplish cast.
1227+
The upper gradient uses CIE Lab,
1228+
which avoids the too-dark midpoint
1229+
but has a significant purple cast;
1230+
while the lower gradient uses OKLab,
1231+
giving a more perceptually uniform result
1232+
with no purple cast at all.
1233+
1234+
<ul class="lang-css">
1235+
<li><code>linear-gradient(in lab to right, white, #01E)</code></li>
1236+
<li><code>linear-gradient(in srgb to right, white, #01E)</code></li>
1237+
<li><code>linear-gradient(in oklab to right, white, #01E)</code></li>
1238+
</ul>
1239+
1240+
<!-- source: images/rectangular-fff-01e.html-->
1241+
<img src="images/rectangular-fff-01e.png"
1242+
width="360" height="330"
1243+
alt="white to blue gradient in three colorspaces" />
1244+
</div>
1245+
1246+
<div class="example">
1247+
In this example, a linear gradient between the same pair of colors
1248+
#44C and #795 is drawn in three different colorspaces.
1249+
This demonstrates that
1250+
the hue non-linearity of CIE Lab
1251+
affects all bulueish colors,
1252+
not just the gradient from saturated primary blue to white.
1253+
The middle gradient uses gamma-encoded sRGB,
1254+
the result is again too dark at the midpoint,
1255+
and has a slight purplish cast.
1256+
The upper gradient uses CIE Lab,
1257+
which avoids the too-dark midpoint
1258+
but has a significant purple cast;
1259+
while the lower gradient uses OKLab,
1260+
again giving a more perceptually uniform result
1261+
with no purple cast at all.
1262+
1263+
<ul class="lang-css">
1264+
<li><code>linear-gradient(in lab to right, #44C, #795)</code></li>
1265+
<li><code>linear-gradient(in srgb to right, #44C, #795)</code></li>
1266+
<li><code>linear-gradient(in oklab to right, #44C, #795)</code></li>
1267+
</ul>
1268+
1269+
<!-- source: images/rectangular-44c-795.html -->
1270+
<img src="images/rectangular-44c-795.png"
1271+
width="360" height="330"
1272+
alt="blue to green gradient in three colorspaces" />
1273+
</div>
1274+
1275+
Chosing a polar, rather than rectangular, colorspace
1276+
for gradient interpolation
1277+
avoids desaturation
1278+
if the hues of the color stops are far apart.
1279+
Interpolating in a polar colorspaces
1280+
is inherently chroma-preserving,
1281+
although it is easy for the intermediate colors to fall out of gamut;
1282+
they will then be gamut mapped
1283+
to bring them back into gamut.
1284+
1285+
<div class="example">
1286+
In this example, a linear gradient between the same pair of colors
1287+
#A37 and #595 is drawn in five different colorspaces,
1288+
two of them polar.
1289+
From top to bottom:
1290+
CIE LCH, CIE Lab, sRGB, OKLab, OKLCH.
1291+
1292+
The rectangular spaces have a greyish midpoint,
1293+
while the intermediate colors in the polar spaces
1294+
follow a curved, chroma-preserving path.
1295+
1296+
<ul class="lang-css">
1297+
<li><code>linear-gradient(in lch to right, #A37, #595)</code></li>
1298+
<li><code>linear-gradient(in lab to right, #A37, #595)</code></li>
1299+
<li><code>linear-gradient(in srgb to right, #A37, #595)</code></li>
1300+
<li><code>linear-gradient(in oklab to right, #A37, #595)</code></li>
1301+
<li><code>linear-gradient(in oklch to right, #A37, #595)</code></li>
1302+
</ul>
1303+
1304+
<!-- source: images/polar-a37-595.html -->
1305+
<img src="images/polar-a37-595.png"
1306+
width="360" height="538"
1307+
alt="blue to green gradient in three colorspaces" />
1308+
</div>
1309+
11961310
<!--
11971311
████████ ███ ████████ ████ ███ ██
11981312
██ ██ ██ ██ ██ ██ ██ ██ ██ ██

‎css-images-4/images/polar-a37-595.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<title>Effect of Interpolation Colorspace on Gradient between #A37 and #595: polar</title>
3+
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
4+
See https://colorjs.io/apps/gradients/?color1=%23A37&color2=%23595
5+
and set gamut mapping ON, 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: linear-gradient(to right, rgb(66.67% 20% 46.67%), rgb(65.38% 21.54% 46.15%), rgb(64.1% 23.08% 45.64%), rgb(62.82% 24.62% 45.13%), rgb(61.54% 26.15% 44.62%), rgb(60.26% 27.69% 44.1%), rgb(58.97% 29.23% 43.59%), rgb(57.69% 30.77% 43.08%), rgb(56.41% 32.31% 42.56%), rgb(55.13% 33.85% 42.05%), rgb(53.85% 35.38% 41.54%), rgb(52.56% 36.92% 41.03%), rgb(51.28% 38.46% 40.51%), rgb(50% 40% 40%), rgb(48.72% 41.54% 39.49%), rgb(47.44% 43.08% 38.97%), rgb(46.15% 44.62% 38.46%), rgb(44.87% 46.15% 37.95%), rgb(43.59% 47.69% 37.44%), rgb(42.31% 49.23% 36.92%), rgb(41.03% 50.77% 36.41%), rgb(39.74% 52.31% 35.9%), rgb(38.46% 53.85% 35.38%), rgb(37.18% 55.38% 34.87%), rgb(35.9% 56.92% 34.36%), rgb(34.62% 58.46% 33.85%), rgb(33.33% 60% 33.33%));
14+
}
15+
#oklab {
16+
background: linear-gradient(to right, rgb(66.67% 20% 46.67%), rgb(65.99% 22.58% 46.32%), rgb(65.28% 24.91% 45.96%), rgb(64.55% 27.05% 45.59%), rgb(63.79% 29.05% 45.21%), rgb(62.99% 30.93% 44.82%), rgb(62.17% 32.73% 44.42%), rgb(61.32% 34.44% 44.01%), rgb(60.42% 36.08% 43.59%), rgb(59.49% 37.67% 43.16%), rgb(58.53% 39.2% 42.71%), rgb(57.51% 40.7% 42.25%), rgb(56.46% 42.15% 41.78%), rgb(55.35% 43.57% 41.3%), rgb(54.19% 44.96% 40.8%), rgb(52.98% 46.32% 40.28%), rgb(51.7% 47.65% 39.75%), rgb(50.36% 48.97% 39.2%), rgb(48.94% 50.26% 38.64%), rgb(47.44% 51.53% 38.05%), rgb(45.84% 52.78% 37.45%), rgb(44.14% 54.02% 36.83%), rgb(42.32% 55.24% 36.18%), rgb(40.36% 56.45% 35.51%), rgb(38.23% 57.64% 34.81%), rgb(35.9% 58.83% 34.09%), rgb(33.33% 60% 33.33%));
17+
}
18+
#oklch {
19+
background: linear-gradient(to right, rgb(66.67% 20% 46.67%), rgb(67.51% 20.1% 44.89%), rgb(68.29% 20.25% 43.09%), rgb(69.01% 20.46% 41.28%), rgb(69.67% 20.73% 39.45%), rgb(70.27% 21.06% 37.6%), rgb(70.81% 21.45% 35.74%), rgb(71.28% 21.9% 33.86%), rgb(71.7% 22.41% 31.96%), rgb(72.05% 22.97% 30.03%), rgb(72.34% 23.6% 28.08%), rgb(72.56% 24.28% 26.08%), rgb(72.72% 25.01% 24.05%), rgb(72.82% 25.78% 21.94%), rgb(72.85% 26.6% 19.76%), rgb(72.82% 27.46% 17.47%), rgb(72.73% 28.35% 15.01%), rgb(72.57% 29.28% 12.3%), rgb(72.35% 30.23% 9.17%), rgb(72.06% 31.2% 5.1%), rgb(71.72% 32.2% 0%), rgb(71.31% 33.21% 0%), rgb(70.26% 34.66% 0%), rgb(68.87% 36.24% 0%), rgb(67.63% 37.63% 0%), rgb(66.57% 38.85% 0%), rgb(65.65% 39.93% 0%), rgb(64.83% 40.92% 0%), rgb(64.09% 41.83% 0%), rgb(63.39% 42.71% 0%), rgb(62.72% 43.54% 0%), rgb(62.06% 44.36% 0%), rgb(61.39% 45.16% 0%), rgb(60.69% 45.95% 0%), rgb(59.93% 46.75% 0%), rgb(59.09% 47.57% 0%), rgb(58.13% 48.42% 0%), rgb(57.05% 49.28% 0%), rgb(55.82% 50.17% 0%), rgb(54.46% 51.05% 0%), rgb(53.05% 51.89% 0%), rgb(51.61% 52.72% 0.82%), rgb(50.12% 53.52% 6.76%), rgb(48.6% 54.29% 10.83%), rgb(47.03% 55.04% 14.1%), rgb(45.43% 55.76% 16.98%), rgb(43.8% 56.45% 19.63%), rgb(42.13% 57.12% 22.12%), rgb(40.43% 57.75% 24.5%), rgb(38.7% 58.36% 26.8%), rgb(36.93% 58.93% 29.03%), rgb(35.15% 59.48% 31.2%), rgb(33.33% 60% 33.33%))
20+
}
21+
#cielab {
22+
background: linear-gradient(to right, rgb(66.67% 20% 46.67%), rgb(65.88% 22.68% 46.24%), rgb(65.08% 25.08% 45.8%), rgb(64.25% 27.28% 45.36%), rgb(63.4% 29.32% 44.91%), rgb(62.52% 31.23% 44.46%), rgb(61.62% 33.04% 44.01%), rgb(60.69% 34.77% 43.55%), rgb(59.73% 36.42% 43.08%), rgb(58.74% 38.01% 42.61%), rgb(57.72% 39.54% 42.13%), rgb(56.66% 41.03% 41.64%), rgb(55.57% 42.48% 41.15%), rgb(54.43% 43.89% 40.65%), rgb(53.25% 45.26% 40.15%), rgb(52.03% 46.61% 39.63%), rgb(50.75% 47.92% 39.11%), rgb(49.41% 49.21% 38.58%), rgb(48.01% 50.48% 38.04%), rgb(46.54% 51.73% 37.49%), rgb(45% 52.96% 36.93%), rgb(43.37% 54.17% 36.36%), rgb(41.63% 55.36% 35.78%), rgb(39.79% 56.54% 35.19%), rgb(37.81% 57.71% 34.58%), rgb(35.67% 58.86% 33.97%), rgb(33.33% 60% 33.33%));
23+
}
24+
#cielch {
25+
background: linear-gradient(to right, rgb(66.67% 20% 46.67%), rgb(68.29% 20.18% 43.81%), rgb(69.56% 20.76% 40.95%), rgb(70.5% 21.72% 38.13%), rgb(71.1% 23% 35.36%), rgb(71.4% 24.55% 32.67%), rgb(71.41% 26.3% 30.07%), rgb(71.13% 28.19% 27.58%), rgb(70.6% 30.18% 25.22%), rgb(69.81% 32.21% 23%), rgb(68.8% 34.27% 20.93%), rgb(67.58% 36.32% 19.04%), rgb(66.17% 38.34% 17.36%), rgb(64.58% 40.32% 15.93%), rgb(62.83% 42.25% 14.82%), rgb(60.93% 44.12% 14.07%), rgb(58.91% 45.93% 13.78%), rgb(56.76% 47.66% 13.97%), rgb(54.51% 49.32% 14.68%), rgb(52.17% 50.9% 15.86%), rgb(49.73% 52.41% 17.49%), rgb(47.22% 53.85% 19.48%), rgb(44.62% 55.22% 21.79%), rgb(41.93% 56.52% 24.37%), rgb(39.17% 57.74% 27.18%), rgb(36.3% 58.9% 30.17%), rgb(33.33% 60% 33.33%));
26+
}
27+
</style>
28+
29+
<div class="gradient" id="cielch"></div>
30+
<div class="gradient" id="cielab"></div>
31+
<div class="gradient" id="srgb"></div>
32+
<div class="gradient" id="oklab"></div>
33+
<div class="gradient" id="oklch"></div>

‎css-images-4/images/polar-a37-595.png

267 KB
Loading

‎css-images-4/images/rectangular-44c-795.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 #44C and #795: rectangular</title>
3+
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
4+
See https://colorjs.io/apps/gradients/?color1=%2344C&color2=%23795
5+
and set gamut mapping off, output space off, steps 6 deltaE -->
6+
<style>
7+
div.gradient {
8+
width: 400px;
9+
height: 120px;
10+
margin: 0;
11+
}
12+
#srgb {
13+
background: linear-gradient(to right, rgb(26.67% 26.67% 80%), rgb(27.5% 28.06% 78.06%), rgb(28.33% 29.44% 76.11%), rgb(29.17% 30.83% 74.17%), rgb(30% 32.22% 72.22%), rgb(30.83% 33.61% 70.28%), rgb(31.67% 35% 68.33%), rgb(32.5% 36.39% 66.39%), rgb(33.33% 37.78% 64.44%), rgb(34.17% 39.17% 62.5%), rgb(35% 40.56% 60.56%), rgb(35.83% 41.94% 58.61%), rgb(36.67% 43.33% 56.67%), rgb(37.5% 44.72% 54.72%), rgb(38.33% 46.11% 52.78%), rgb(39.17% 47.5% 50.83%), rgb(40% 48.89% 48.89%), rgb(40.83% 50.28% 46.94%), rgb(41.67% 51.67% 45%), rgb(42.5% 53.06% 43.06%), rgb(43.33% 54.44% 41.11%), rgb(44.17% 55.83% 39.17%), rgb(45% 57.22% 37.22%), rgb(45.83% 58.61% 35.28%), rgb(46.67% 60% 33.33%));
14+
}
15+
#oklab {
16+
background: linear-gradient(to right, rgb(26.67% 26.67% 80%), rgb(26.75% 27.86% 79.25%), rgb(26.85% 29.01% 78.49%), rgb(26.97% 30.1% 77.73%), rgb(27.1% 31.14% 76.96%), rgb(27.26% 32.15% 76.19%), rgb(27.44% 33.12% 75.42%), rgb(27.63% 34.06% 74.64%), rgb(27.85% 34.97% 73.86%), rgb(28.08% 35.85% 73.07%), rgb(28.33% 36.71% 72.28%), rgb(28.59% 37.55% 71.48%), rgb(28.88% 38.36% 70.68%), rgb(29.18% 39.15% 69.87%), rgb(29.49% 39.93% 69.05%), rgb(29.82% 40.68% 68.23%), rgb(30.17% 41.42% 67.4%), rgb(30.53% 42.15% 66.57%), rgb(30.9% 42.86% 65.73%), rgb(31.29% 43.56% 64.88%), rgb(31.7% 44.24% 64.02%), rgb(32.11% 44.92% 63.15%), rgb(32.54% 45.58% 62.28%), rgb(32.97% 46.23% 61.39%), rgb(33.42% 46.87% 60.5%), rgb(33.89% 47.5% 59.59%), rgb(34.36% 48.12% 58.68%), rgb(34.84% 48.73% 57.75%), rgb(35.33% 49.33% 56.81%), rgb(35.83% 49.92% 55.86%), rgb(36.34% 50.51% 54.89%), rgb(36.86% 51.09% 53.91%), rgb(37.38% 51.66% 52.91%), rgb(37.92% 52.23% 51.9%), rgb(38.46% 52.78% 50.87%), rgb(39% 53.33% 49.81%), rgb(39.56% 53.88% 48.74%), rgb(40.12% 54.42% 47.65%), rgb(40.69% 54.95% 46.53%), rgb(41.26% 55.48% 45.38%), rgb(41.84% 56% 44.21%), rgb(42.43% 56.52% 43%), rgb(43.02% 57.03% 41.76%), rgb(43.62% 57.53% 40.48%), rgb(44.22% 58.04% 39.16%), rgb(44.82% 58.53% 37.79%), rgb(45.43% 59.03% 36.37%), rgb(46.05% 59.52% 34.89%), rgb(46.67% 60% 33.33%));
17+
}
18+
#cielab {
19+
background: linear-gradient(to right, rgb(26.67% 26.67% 80%), rgb(29.12% 28.09% 78.17%), rgb(31.25% 29.51% 76.33%), rgb(33.13% 30.92% 74.5%), rgb(34.8% 32.32% 72.66%), rgb(36.29% 33.72% 70.83%), rgb(37.64% 35.12% 68.99%), rgb(38.86% 36.51% 67.14%), rgb(39.95% 37.9% 65.3%), rgb(40.94% 39.28% 63.44%), rgb(41.84% 40.67% 61.59%), rgb(42.64% 42.05% 59.72%), rgb(43.36% 43.43% 57.84%), rgb(44% 44.81% 55.95%), rgb(44.56% 46.2% 54.05%), rgb(45.06% 47.57% 52.13%), rgb(45.49% 48.95% 50.19%), rgb(45.85% 50.33% 48.23%), rgb(46.14% 51.71% 46.24%), rgb(46.38% 53.09% 44.21%), rgb(46.56% 54.47% 42.15%), rgb(46.67% 55.85% 40.05%), rgb(46.73% 57.24% 37.88%), rgb(46.73% 58.62% 35.65%), rgb(46.67% 60% 33.33%))
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/rectangular-44c-795.png

181 KB
Loading

‎css-images-4/images/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 #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 off, steps 6 deltaE -->
6+
<style>
7+
div.gradient {
8+
width: 400px;
9+
height: 120px;
10+
margin: 0;
11+
}
12+
#srgb {
13+
background: linear-gradient(to right, 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: linear-gradient(to right, 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: linear-gradient(to right, 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/rectangular-f01-081.png

176 KB
Loading

‎css-images-4/images/rectangular-fff-01e.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 #FF and #0iE: rectangular</title>
3+
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
4+
See https://colorjs.io/apps/gradients/?color1=white&color2=%2301E
5+
and set gamut mapping ON, output space off, steps 6 deltaE -->
6+
<style>
7+
div.gradient {
8+
width: 400px;
9+
height: 120px;
10+
margin: 0;
11+
}
12+
#srgb {
13+
background: linear-gradient(to right, rgb(100% 100% 100%), rgb(95.24% 95.56% 99.68%), rgb(90.48% 91.11% 99.37%), rgb(85.71% 86.67% 99.05%), rgb(80.95% 82.22% 98.73%), rgb(76.19% 77.78% 98.41%), rgb(71.43% 73.33% 98.1%), rgb(66.67% 68.89% 97.78%), rgb(61.9% 64.44% 97.46%), rgb(57.14% 60% 97.14%), rgb(52.38% 55.56% 96.83%), rgb(47.62% 51.11% 96.51%), rgb(42.86% 46.67% 96.19%), rgb(38.1% 42.22% 95.87%), rgb(33.33% 37.78% 95.56%), rgb(28.57% 33.33% 95.24%), rgb(23.81% 28.89% 94.92%), rgb(19.05% 24.44% 94.6%), rgb(14.29% 20% 94.29%), rgb(9.52% 15.56% 93.97%), rgb(4.76% 11.11% 93.65%), rgb(0% 6.67% 93.33%));
14+
}
15+
#oklab {
16+
background: linear-gradient(to right, rgb(100% 100% 100%), rgb(94.66% 96.59% 100%), rgb(89.36% 93.16% 100%), rgb(84.09% 89.72% 100%), rgb(78.86% 86.27% 100%), rgb(73.67% 82.79% 100%), rgb(68.52% 79.28% 100%), rgb(63.41% 75.75% 100%), rgb(58.33% 72.17% 100%), rgb(53.29% 68.56% 100%), rgb(48.28% 64.9% 100%), rgb(43.3% 61.17% 99.88%), rgb(38.36% 57.36% 99.47%), rgb(33.44% 53.47% 98.99%), rgb(28.54% 49.45% 98.46%), rgb(23.64% 45.27% 97.88%), rgb(18.74% 40.9% 97.24%), rgb(13.8% 36.23% 96.55%), rgb(8.75% 31.14% 95.82%), rgb(3.46% 25.37% 95.04%), rgb(0.08% 18.25% 94.21%), rgb(0% 6.67% 93.33%));
17+
}
18+
#cielab {
19+
background: linear-gradient(to right, rgb(100% 100% 100%), rgb(98.56% 97.74% 99.99%), rgb(97.11% 95.5% 99.96%), rgb(95.65% 93.25% 99.93%), rgb(94.18% 91.02% 99.89%), rgb(92.7% 88.79% 99.84%), rgb(91.2% 86.57% 99.78%), rgb(89.7% 84.36% 99.72%), rgb(88.18% 82.15% 99.64%), rgb(86.64% 79.95% 99.56%), rgb(85.1% 77.76% 99.47%), rgb(83.54% 75.58% 99.38%), rgb(81.96% 73.4% 99.27%), rgb(80.37% 71.23% 99.16%), rgb(78.76% 69.07% 99.04%), rgb(77.13% 66.91% 98.92%), rgb(75.48% 64.76% 98.79%), rgb(73.81% 62.61% 98.65%), rgb(72.12% 60.47% 98.5%), rgb(70.41% 58.34% 98.35%), rgb(68.67% 56.21% 98.19%), rgb(66.91% 54.09% 98.03%), rgb(65.11% 51.98% 97.86%), rgb(63.29% 49.86% 97.68%), rgb(61.42% 47.76% 97.5%), rgb(59.53% 45.65% 97.31%), rgb(57.58% 43.55% 97.11%), rgb(55.6% 41.45% 96.91%), rgb(53.56% 39.35% 96.71%), rgb(51.46% 37.24% 96.5%), rgb(49.3% 35.14% 96.28%), rgb(47.06% 33.03% 96.06%), rgb(44.74% 30.9% 95.84%), rgb(42.31% 28.77% 95.6%), rgb(39.77% 26.62% 95.37%), rgb(37.07% 24.45% 95.13%), rgb(34.19% 22.24% 94.89%), rgb(31.07% 19.99% 94.64%), rgb(27.62% 17.67% 94.38%), rgb(23.7% 15.25% 94.13%), rgb(19.01% 12.7% 93.87%), rgb(12.74% 9.91% 93.6%), rgb(0% 6.67% 93.33%));
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/rectangular-fff-01e.png

173 KB
Loading

0 commit comments

Comments
 (0)