Skip to content

Commit

Permalink
[css-color-5] Clarified that RCS color components are not clamped, wh…
Browse files Browse the repository at this point in the history
…ile RCS alpha is #9805
  • Loading branch information
svgeesus committed Mar 14, 2024
1 parent bd11f28 commit 4429f5f
Showing 1 changed file with 42 additions and 4 deletions.
46 changes: 42 additions & 4 deletions css-color-5/Overview.bs
Expand Up @@ -946,11 +946,49 @@ so it has meaningful values for the channels.</p>
regardless of what the [=origin color's=] opacity was.
</div>

<div class=example>
While most uses of [=relative color=] syntax
will use the [=channel keywords=] in their corresponding argument,
you can use them in any position.
When relative color syntax is used,
color channel values,
whether directly specified
or arising from color space conversion,
are <em>not</em> clamped to the reference ranges but are retained as-is.
This preserves out of gamut values,
if the destination color space is capable of representing them.

<div class="example">
For example, a Display P3 color
which is outside the gamut of sRGB can still be represented,
as it is not clipped.

<pre highlight=css>
--vivid-yellow: <span class="swatch oog" style="--color: color(display-p3 1 1 0)"></span> color(display-p3 1 1 0);
--paler-yellow: <span class="swatch" style="--color: rgb(100% 100% 15.37%)"></span> srgb(from var(--vivid-yellow) r g calc(b + 50%));
</pre>

Here --vivid-yellow, once converted to sRGB,
is <span class="swatch oog" style="--color: color(display-p3 1 1 0)"></span> rgb(100% 100% -34.63%)
and the negative blue component is not clamped.
The result of the RCS calculation is
<span class="swatch" style="--color: rgb(100% 100% 15.37%)"></span> rgb(100% 100% 15.37%)
</div>

However, when relative color syntax is used,
alpha channels <em>are</em> clamped to the reference range.

<div class="example">
For example, attempting to double an alpha of 0.7 in the origin color
results in an alpha in the result of 1, not 1.4.

<pre highlight=css>
--tan: <span class="swatch" style="--color: rgb(80.93% 70% 55.27% / 70%)"></span> oklch(78% 0.06 75) / 0.7;
--deeper-tan: <span class="swatch" style="--color: rgb(80.93% 70% 55.27%)"></span> oklch(from var(--tan) l c h / calc(alpha * 2));
</pre>
</div>

While most uses of [=relative color=] syntax
will use the [=channel keywords=] in their corresponding argument,
you can use them in any position.

<div class=example>
For example, to do a rough approximation of grayscaling a color:

<pre highlight=css>
Expand Down

0 comments on commit 4429f5f

Please sign in to comment.