[css-color-5] redo color-adjust example

svgeesus · svgeesus · commit 1c24b5211441 · 2019-12-18T22:39:59.000+02:00
diff --git a/css-color-4/LCHplayground.html b/css-color-4/LCHplayground.html
@@ -0,0 +1,7 @@
+<html>
+    <meta charset="utf-8"></meta>
+	<script src="math.js"></script>
+    <script src="conversions.js"></script>
+    <script src="utilities.js"></script>
+    <title>LCH playground</title>
+</html>
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
@@ -20,6 +20,12 @@ spec:css-color-4; type:dfn; text:colorspace
 spec:css-color-4; type:dfn; text:gamut
 </pre>
 
+<style>
+	.swatch {display: inline-block; height: 1.2em; width: 1.2em;}
+	.peru {background-color: peru;}
+	.darkperu {background-color: rgb(57.58%, 32.47%, 3.82%);}
+</style>
+
 Introduction {#intro}
 =====================
 
@@ -188,18 +194,18 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
 	</pre>
 
 	<div class="example">
-		This example produces the adjustment of red,
+		This example produces the adjustment of peru (#CD853F),
 		in ''lch()'' colorspace (the default),
-		with the lightness being increased by 30%.
+		with the lightness being reduced by 20%.
 		The chroma and hue of red are left unchanged.
 
-		<pre class="lang-css">adjust-color(red, lightness(30%));</pre>
+		<pre class="lang-css">adjust-color(peru, lightness(-20%));</pre>
 
 		The calculation is as follows:
-		* sRGB red (#F00) is lch(54.2917 106.8390 40.8526)
-		* adjusted lightness is 54.2917 + 30 = 84.2917
-		* adjusted result is lch(84.2917 106.8390 40.8526)
-		* which is a light red color: rgb(218.5126% 218.5197% 218.4963%)
+		* peru (#CD853F) <span class="swatch peru"> </span> is lch(62.2532% 54.0114 63.6769)
+		* adjusted lightness is 62.2532% - 20% = 42.2532%
+		* adjusted result is lch(42.2532% 54.0114 63.6769)
+		* which is rgb(57.58%, 32.47%, 3.82%) <span class="swatch darkperu"> </span>
 	</div>
 
 <img src="images/adjust_red_lightness30.png" alt="Result of adjust-color(red, lightness(30%)" />
