-
Notifications
You must be signed in to change notification settings - Fork 791
Expand file tree
/
Copy pathpolar-a37-595.html
More file actions
33 lines (32 loc) · 4.94 KB
/
polar-a37-595.html
File metadata and controls
33 lines (32 loc) · 4.94 KB
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
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<title>Effect of Interpolation Colorspace on Gradient between #A37 and #595: polar</title>
<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
See https://colorjs.io/apps/gradients/?color1=%23A37&color2=%23595
and set gamut mapping ON, output space sRGB, steps 6 deltaE -->
<style>
div.gradient {
width: 400px;
height: 120px;
margin: 0;
}
#srgb {
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%));
}
#oklab {
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%));
}
#oklch {
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%))
}
#cielab {
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%));
}
#cielch {
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%));
}
</style>
<div class="gradient" id="cielch"></div>
<div class="gradient" id="cielab"></div>
<div class="gradient" id="srgb"></div>
<div class="gradient" id="oklab"></div>
<div class="gradient" id="oklch"></div>