[css-color-5] Add RCS OKLCH example

svgeesus · svgeesus · commit 52e0f74fa9df · 2021-10-23T21:50:14.000+03:00
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
@@ -1095,8 +1095,11 @@ the allowed [=channel keywords=] are:
 However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 
 <div class="example" id="ex-wildly-oog">
+	In this example, the aim is to produce a new color
+	with the same Lightness and Chroma,
+	but the triad (hue differs by 120 degrees).
 	The origin color is inside the RGB gamut,
-	but rotating the hue
+	but rotating the hue in LCH
 	produces an out of gamut color.
 
 	<!-- lch(60% 90 320) = lab(60% 68.94 -57.9)
@@ -1133,6 +1136,25 @@ However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 			The gamut-mapped <span class="swatch" style="--color: rgb(0% 64.2% 66.3%)"></span> result has much lower chroma.
 		</figcaption>
 	</figure>
+
+	Performing the same operation in HSL will return an in-gamut result.
+	But it is unsatisfactory in other ways:
+
+	<pre>
+		--mycolor: <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> lch(60% 90 320);
+		hsl(from var(--mycolor) calc(h - 120) s l);
+	</pre>
+
+	In HSL, --mycolor is
+	<span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> hsl(289.18 93.136% 65.531%)
+	so subtracting 120 degrees gives
+	<span class="swatch" style="--color: rgb(33.428% 97.634% 86.056%)"></span> hsl(169.18 93.136% 65.531%).
+	Converting that result back to LCH
+	<span class="swatch" style="--color: rgb(33.428% 97.634% 86.056%)"></span> lch(89.0345% 49.3503 178.714)
+	we see that, due to the hue rotate in HSL,
+	Lightness shot up from 60% to 89%,
+	the Chroma has dropped from 90 to 49,
+	and the Hue actually changed by 141 degrees not 120.
 </div>
 
 <h3 id="relative-OKLCH">Relative OKLCH colors</h3>
@@ -1155,6 +1177,31 @@ the allowed [=channel keywords=] are:
 	normalized to a [0deg, 360deg) range.
 * <dfn value for="oklch()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
 
+<div class="example" id="ex-oklch-wildly-oog">
+In this example, the aim is again to produce a new color
+with the same Lightness and Chroma,
+but the triad (hue differs by 120 degrees).
+In this example, we will do the manipulation in OKLCH.
+The origin color is inside the RGB gamut,
+but rotating the hue in OKLCH
+again produces an out of gamut color.
+
+<pre>
+	--mycolor: <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> lch(60% 90 320);
+	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).
+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)
+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).
+The OKLCH chroma has dropped from 0.251 to 0.117.
+</div>
 
 <h3 id="relative-color-function">Relative color-function colors</h3>
 
