forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgrays.html
53 lines (52 loc) · 2.27 KB
/
grays.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
<html>
<script src="math.js"></script>
<script src="conversions.js"></script>
<script>
// make 7 steps in sRGB, compare to 7 steps in D65-adapted lab
// odd number of steps so we have an exact 50%
for (var i =0; i <9; i++) {
console.log(100 * i / 8);
}
for (var i =0; i <9; i++) {
var lab = [100 * i / 8, 0, 0];
// console.log(lab);
console.log(i);
var xyz = Lab_to_XYZ(lab);
// okay, bradford
var xyz2 = D50_to_D65(xyz);
var linrgb = XYZ_to_lin_sRGB(xyz2);
// console.log(linrgb);
var rgb = gam_sRGB(linrgb);
console.log(rgb);
}
</script>
<style>
// use an L=50 background
#rgb, #lab {background: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%); padding:20px}
#rgb div, #lab div {width:60px; height: 60px; display: inline-block; padding:10px; }
</style>
<h2>Equal steps in sRGB</h2>
<div id="rgb">
<div style="background-color:rgb(0,0,0)"> </div>
<div style="background-color:rgb(12.5%, 12.5%, 12.5%)"> </div>
<div style="background-color:rgb(25%, 25%, 25%)"> </div>
<div style="background-color:rgb(37.5%, 37.5%, 37.5%)"> </div>
<div style="background-color:rgb(50%, 50%, 50%)"> </div>
<div style="background-color:rgb(62.5%, 62.5%, 62.5%)"> </div>
<div style="background-color:rgb(75%, 75%, 75%)"> </div>
<div style="background-color:rgb(87.5%, 87.5%, 87.5%)"> </div>
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
</div>
<h2>Equal steps in Lab</h2>
<div id="lab">
<div style="background-color:rgb(0,0,0)"> </div>
<div style="background-color:rgb(12.749552497781125%, 12.749552497781125%, 12.749552497781125%)"> </div>
<div style="background-color:rgb(23.252523386167795%, 23.252523386167795%, 23.252523386167795%)"> </div>
<div style="background-color:rgb(34.59944594333101%, 34.59944594333101%, 34.59944594333101%)"> </div>
<div style="background-color:rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%)"> </div>
<div style="background-color:rgb(59.2564772904724%, 59.2564772904724%, 59.2564772904724%)"> </div>
<div style="background-color:rgb(72.39290209364759%, 72.39290209364759%, 72.39290209364759%)"> </div>
<div style="background-color:rgb(85.98956900584421%, 85.98956900584421%, 85.98956900584421%)"> </div>
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
</div>
</html>