Use an entirely different example that doesn't go out of gamut.

Author: dbaron

css-color-5/Overview.bs

@@ -178,41 +178,37 @@ If no keyword is specified, it is as if ''shorter'' were specified.
 </div>
 
 <div class="example">
-	This example produces the mixture of red and yellow,
+	This example produces the mixture of teal and olive,
 	in ''lch'' colorspace (the default),
-	with each lch channel being 65% of the value for red
-	and 35% of the value for yellow.
+	with each lch channel being 65% of the value for teal
+	and 35% of the value for olive.
 
 	Note: interpolating on hue and chroma
 	keeps the intermediate colors
 	as saturated as the endpoint colors.
 
-	Note: Some of the intermediate colors (including the one shown)
-	are outside of the sRGB gamut
-	and may not display correctly across implementations.
-
-	<pre class="lang-css">color-mix(red yellow 65%);</pre>
+	<pre class="lang-css">color-mix(teal olive 65%);</pre>
 
 	<figure>
 		<img src="images/CH-mixing3.svg" style="width: 50vmin">
-		<figcaption>Mixtures of red and yellow.
-			Red has a hue angle, measured from the positive a axis,
-			of 40.8526 degrees
-			while yellow has a hue angle of 99.5746 degrees.
-			Red has a chroma, or distance from the central neutral axis, of 106.8390
-			while yellow has a chroma of 94.7077.
+		<figcaption>Mixtures of teal and olive.
+			Teal has a hue angle, measured from the positive a axis,
+			of 196.4524 degrees
+			while olive has a hue angle of 99.5746 degrees.
+			Teal has a chroma, or distance from the central neutral axis, of 31.6903
+			while olive has a chroma of 56.8124.
 			Mixtures lie along the dashed curve. A 65%/35% mixture is shown.
 		</figcaption>
 	</figure>
 
 	The calculation is as follows:
-		* sRGB  <span class="swatch" style="--color: red"></span> red (#F00) is lch(54.2917% 106.8390 40.8526)
-		* sRGB <span class="swatch" style="--color: yellow"></span>  yellow (#FF0) is lch(97.6071% 94.7077 99.5746)
-		* mixed lightness is 54.2917 * 0.65 + 97.6071 * 0.35 = 69.4521
-		* mixed chroma is 106.8390 * 0.65 + 94.7077 * 0.35 = 102.5930
-		* mixed hue is 40.8526 * 0.65 + 99.5746 * 0.35 = 61.4053
-		* mixed result is lch(69.4521% 102.5930 61.4053)
-		* which is a red-orange: <span class="swatch" style="--color: rgb(104.3765% 50.3695% -30.9644%)"></span>  rgb(104.3765% 50.3695% -30.9644%)
+		* sRGB  <span class="swatch" style="--color: teal"></span> teal (#008080) is lch(47.9855% 31.6903 196.4524)
+		* sRGB <span class="swatch" style="--color: olive"></span>  olive (#808000) is lch(52.1496% 56.8124 99.5746)
+		* mixed lightness is 47.9855 * 0.65 + 52.1496 * 0.35 = 49.4429
+		* mixed chroma is 31.6903 * 0.65 + 56.8124 * 0.35 = 40.4830
+		* mixed hue is 196.4524 * 0.65 + 99.5746 * 0.35 = 162.5452
+		* mixed result is lch(49.4429% 40.4830 162.5452)
+		* which is a slightly-blueish green: <span class="swatch" style="--color: rgb(7.7377% 52.5730% 37.3213%)"></span>  rgb(7.7377% 52.5730% 37.3213%)
 </div>
 
 Instead of mixing all channels equally, color-adjusters can be used