[css-color-4] Channel keywords are no longer numer OR percentage, w3c#7876

Author: svgeesus

css-color-5/Overview.bs

@@ -795,13 +795,21 @@ then each color channel can <em>either</em> be directly specified,
 or taken from the origin color
 (and possibly modified with [=math functions=]).
 
+
+<wpt>
+	parsing/color-computed-relative-color.html
+	parsing/color-invalid-relative-color.html
+	parsing/color-valid-relative-color.html
+</wpt>
+
 The precise details of each function's changes to accomodate [=relative colors=] are listed below,
 but they all follow a common structure:
 
 * An [=origin color=] can be specified with a ''from <<color>>'' value at the start of the function.
 * If an [=origin color=] is specified,
 	the remaining arguments can either be specified directly, as normal,
-	be specified as a <dfn>channel keyword</dfn> referring to one of the channels of the [=origin color=].
+	be specified as a <dfn>channel keyword</dfn> 
+	referring to one of the channels of the [=origin color=].
 	[=Math functions=] can also use these keywords
 	to do dynamic modifications of the [=origin color's=] channels.
 * [=Relative color=] syntax doesn't change whether an argument is required or optional.
@@ -810,37 +818,38 @@ but they all follow a common structure:
 	(rather than defaulting to ''100%'', as it does in the absolute syntax).
 * Relative color syntax only applies to the modern
 	(space separated components, / separator for alpha) syntax.
-	It cannot be used with <a>legacy color syntax</a>
+	It <em>cannot</em> be used with <a>legacy color syntax</a>
 	and attempting to do so is an error.
 
-If the [=origin color=] was originally specified with a different color function,
-it's first converted into the chosen color function,
-so it has meaningful values for the channels.
-
-<wpt>
-	parsing/color-computed-relative-color.html
-	parsing/color-invalid-relative-color.html
-	parsing/color-valid-relative-color.html
-</wpt>
+Except as specified for individual color functions,
+(for example, hues return an <<angle>>),
+the [=channel keywords=] return a <<number>>; 
+if they were originally specified as a <<percentage>>,
+that percentage is resolved to a <<number>>.
 
 <div class=example>
-	For example, if a theme color is specified as opaque,
-	but in a particular instance you need it to be partially transparent:
+	For example, if a color is specified using <<percentage>>,
+	then RCS in the same colorspace will use the resolved <<number>> form:
 
 	<pre highlight=css>
-	html { --bg-color: blue; }
+	html { --bluegreen: <span class="swatch" style="--color: teal"></span> oklab(54.3% -22.5% -5%); }
 	.overlay {
-		background: rgb(from var(--bg-color) r g b / 80%);
+		background: <span class="swatch" style="--color: rgb(4.696% 39.17% 39.38%)"></span> oklab(from var(--bluegreen) calc(1.0 - l) calc(a * 0.8) b);
 	}
 	</pre>
 
-	In this example, the r, g, and b channels of the [=origin color=] are unchanged,
-	indicated by specifying them with the keywords
-	drawing their values from the [=origin color=],
-	but the opacity is set to ''80%'' to make it slightly transparent,
-	regardless of what the [=origin color's=] opacity was.
+	In this example, the specified percentages are resolved to numbers,
+	giving oklab(0.543 -0.09 -0.02).
+	The resulting RCS color has l = 1 - 0.543 = 0.457,
+	a = -0.09 * 0.8 = -0.072,
+	and b is unchanged at -0.02:
+	oklab(0.457 -0.072 -0.02).
 </div>
 
+If the [=origin color=] was originally specified with a different color function,
+it's first converted into the chosen color function,
+so it has meaningful values for the channels.
+
 <div class=example>
 	By using the [=channel keywords=] in a [=math function=],
 	an [=origin color=] can be manipulated in more advanced ways.
@@ -862,6 +871,24 @@ so it has meaningful values for the channels.
 	due to being used in the ''lch()'' function.
 </div>
 
+<div class=example>
+	For example, if a theme color is specified as opaque,
+	but in a particular instance you need it to be partially transparent:
+
+	<pre highlight=css>
+	html { --bg-color: <span class="swatch" style="--color: blue"></span> blue; }
+	.overlay {
+		background: <span class="swatch" style="--color: rgb(0,0,255,80%)"></span> rgb(from var(--bg-color) r g b / 80%);
+	}
+	</pre>
+
+	In this example, the r, g, and b channels of the [=origin color=] are unchanged,
+	indicated by specifying them with the keywords
+	drawing their values from the [=origin color=],
+	but the opacity is set to ''80%'' to make it slightly transparent,
+	regardless of what the [=origin color's=] opacity was.
+</div>
+
 <div class=example>
 	While most uses of [=relative color=] syntax
 	will use the [=channel keywords=] in their corresponding argument,
@@ -877,12 +904,12 @@ so it has meaningful values for the channels.
 	</pre>
 
 	Using this,
-	''red'' would become ''rgb(30% 30% 30%)'',
-	''lime'' would become ''rgb(59% 59% 59%)'',
-	and ''blue'' would become ''rgb(11% 11% 11%)''.
+	''red'' would become ''rgb(76.5 76.5 76.5)'',
+	''lime'' would become ''rgb(150.45 150.45 150.45)'',
+	and ''blue'' would become ''rgb(150.45 150.45 150.45)''.
 	A more moderate color, like ''darkolivegreen'',
 	which has RGB values ''rgb(85 107 47)'',
-	would become approximately ''rgb(37% 37% 37%)''.
+	would become ''rgb(93.8 93.8 93.8)''.
 
 	(Rough because firstly,
 	although this looks like a luminance calculation,
@@ -919,11 +946,11 @@ Within a [=relative color=] syntax ''rgb()'' function,
 the allowed [=channel keywords=] are:
 
 * <dfn value for="rgb()">r</dfn>, <dfn value for="rgb()">g</dfn>, and <dfn value for="rgb()">b</dfn>
-	are all <<percentage>>s or <<number>>s
+	are all  <<number>>s
 	that correspond to the [=origin color's=] red, green, and blue channels
-	after its conversion to sRGB. For <<number>>s, 255 (or 255.0)
-	is equivalent to 100%.
-* <dfn value for="rgb()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+	after its conversion to sRGB. 
+	255.0 is equivalent to 100%.
+* <dfn value for="rgb()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
 <div class="example">
 	To manipulate color channels in the sRGB color space:
@@ -932,10 +959,12 @@ the allowed [=channel keywords=] are:
 		rgb(from <span class="swatch" style="--color: indianred"></span> indianred 255 g b)
 	</pre>
 
-	This takes the sRGB value of indianred (205 92 92) and replaces the red channel with 255 to give <span class="swatch" style="--color: rgb(255 92 92)"></span>  rgb(255 92 92).
+	This takes the sRGB value of indianred (205 92 92) and replaces 
+	the red channel with 255 to give 
+	<span class="swatch" style="--color: rgb(255 92 92)"></span>  rgb(255 92 92).
 </div>
 
-Relative color syntax is only applicable to the non-legacy RGB syntactic forms.
+Relative sRGB color syntax is <em>only</em> applicable to the non-legacy RGB syntactic forms.
 
 <div class="example invalid">
 	For example, this attempt to use the rgba
@@ -980,9 +1009,10 @@ the allowed [=channel keywords=] are:
 	after its conversion to sRGB,
 	normalized to a [0deg, 360deg) range
 * <dfn value for="hsl()">s</dfn> and <dfn value for="hsl()">l</dfn>
-	are <<percentage>>s or <<number>>s that correspond to the [=origin color's=] HSL saturation and lightness
+	are <<percentage>>s that correspond to the [=origin color's=] 
+	HSL saturation and lightness,
 	after its conversion to sRGB
-* <dfn value for="hsl()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="hsl()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
 <div class="example">
 	This adds 180 degrees to the hue angle, giving a complementary color.
@@ -993,7 +1023,7 @@ the allowed [=channel keywords=] are:
 	lightseagreen is hsl(177deg 70% 41%), so --complement is <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(357deg 70% 41%)
 </div>
 
-Relative color syntax is only applicable to the non-legacy HSL syntactic forms.
+Relative HSL color syntax is only applicable to the non-legacy HSL syntactic forms.
 
 <h3 id="relative-HWB">Relative HWB Colors</h3>
 
@@ -1016,9 +1046,9 @@ the allowed [=channel keywords=] are:
 	after its conversion to sRGB,
 	normalized to a [0deg, 360deg) range
 * <dfn value for="hwb()">w</dfn> and <dfn value for="hwb()">b</dfn>
-	are <<percentage>>s or <<number>>s that correspond to the [=origin color's=] HWB whiteness and blackness
+	are <<percentage>>s that correspond to the [=origin color's=] HWB whiteness and blackness
 	after its conversion to sRGB
-* <dfn value for="hwb()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="hwb()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
 <h3 id="relative-Lab">Relative Lab Colors</h3>
 
@@ -1036,31 +1066,34 @@ The grammar of the ''lab()'' function is extended as follows:
 Within a [=relative color=] syntax ''lab()'' function,
 the allowed [=channel keywords=] are:
 
-* <dfn value for="lab()">l</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="lab()">l</dfn> is a <<number>>
 	that corresponds to the [=origin color's=] CIE Lightness
-* <dfn value for="lab()">a</dfn> and <dfn value for="lab()">b</dfn> are <<percentage>>s or <<number>>s
+* <dfn value for="lab()">a</dfn> and <dfn value for="lab()">b</dfn> are <<number>>s
 	that correspond to the [=origin color's=] CIELab a and b axes
-* <dfn value for="lab()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="lab()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
 <div class="example">
 	Multiple ways to adjust the transparency of a base color:
 
-	* ''lab(from var(--mycolor) l a b / 100%)'' sets the alpha of ''var(--mycolor)'' to 100% regardless of what it originally was.
+	* ''lab(from var(--mycolor) l a b / 100%)'' sets the alpha of ''var(--mycolor)'' to 1.0, regardless of what it originally was.
 	* ''lab(from var(--mycolor) l a b / calc(alpha * 0.8))'' reduces the alpha of ''var(--mycolor)'' by 20% of its original value.
-	* ''lab(from var(--mycolor) l a b / calc(alpha - 20%))'' reduces the alpha of ''var(--mycolor)'' by 20% of 100%.
 
 	Note that all the adjustments are lossless in the sense that no gamut clipping occurs, since lab() encompasses all visible color.
-	This is not true for the alpha adjustments in the sRGB based functions (such as 'rgb()', 'hsl()', or 'hwb()'), which would also convert to sRGB in addition to adjusting the alpha transparency.
+	This is not true for the alpha adjustments in the sRGB based functions 
+	(such as 'rgb()', 'hsl()', or 'hwb()'), 
+	which would also convert to sRGB 
+	as a necessary step for calculation of HSL or HWB,
+	in addition to adjusting the alpha transparency.
 </div>
 
 <div class="example">
 	Fully desaturating a color to gray, keeping the exact same lightness:
 
 	<pre>
 	--mycolor: <span class="swatch" style="--color: orchid"></span> orchid;
-	// orchid is lab(62.753% 52.460 -34.103)
+	// orchid is lab(62.753 52.460 -34.103)
 	--mygray: <span class="swatch" style="--color: rgb(59.515% 59.515% 59.515%)"></span> lab(from var(--mycolor) l 0 0)
-	// mygray is lab(62.753% 0 0) which is rgb(59.515% 59.515% 59.515%)
+	// mygray is lab(62.753 0 0) which is rgb(59.515% 59.515% 59.515%)
 	</pre>
 </div>
 
@@ -1080,11 +1113,11 @@ The grammar of the ''oklab()'' function is extended as follows:
 Within a [=relative color=] syntax ''oklab()'' function,
 the allowed [=channel keywords=] are:
 
-* <dfn value for="oklab()">l</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="oklab()">l</dfn> is a  <<number>>
 	that corresponds to the [=origin color's=] Oklab Lightness
-* <dfn value for="oklab()">a</dfn> and <dfn value for="oklab()">b</dfn> are <<percentage>>s or <<number>>s
+* <dfn value for="oklab()">a</dfn> and <dfn value for="oklab()">b</dfn> are <<number>>s
 	that correspond to the [=origin color's=] Oklab a and b axes
-* <dfn value for="oklab()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="oklab()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
 <h3 id="relative-LCH">Relative LCH Colors</h3>
 
@@ -1102,48 +1135,45 @@ The grammar of the ''lch()'' function is extended as follows:
 Within a [=relative color=] syntax ''lch()'' function,
 the allowed [=channel keywords=] are:
 
-* <dfn value for="lch()">l</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="lch()">l</dfn> is a <<number>>
 	that corresponds to the [=origin color's=] CIE Lightness
-* <dfn value for="lch()">c</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="lch()">c</dfn> is a  <<number>>
 	that corresponds to the [=origin color's=] LCH chroma
 * <dfn value for="lch()">h</dfn> is an <<angle>>
 	that corresponds to the [=origin color's=] LCH hue,
 	normalized to a [0deg, 360deg) range.
-* <dfn value for="lch()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="lch()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
 
-	Because LCH is both perceptually uniform and chroma-preserving,
-	and because the axes correspond to easily understood attributes of a color,
-	LCH is a good choice for color manipulation.
 
 <div class="example">
 	''lch(from peru calc(l * 0.8) c h)'' produces a color that is 20% darker than <span class="swatch" style="--color: peru"></span> peru or lch(62.2532% 54.0114 63.6769), with its chroma and hue left unchanged.
-	The result is <span class="swatch" style="--color: rgb(57.58% 32.47% 3.82%)"> </span> lch(49.80256% 54.0114 63.6769)
+	The result is <span class="swatch" style="--color: rgb(57.58% 32.47% 3.82%)"> </span> lch(49.80256 54.0114 63.6769)
 </div>
 
 <div class="example">
 	This adds 180 degrees to the hue angle, giving the complementary color.
 	<pre>
 		--accent: <span class="swatch" style="--color: lightseagreen"></span> lightseagreen;
-		--complement:  <span class="swatch" style="--color: rgb(88.2814% 51.1047% 58.3039%)"></span> LCH(from var(--accent) l c calc(h + 180deg));
+		--complement:  <span class="swatch" style="--color: rgb(88.2814% 51.1047% 58.3039%)"></span> lch(from var(--accent) l c calc(h + 180deg));
 	</pre>
-	lightseagreen is LCH(65.4937% 39.4484 190.1013), so --complement is <span class="swatch" style="--color: rgb(88.2814% 51.1047% 58.3039%)"></span> LCH(65.4937% 39.4484 370.1013)
+	lightseagreen is lch(65.4937 39.4484 190.1013), so --complement is <span class="swatch" style="--color: rgb(88.2814% 51.1047% 58.3039%)"></span> lch(65.4937 39.4484 370.1013)
 </div>
 
 <div class="example">
 	Fully desaturating a color to gray, keeping the exact same lightness:
 
 	<pre>
 	--mycolor: <span class="swatch" style="--color: orchid"></span> orchid;
-	// orchid is lch(62.753% 62.571 326.973)
+	// orchid is lch(62.753 62.571 326.973)
 	--mygray: <span class="swatch" style="--color: rgb(59.515% 59.515% 59.515%)"></span> lch(from var(--mycolor) l 0 h)
-	// mygray is lch(62.753% 0 326.973) which is rgb(59.515% 59.515% 59.515%)
+	// mygray is lch(62.753 0 326.973) which is rgb(59.515% 59.515% 59.515%)
 	</pre>
 
 	But now (since the hue was preserved) <em>re-saturating</em> again
 
 	<pre>
 	--mymuted: <span class="swatch" style="--color: rgb(72.710% 53.293% 71.224%)"></span> lch(from var(--mygray) l 30 h);
-	// mymuted is lch(62.753% 30 326.973) which is rgb(72.710% 53.293% 71.224%)
+	// mymuted is lch(62.753 30 326.973) which is rgb(72.710% 53.293% 71.224%)
 	</pre>
 </div>
 
@@ -1235,14 +1265,18 @@ The grammar of the ''oklch()'' function is extended as follows:
 Within a [=relative color=] syntax ''oklch()'' function,
 the allowed [=channel keywords=] are:
 
-* <dfn value for="oklch()">l</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="oklch()">l</dfn> is a  <<number>>
 	that corresponds to the [=origin color's=] Oklab Lightness
-* <dfn value for="oklch()">c</dfn> is a <<percentage>> or <<number>>
+* <dfn value for="oklch()">c</dfn> is a  <<number>>
 	that corresponds to the [=origin color's=] Oklch chroma
 * <dfn value for="oklch()">h</dfn> is an <<angle>>
 	that corresponds to the [=origin color's=] Oklch hue,
 	normalized to a [0deg, 360deg) range.
-* <dfn value for="oklch()">alpha</dfn> is a <<number>> or <<percentage>> that corresponds to the [=origin color's=] alpha transparency
+* <dfn value for="oklch()">alpha</dfn> is a <<number>> that corresponds to the [=origin color's=] alpha transparency
+
+	Because Oklch is both perceptually uniform and chroma-preserving,
+	and because the axes correspond to easily understood attributes of a color,
+	Oklch is a good choice for color manipulation.
 
 <div class="example" id="ex-oklch-wildly-oog">
 In this example, the aim is again to produce a new color
@@ -1258,15 +1292,15 @@ again produces an out of gamut color.
 	oklch(from var(--mycolor) l c calc(h - 120));
 </pre>
 
---mycolor is <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> oklch(69.012% 0.25077 319.893).
+--mycolor is <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> oklch(0.69012 0.25077 319.893).
 Subtracting 120 from the Hue gives a very high-chroma blue-green,
-<span class="swatch oog" style="--color: grey"></span> oklch(69.012% 0.25077 199.893)
+<span class="swatch oog" style="--color: grey"></span> oklch(0.69012 0.25077 199.893)
 which is out of sRGB gamut,
 color(srgb -0.6018 0.7621 0.8448)
 as the negative red component indicates.
 Bring this into gamut
 by reducing Oklch Chroma, yeilds
-<span class="swatch" style="--color: rgb(0.079% 69.282% 72.067%)"></span> oklch(69.012% 0.1173 199.893).
+<span class="swatch" style="--color: rgb(0.079% 69.282% 72.067%)"></span> oklch(0.69012 0.1173 199.893).
 The Oklch chroma has dropped from 0.251 to 0.117.
 </div>
 
@@ -1339,14 +1373,14 @@ Within a [=relative color=] syntax ''color()'' function using <<predefined-rgb-p
 the allowed [=channel keywords=] are:
 
 * <dfn value for="color()">r</dfn>, <dfn value for="color()">g</dfn>, and <dfn value for="color()">b</dfn>
-	are all <<percentage>>s or <<number>>s
+	are all <<number>>s
 	that correspond to the [=origin color's=] red, green, and blue channels
 	after its conversion to the predefined RGB color space.
 
 Within a [=relative color=] syntax ''color()'' function using <<xyz-params>>,
 the allowed [=channel keywords=] are:
 
-* <dfn value for="color()">x</dfn>, <dfn value for="color()">y</dfn>, <dfn value for="color()">z</dfn> are all <<percentage>>s or <<number>>s
+* <dfn value for="color()">x</dfn>, <dfn value for="color()">y</dfn>, <dfn value for="color()">z</dfn> are all <<number>>s
 	that correspond to the [=origin color's=] X, Y and Z channels
 	after its conversion to relative CIE XYZ color space
 	adapted to the relevant white point.