@@ -946,11 +946,49 @@ so it has meaningful values for the channels.</p>
946946 regardless of what the [=origin color's=] opacity was.
947947</div>
948948
949- <div class=example>
950- While most uses of [=relative color=] syntax
951- will use the [=channel keywords=] in their corresponding argument,
952- you can use them in any position.
949+ When relative color syntax is used,
950+ color channel values,
951+ whether directly specified
952+ or arising from color space conversion,
953+ are <em> not</em> clamped to the reference ranges but are retained as-is.
954+ This preserves out of gamut values,
955+ if the destination color space is capable of representing them.
956+
957+ <div class="example">
958+ For example, a Display P3 color
959+ which is outside the gamut of sRGB can still be represented,
960+ as it is not clipped.
961+
962+ <pre highlight=css>
963+ --vivid-yellow: <span class="swatch oog" style="--color: color(display-p3 1 1 0)"></span> color(display-p3 1 1 0);
964+ --paler-yellow: <span class="swatch" style="--color: rgb(100% 100% 15.37%)"></span> srgb(from var(--vivid-yellow) r g calc(b + 50%));
965+ </pre>
966+
967+ Here --vivid-yellow, once converted to sRGB,
968+ is <span class="swatch oog" style="--color: color(display-p3 1 1 0)"></span> rgb(100% 100% -34.63%)
969+ and the negative blue component is not clamped.
970+ The result of the RCS calculation is
971+ <span class="swatch" style="--color: rgb(100% 100% 15.37%)"></span> rgb(100% 100% 15.37%)
972+ </div>
973+
974+ However, when relative color syntax is used,
975+ alpha channels <em> are</em> clamped to the reference range.
953976
977+ <div class="example">
978+ For example, attempting to double an alpha of 0.7 in the origin color
979+ results in an alpha in the result of 1, not 1.4.
980+
981+ <pre highlight=css>
982+ --tan: <span class="swatch" style="--color: rgb(80.93% 70% 55.27% / 70%)"></span> oklch(78% 0.06 75) / 0.7;
983+ --deeper-tan: <span class="swatch" style="--color: rgb(80.93% 70% 55.27%)"></span> oklch(from var(--tan) l c h / calc(alpha * 2));
984+ </pre>
985+ </div>
986+
987+ While most uses of [=relative color=] syntax
988+ will use the [=channel keywords=] in their corresponding argument,
989+ you can use them in any position.
990+
991+ <div class=example>
954992 For example, to do a rough approximation of grayscaling a color:
955993
956994 <pre highlight=css>
0 commit comments