update conversions

w3c · Jun 24, 2019 · e43fb45 · e43fb45
1 parent 8c739a5
commit e43fb45
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 4 deletions.
diff --git a/css-color-4/contrast.html b/css-color-4/contrast.html
@@ -0,0 +1,54 @@
+<html>
+	<script src="math.js"></script>
+    <script src="conversions.js"></script>
+    <script src="utilities.js"></script>
+	<script>
+	// make 9 steps in sRGB, compare to 9 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>
+		body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%);  padding: 20px;}
+		#rgb div, #lab div {width:60px; height: 60px; display: inline-block; padding:10px; margin: 10px;  }
+		h2 {color: rgb(243, 235, 166);}
+	</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>
diff --git a/css-color-4/conversions.js b/css-color-4/conversions.js
@@ -1,3 +1,7 @@
+// Sample code for color conversions
+// Conversion can also be done using ICC profiles and a Color Management System
+// For clarity, a library is used for matrix manipulations
+
 // sRGB-related functions
 
 function lin_sRGB(RGB) {

diff --git a/css-color-4/grays.html b/css-color-4/grays.html
@@ -2,7 +2,7 @@
 	<script src="math.js"></script>
 	<script src="conversions.js"></script>
 	<script>
-	// make 7 steps in sRGB, compare to 7 steps in D65-adapted lab
+	// make 9 steps in sRGB, compare to 9 steps in D65-adapted lab
 	// odd number of steps so we have an exact 50%
 
 	for (var i =0; i <9; i++) {

diff --git a/css-color-4/utilities.js b/css-color-4/utilities.js
@@ -0,0 +1,36 @@
+// utility functions for color conversions
+import "conversions.js";
+
+function sRGB_to_luminance(RGB) {
+    // convert an array of gamma-corrected sRGB values
+    // in the 0.0 to 1.0 range
+    // to linear-light sRGB, then to CIE XYZ
+    // and return luminance (the Y value)
+
+    var XYZ = lin_sRGB_to_XYZ(lin_sRGB(RGB));
+    return XYZ[1];
+}
+
+function contrast(RGB1, RGB2) {
+    // return WCAG 2.1 contrast ratio
+    // https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+    // for two sRGB values
+    // given as arrays of 0.0 to 1.0
+
+    var L1 = sRGB_to_luminance(RGB1);
+    var L2 = sRGB_to_luminance(RGB2);
+
+    if L1 > L2 return (L1 + 0.05) / (L2 + 0.05);
+    return (L2 + 0.05) / (L1 + 0.05);
+}
+
+function sRGB_to_LCH(RGB) {
+    // convert an array of gamma-corrected sRGB values
+    // in the 0.0 to 1.0 range
+    // to linear-light sRGB, then to CIE XYZ,
+    // then adapt from D65 to D50,
+    // then convert XYZ to CIE Lab
+    // and finally, convert to CIE LCH
+
+    return lin_sRGB_to_XYZ(lin_sRGB(RGB));
+}
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
@@ -106,13 +106,16 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 
 	This function takes, firstly, a single color
 	(typically a background, but not necessarily),
-	and then second, a list of two or more colors;
-	it selects from the list of colors
-	the one with highest luminance contrast
+	and then second, a list of colors;
+	it selects from that list
+	the color with highest luminance contrast
 	to the single color.
 
 	<div class="example">
 		<pre class="lang-css">color-contrast(wheat tan, sienna, var(--myAccent), #d2691e)</pre>
 
+		The calculation is as follows:
+			* wheat (#f5deb3) has relative luminance
+
 	</div>