clarify that HSL, HWB and named colors resolve to sRGB. Update conversions.

Author: svgeesus

css-color-4/Overview.bs

@@ -258,12 +258,12 @@ Resolving Color values</h2>
 <h2 id='numeric-rgb'>
 RGB Colors</h2>
 
-	There are several methods of directly specifying a color in terms of its RGBA channels.
+	There are several methods of directly specifying an sRGB color in terms of its RGBA channels.
 
 <h3 id='rgb-functions'>
 The RGB functions: ''rgb()'' and ''rgba()''</h3>
 
-	The ''rgb()'' function defines an RGB color by specifying the red, green, and blue channels directly.
+	The ''rgb()'' function defines an sRGB color by specifying the red, green, and blue channels directly.
 	Its syntax is:
 
 	<pre class='prod'>
@@ -396,6 +396,8 @@ Named Colors</h2>
 	As usual for CSS-defined <<ident>>s,
 	all of these keywords are case-insensitive.
 
+	The names resolve to colors in sRGB.
+
 	16 of CSS's named colors come from HTML originally:
 	aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
 	Most of the rest
@@ -842,6 +844,8 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 	It is also easier to create sets of matching colors
 	(by keeping the hue the same and varying the saturation and lightness).
 
+	HSL colors resolve to sRGB.
+
 	<div class='example'>
 		For example, the following colors can all be generated off of the basic "green" hue,
 		just by varying the other two arguments:
@@ -868,9 +872,9 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 
 
 <h3 id='hsl-to-rgb'>
-Converting HSL colors to RGB colors</h3>
+Converting HSL colors to sRGB colors</h3>
 
-	Converting an HSL color to RGB is straightforward mathematically.
+	Converting an HSL color to sRGB is straightforward mathematically.
 	Here's a simple implementation of the conversion algorithm in JavaScript.
 	For simplicity, this algorithm assumes that the hue has been normalized to
 	a number in the half-open range [0, 6),
@@ -922,6 +926,8 @@ Examples of HSL colors</h3>
 	In each table, the X axis represents the saturation
 	while the Y axis represents the lightness.
 
+	<div class="issue">The conversions in the table below are known to contain errors. They are copied from CSS Color 3, which aso had the same errors. Those colors were supposedly computed by a program in ABC. A future spec will correctly compute those colors. Meanwhile, please note that thses conversions are non-normative examples.</div>
+
 	<div style="overflow: hidden;" class="color-table">
 		<table>
 			<tr>
@@ -1259,6 +1265,8 @@ HWB Colors: ''hwb()'' function</h2>
 	Many color-pickers are based on the HWB color system,
 	due to its intuitiveness.
 
+	HWB colors resolve to sRGB.
+
 	<figure>
 		<img src="images/color-picker.png">
 		<figcaption>
@@ -1300,9 +1308,9 @@ HWB Colors: ''hwb()'' function</h2>
 	without any hint of the chosen hue.
 
 <h3 id='hwb-to-rgb'>
-Converting HWB colors to RGB colors</h3>
+Converting HWB colors to sRGB colors</h3>
 
-	Converting an HWB color to RGB is straightforward,
+	Converting an HWB color to sRGB is straightforward,
 	and related to how one converts HSL to RGB.
 	The following Javascript implementation of the algorithm assumes that the white and black components have already been normalized,
 	so their sum is no larger than 100%,

css-color-4/conversions.js

@@ -100,15 +100,15 @@ function lin_ProPhoto(RGB) {
 	return RGB.map(function (val) {
 	  return Math.pow(val, 1.8);
 	});
-  }
+}
 
 function gam_ProPhoto(RGB) {
 	// convert an array of linear-light ProPhotoRGB  in the range 0.0-1.0
 	// to gamma corrected form
 	return RGB.map(function (val) {
 		return Math.pow(val, 1/1.8);
 	});
-  }
+}
 
 function lin_ProPhoto_to_XYZ(rgb) {
 	// convert an array of linear-light ProPhotoRGB values to CIE XYZ
@@ -121,15 +121,60 @@ function lin_ProPhoto_to_XYZ(rgb) {
 	]);
 
 	return Math.multiply(M, rgb).valueOf();
-  }
+}
 
 function XYZ_to_lin_ProPhoto(XYZ) {
 	// convert XYZ to linear-light ProPhotoRGB
 	var M = Math.matrix([
   	[  1.3457989731028281,  -0.25558010007997534,  -0.05110628506753401 ],
   	[ -0.5446224939028347,   1.5082327413132781,    0.02053603239147973 ],
   	[  0.0,                  0.0,                   1.2119675456389454  ]
+	]);
+
+	return Math.multiply(M, XYZ).valueOf();
+}
+
+// a98rgb functions
+
+function lin_a98rgb(RGB) {
+	// convert an array of a98rgb values in the range 0.0 - 1.0
+	// to linear light (un-companded) form.
+	return RGB.map(function (val) {
+	  return Math.pow(val, 563/256);
+	});
+}
 
+function gam_a98rgb(RGB) {
+	// convert an array of linear-light a98rgb  in the range 0.0-1.0
+	// to gamma corrected form
+	return RGB.map(function (val) {
+		return Math.pow(val, 256/563);
+	});
+}
+
+function lin_a98rgb_to_XYZ(rgb) {
+	// convert an array of linear-light ProPhotoRGB values to CIE XYZ
+	// using  D50 (so no chromatic adaptation needed afterwards)
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	var M = Math.matrix([
+	[ 0.5766690429101305,   0.1855582379065463,   0.1882286462349947  ],
+	[ 0.29734497525053605,  0.6273635662554661,   0.07529145849399788 ]​,
+	[ 0.02703136138641234,  0.07068885253582723,  0.9913375368376388  ]
+	]);
+
+	return Math.multiply(M, rgb).valueOf();
+}
+
+function XYZ_to_lin_a98rgb(XYZ) {
+	// convert XYZ to linear-light ProPhotoRGB
+	var M = Math.matrix([
+	[  2.0415879038107465,    -0.5650069742788596,   -0.34473135077832956 ],
+​	 [ -0.9692436362808795,     1.8759675015077202,    0.04155505740717557 ],
+​	 [  0.013444280632031142,  -0.11836239223101838,   1.0151749943912054  ]
+	]);
+
+	return Math.multiply(M, XYZ).valueOf();
+}
 
 //Rec. 2020-related functions
 

css-color-4/matrixmaker.html

@@ -13,16 +13,15 @@
 
 
 		// these are for ITU Rec BT.2020
-		/*
-		const xred=0.708 ;
-		const yred=0.292 ;
+		// const xred=0.708 ;
+		// const yred=0.292 ;
 
-		const xgreen=0.170 ;
-		const ygreen=0.797 ;
+		// const xgreen=0.170 ;
+		// const ygreen=0.797 ;
+
+		// const xblue=0.131 ;
+		// const yblue=0.046 ;
 
-		const xblue=0.131 ;
-		const yblue=0.046 ;
-		*/
 
 		// these are for DCI P3
 		// const xred=0.680 ;
@@ -35,17 +34,17 @@
 		// const yblue=0.060 ;
 
 		// ProPhoto
-		const xred=0.7347 ;
-		const yred=0.2653 ;
+		// const xred=0.7347 ;
+		// const yred=0.2653 ;
 
-		const xgreen=0.1596 ;
-		const ygreen=0.8404  ;
+		// const xgreen=0.1596 ;
+		// const ygreen=0.8404  ;
 
-		const xblue=0.0366 ;
-		const yblue=0.0001  ;
+		// const xblue=0.0366 ;
+		// const yblue=0.0001  ;
 
 		// AdobeRGB, for testing
-		/*
+
 		const xred=0.640 ;
 		const yred=0.330 ;
 
@@ -54,15 +53,15 @@
 
 		const xblue=0.150 ;
 		const yblue=0.060 ;
-		*/
+
 
 		// D65
-		// const xwhite=0.3127 ;
-		// const ywhite=0.3290 ;
+		const xwhite=0.3127 ;
+		const ywhite=0.3290 ;
 
 		// D50
-		const xwhite=0.3457  ;
-		const ywhite=0.3585 ;
+		// const xwhite=0.3457  ;
+		// const ywhite=0.3585 ;
 
 
 		// Relative XYZ values. Copy-paste-o-rama