[css-color-5] Improve example, w3c#7771

Author: svgeesus

css-color-5/Overview.bs

@@ -966,10 +966,10 @@ which are then carried forward as missing.
 	<pre highlight=css>
 	html { --bg: <span class="swatch" style="--color: rgb(51.5% 48.5% 48.5%)"></span> hsl(none 3% 50%); }
 	.foo {
-		--darker-bg: oklch(from var(--bg) calc(l * 0.8) c h);
+		--darker-bg: <span class="swatch" style="--color: rgb(37.86% 35.24% 35.91%)"></span> oklch(from var(--bg) calc(l * 0.8) c h);
 	}
 	.bar {
-		background: linear-gradient(in Oklab to right, var(--darker-bg), #4C3);
+		background: linear-gradient(in Oklab to right, <span class="swatch" style="--color: rgb(37.86% 35.24% 35.91%)"></span>  var(--darker-bg), <span class="swatch" style="--color: #4C3"></span>  #4C3);
 	}
 	</pre>
 
@@ -978,8 +978,19 @@ which are then carried forward as missing.
 	but the analogous hue component is carried forward
 	giving oklch(0.592 0.009 none).
 	These values are then used in the relative function, giving
-	oklch(0.474 0.009 none).
+	the darker color oklch(0.474 0.009 none).
 
+	The light green in the gradient is 
+	<span class="swatch" style="--color: #4C3"></span>  oklch(0.743 0.222 141.6),
+	and so, when interpolated, the other color take that hue,
+	becoming 
+	<span class="swatch" style="--color: rgb(34.96% 36.56% 34.72%)"></span> oklch(0.474 0.009 141.6).
+
+	Thus, the gradient will have a constant greenish hue. 
+
+	If an implementation failed to do this carrying forward,
+	the grayish --darker-bg would have a hue of 0,
+	giving an undesirable reddish tint at the start of the  gradient.
 </div>
 
 <h3 id="relative-RGB">Relative sRGB Colors</h3>