forked from w3c/csswg-drafts
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrectangular-f01-081.html
25 lines (24 loc) · 2.92 KB
/
rectangular-f01-081.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<title>Effect of Interpolation Colorspace on Gradient between #F01 and #081: rectangular</title>
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
See https://colorjs.io/apps/gradients/?color1=%23f01&color2=%23081
and set gamut mapping off, output space off, steps 6 deltaE -->
<style>
div.gradient {
width: 400px;
height: 120px;
margin: 0;
}
#srgb {
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%));
}
#oklab {
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%));
}
#cielab {
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%))
}
</style>
<div class="gradient" id="cielab"></div>
<div class="gradient" id="srgb"></div>
<div class="gradient" id="oklab"></div>