[css-coor-4] some HSL vs LCH comparisons

Author: svgeesus

css-color-4/Overview.bs

@@ -576,7 +576,7 @@ The RGB hexadecimal notations: ''#RRGGBB''</h3>
 			The alpha channel of the color is fully opaque.
 
 			<div class='example'>
-				In other words, ''#00ff00'' represents the same color as ''rgb(0 255 0)'' (a lime green).
+				In other words, <span class="swatch" style="--color: #00ff00"></span>  ''#00ff00'' represents the same color as <span class="swatch" style="--color: #00ff00"></span> ''rgb(0 255 0)'' (a lime green).
 			</div>
 
 		<dt>8 digits
@@ -588,7 +588,7 @@ The RGB hexadecimal notations: ''#RRGGBB''</h3>
 			and ''ff'' represent a fully opaque color.
 
 			<div class='example'>
-				In other words, ''#0000ffcc'' represents the same color as ''rgb(0 0 100% / 80%)'' (a slightly-transparent blue).
+				In other words, <span class="swatch" style="--color: #0000ffcc"></span> ''#0000ffcc'' represents the same color as <span class="swatch" style="--color: #0000ffcc"></span> ''rgb(0 0 100% / 80%)'' (a slightly-transparent blue).
 			</div>
 
 		<dt>3 digits
@@ -604,7 +604,7 @@ The RGB hexadecimal notations: ''#RRGGBB''</h3>
 
 			<div class='example'>
 				This syntax is often explained by saying that it's identical to a 6-digit notation obtained by "duplicating" all of the digits.
-				For example, the notation ''#123'' specifies the same color as the notation ''#112233''.
+				For example, the notation <span class="swatch" style="--color: #123"></span> ''#123'' specifies the same color as the notation <span class="swatch" style="--color: #123"></span> ''#112233''.
 				This method of specifying a color has lower "resolution" than the 6-digit notation;
 				there are only 4096 possible colors expressible in the 3-digit hex syntax,
 				as opposed to approximately 17 million in 6-digit hex syntax.
@@ -975,18 +975,18 @@ System Colors</h3>
 
 	In general, the <<system-color>> keywords
 	reflect <em>default</em> color choices made by the user, the browser, or the OS.
-	They are typically used in the brwser default stylesheet, for this reason.
+	They are typically used in the browser default stylesheet, for this reason.
 
 	To maintain legibility,
 	the <<system-color>> keywords also respond to light mode or dark mode changes.
 
 
 	<div class="example" id="LM-DM-links">
-		For example, traditional blue link text is legible on a white background
+		For example, traditional <span class="swatch" style="--color: blue"></span>  blue link text is legible on a <span class="swatch" style="--color: #fff"></span> white background
 	(WCAG contrast 8.59:1, AAA pass)
-	but would not be legible on a black background
+	but would not be legible on a <span class="swatch" style="--color: #000"></span>  black background
 	(WCAG contrast 2.44:1, AA fail).
-	Instead, a lighter blue such as #81D9FE would be used in dark mode
+	Instead, a lighter blue such as <span class="swatch" style="--color: #81D9FE"></span>  #81D9FE would be used in dark mode
 	(WCAG contrast 13.28:1, AAA pass).
 		<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
 		<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
@@ -1227,20 +1227,18 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 	It's interpreted identically to the fourth argument of the ''rgb()'' function.
 	If omitted, it defaults to ''100%''.
 
+	HSL colors resolve to sRGB.
+
 	<div class='example'>
 		For example, an ordinary red,
-		the same color you would see from the keyword ''red''
-		or the hex notation ''#f00'',
-		is represented in HSL as ''hsl(0deg 100% 50%)''.
+		the same color you would see from the keyword <span class="swatch" style="--color: red"></span>&nbsp;''red''
+		or the hex notation <span class="swatch" style="--color: red"></span>&nbsp;''#f00'',
+		is represented in HSL as <span class="swatch" style="--color: red"></span>&nbsp;''hsl(0deg 100% 50%)''.
 	</div>
 
-	The advantage of HSL over RGB is that it is far more intuitive:
+	An advantage of HSL over RGB is that it is more intuitive:
 	one can guess at the colors they want,
 	and then tweak.
-	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,
@@ -1254,6 +1252,77 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 		</pre>
 	</div>
 
+	An advantage of HSL over LCH is that,
+	regardless of manipulation,
+	the result always lies inside the sRGB gamut.
+	A disadvantage of HSL over LCH
+	is that hue manipulation changes the visual lightness,
+	and that hues are not evenly spaced apart.
+
+	It is thus easier in HSL to create sets of matching colors
+	(by keeping the hue the same and varying the saturation and lightness),
+	compared to maipulating the sRGB component values;
+	however, because the lightness is simply the mean of the gamma-corrected
+	red, green and blue components
+	it does not correspond to the visual perception of lightness
+	across hues.
+
+	<div class="example">
+		For example, <span class="swatch" style="--color: blue"></span>&nbsp;''blue'''
+		is represented in HSL as
+		<span class="swatch" style="--color: blue"></span>&nbsp;''hsl(240deg 100% 50%)
+		while <span class="swatch" style="--color: yellow"></span>&nbsp;''yellow'''
+		is <span class="swatch" style="--color: yellow"></span>&nbsp;''hsl(60deg 100% 50%)''.
+		Both have an HSL Lightness of 50%,
+		but clearly the yellow looks much lighter than the blue.
+
+		In LCH, sRGB blue is
+		<span class="swatch" style="--color: blue"></span>&nbsp;''lch(29.6% 131.2 301.3)''
+		while
+		sRGB yellow is
+		<span class="swatch" style="--color: yellow"></span>&nbsp;''lch(97.6% 94.7 99.6)''.
+		The LCH Lightnesses of 29.6% and 97.6% clearly reflect
+		the visual lightnesses of the two colors.
+	</div>
+
+	The hue angle in HSL is not perceptually uniform;
+	colors appear bunched up in some areas
+	and widely spaced in others.
+
+	<div class="example">
+		For example, the pair of hues
+		<!--
+			hsl(220 100% 50%) 42.114139000774955, 97.39536874737148, 290.5815091930946
+			hsl(250 100% 50%) 30.84988530751331, 129.71314978865763, 302.1290808073227
+		-->
+		<!--
+			hsl(50 100% 50%)  86.84897521929184, 86.24043356068755, 87.26505542654621
+			hsl(80 100% 50%) 91.96771031614921, 98.8076382873608, 119.14730687158351
+		-->
+		<span class="swatch" style="--color: hsl(220 100% 50%)"></span>&nbsp;''hsl(220deg 100% 50%)''
+		and
+		<span class="swatch" style="--color: hsl(250 100% 50%)"></span>&nbsp;''hsl(250deg 100% 50%)''
+		have an HSL hue difference of 30deg and look fairly similar,
+		while another pair of colors
+		<span class="swatch" style="--color: hsl(50 100% 50%)"></span>&nbsp;''hsl(50deg 100% 50%)''
+		and
+		<span class="swatch" style="--color: hsl(80 100% 50%)"></span>&nbsp;''hsl(80deg 100% 50%)'',
+		which also have a hue difference of 30deg, look very different.
+
+		In LCH, the same pair of colors
+		<span class="swatch" style="--color: hsl(220 100% 50%)"></span>&nbsp;''lch(42.1% 97.4 290.6)''
+		and
+		<span class="swatch" style="--color: hsl(250 100% 50%)"></span>&nbsp;''lch(30.8% 129.7 302.1)''
+		have a hue difference of 11.5deg
+		while the second pair
+		<span class="swatch" style="--color: hsl(50 100% 50%)"></span>&nbsp;''lch(86.8% 86.2 87.3)''
+		and
+		<span class="swatch" style="--color: hsl(80 100% 50%)"></span>&nbsp;''lch(92.0% 98.8 119.1)''
+		have a hue difference of 31.8deg
+		reflecting the visual separation of hues.
+
+	</div>
+
 	For legacy reasons,
 	''hsl()'' also supports an alternate syntax
 	that separates all of its arguments with commas: