-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcolor-oklab.html
66 lines (54 loc) · 2.49 KB
/
color-oklab.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<body>
<!--
// oklab(60% 0.225 0.126)
// color(display-p3 0.878 0.144 0.09)
// color(display-p3 0.878 0.144 0.09) -- no gamut mapping
// oklab(70% 0.225 0.126)
// color(display-p3 1.02 0.317 0.239)
// color(display-p3 1 0.317 0.239) -- gamut mapped
// oklab(80% 0.225 0.126)
// color(display-p3 1.164 0.46 0.366)
// color(display-p3 1 0.564 0.465)
// oklab(90% 0.225 0.126)
// color(display-p3 1.31 0.597 0.491)
// color(display-p3 1 0.774 0.71)
// oklab(99% 0.225 0.126)
// color(display-p3 1.443 0.719 0.605)
// color(srgb-linear 2.732 0.399 0.273)
-->
<p>The following boxes show the rendering of the sequence of colors:</p>
<ul>
<li>oklab(60% 0.225 0.126)</li>
<li>oklab(70% 0.225 0.126)</li>
<li>oklab(80% 0.225 0.126)</li>
<li>oklab(90% 0.225 0.126)</li>
<li>oklab(99% 0.225 0.126)</li>
</ul>
</p>
<p>
<canvas style="width:32px; height:32px; background-color:oklab(60% 0.255 0.126);"></canvas>
<canvas style="width:32px; height:32px; background-color:oklab(70% 0.255 0.126);"></canvas>
<canvas style="width:32px; height:32px; background-color:oklab(80% 0.255 0.126);"></canvas>
<canvas style="width:32px; height:32px; background-color:oklab(90% 0.255 0.126);"></canvas>
<canvas style="width:32px; height:32px; background-color:oklab(99% 0.255 0.126);"></canvas>
Browser rendering of color (potentially unclamped!) <img src="hlg.avif" style="width:1px; height:1px;">
</p>
<p>
<canvas style="width:32px; height:32px; background-color:color(display-p3 0.878 0.144 0.09);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1.0 0.317 0.239);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1.0 0.46 0.366);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1.0 0.597 0.491);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1.0 0.719 0.605);"></canvas>
Clamping of the color to display-p3
</p>
<p>
<canvas style="width:32px; height:32px; background-color:color(display-p3 0.878 0.144 0.09);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1 0.317 0.239);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1 0.564 0.465);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1 0.774 0.71);"></canvas>
<canvas style="width:32px; height:32px; background-color:color(display-p3 1 0.942 0.923);"></canvas>
CSS gamut mapping of color
</p>
</body>
</html>