Skip to content

Commit e43fb45

Browse files
svgeesussvgeesus
committed
update conversions
1 parent 8c739a5 commit e43fb45

File tree

5 files changed

+101
-4
lines changed

5 files changed

+101
-4
lines changed

‎css-color-4/contrast.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<html>
2+
<script src="math.js"></script>
3+
<script src="conversions.js"></script>
4+
<script src="utilities.js"></script>
5+
<script>
6+
// make 9 steps in sRGB, compare to 9 steps in D65-adapted lab
7+
// odd number of steps so we have an exact 50%
8+
9+
for (var i =0; i <9; i++) {
10+
console.log(100 * i / 8);
11+
}
12+
for (var i =0; i <9; i++) {
13+
var lab = [100 * i / 8, 0, 0];
14+
// console.log(lab);
15+
console.log(i);
16+
var xyz = Lab_to_XYZ(lab);
17+
// okay, bradford
18+
var xyz2 = D50_to_D65(xyz);
19+
var linrgb = XYZ_to_lin_sRGB(xyz2);
20+
// console.log(linrgb);
21+
var rgb = gam_sRGB(linrgb);
22+
console.log(rgb);
23+
}
24+
</script>
25+
<style>
26+
body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%); padding: 20px;}
27+
#rgb div, #lab div {width:60px; height: 60px; display: inline-block; padding:10px; margin: 10px; }
28+
h2 {color: rgb(243, 235, 166);}
29+
</style>
30+
<h2>Equal steps in sRGB</h2>
31+
<div id="rgb">
32+
<div style="background-color:rgb(0,0,0)"> </div>
33+
<div style="background-color:rgb(12.5%, 12.5%, 12.5%)"> </div>
34+
<div style="background-color:rgb(25%, 25%, 25%)"> </div>
35+
<div style="background-color:rgb(37.5%, 37.5%, 37.5%)"> </div>
36+
<div style="background-color:rgb(50%, 50%, 50%)"> </div>
37+
<div style="background-color:rgb(62.5%, 62.5%, 62.5%)"> </div>
38+
<div style="background-color:rgb(75%, 75%, 75%)"> </div>
39+
<div style="background-color:rgb(87.5%, 87.5%, 87.5%)"> </div>
40+
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
41+
</div>
42+
<h2>Equal steps in Lab</h2>
43+
<div id="lab">
44+
<div style="background-color:rgb(0,0,0)"> </div>
45+
<div style="background-color:rgb(12.749552497781125%, 12.749552497781125%, 12.749552497781125%)"> </div>
46+
<div style="background-color:rgb(23.252523386167795%, 23.252523386167795%, 23.252523386167795%)"> </div>
47+
<div style="background-color:rgb(34.59944594333101%, 34.59944594333101%, 34.59944594333101%)"> </div>
48+
<div style="background-color:rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%)"> </div>
49+
<div style="background-color:rgb(59.2564772904724%, 59.2564772904724%, 59.2564772904724%)"> </div>
50+
<div style="background-color:rgb(72.39290209364759%, 72.39290209364759%, 72.39290209364759%)"> </div>
51+
<div style="background-color:rgb(85.98956900584421%, 85.98956900584421%, 85.98956900584421%)"> </div>
52+
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
53+
</div>
54+
</html>

‎css-color-4/conversions.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// Sample code for color conversions
2+
// Conversion can also be done using ICC profiles and a Color Management System
3+
// For clarity, a library is used for matrix manipulations
4+
15
// sRGB-related functions
26

37
function lin_sRGB(RGB) {

‎css-color-4/grays.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<script src="math.js"></script>
33
<script src="conversions.js"></script>
44
<script>
5-
// make 7 steps in sRGB, compare to 7 steps in D65-adapted lab
5+
// make 9 steps in sRGB, compare to 9 steps in D65-adapted lab
66
// odd number of steps so we have an exact 50%
77

88
for (var i =0; i <9; i++) {

‎css-color-4/utilities.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// utility functions for color conversions
2+
import "conversions.js";
3+
4+
function sRGB_to_luminance(RGB) {
5+
// convert an array of gamma-corrected sRGB values
6+
// in the 0.0 to 1.0 range
7+
// to linear-light sRGB, then to CIE XYZ
8+
// and return luminance (the Y value)
9+
10+
var XYZ = lin_sRGB_to_XYZ(lin_sRGB(RGB));
11+
return XYZ[1];
12+
}
13+
14+
function contrast(RGB1, RGB2) {
15+
// return WCAG 2.1 contrast ratio
16+
// https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
17+
// for two sRGB values
18+
// given as arrays of 0.0 to 1.0
19+
20+
var L1 = sRGB_to_luminance(RGB1);
21+
var L2 = sRGB_to_luminance(RGB2);
22+
23+
if L1 > L2 return (L1 + 0.05) / (L2 + 0.05);
24+
return (L2 + 0.05) / (L1 + 0.05);
25+
}
26+
27+
function sRGB_to_LCH(RGB) {
28+
// convert an array of gamma-corrected sRGB values
29+
// in the 0.0 to 1.0 range
30+
// to linear-light sRGB, then to CIE XYZ,
31+
// then adapt from D65 to D50,
32+
// then convert XYZ to CIE Lab
33+
// and finally, convert to CIE LCH
34+
35+
return lin_sRGB_to_XYZ(lin_sRGB(RGB));
36+
}

‎css-color-5/Overview.bs‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,16 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
106106

107107
This function takes, firstly, a single color
108108
(typically a background, but not necessarily),
109-
and then second, a list of two or more colors;
110-
it selects from the list of colors
111-
the one with highest luminance contrast
109+
and then second, a list of colors;
110+
it selects from that list
111+
the color with highest luminance contrast
112112
to the single color.
113113

114114
<div class="example">
115115
<pre class="lang-css">color-contrast(wheat tan, sienna, var(--myAccent), #d2691e)</pre>
116116

117+
The calculation is as follows:
118+
* wheat (#f5deb3) has relative luminance
119+
117120
</div>
118121

0 commit comments

Comments
 (0)