Skip to content

Commit

Permalink
[css-color-5] Remove adjusters from color-mix() and simplify grammar
Browse files Browse the repository at this point in the history
  • Loading branch information
LeaVerou committed Mar 1, 2021
1 parent d384477 commit a431644
Showing 1 changed file with 10 additions and 64 deletions.
74 changes: 10 additions & 64 deletions css-color-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -119,74 +119,17 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
in a given [=colorspace=],
by a specified amount.

Multiple color-adjusters can be specified.


<pre class='prod'>
<dfn>color-mix()</dfn> = color-mix([ in <<colorspace>> ]?, <<mix-component>>#{2})
<dfn>color-mix()</dfn> = color-mix([ in <<colorspace>> ]?, <<color>>{2} [ <<percentage>> ]?)
</pre>

<pre class='prod'>
<dfn>&lt;mix-component></dfn> = <<color>> [ <<percentage>> | <<color-adjuster>>+ ]?
</pre>


<pre class='prod'>
<dfn>&lt;color-adjuster></dfn> = [ [
<<srgb-adjuster>> | <<hsl-adjuster>> | <<hwb-adjuster>>
| <<xyz-adjuster>> | <<lab-adjuster>> | <<lch-adjuster>>
] | alpha ] <<percentage>>?
<dfn>&lt;srgb-adjuster></dfn> = red || green || blue
<dfn>&lt;hsl-adjuster></dfn> = <<hue-adjuster>> || saturation || lightness
<dfn>&lt;hwb-adjuster></dfn> = <<hue-adjuster>> || whiteness || blackness
<dfn>&lt;xyz-adjuster></dfn> = x || y || z
<dfn>&lt;lab-adjuster></dfn> = lightness || a || b
<dfn>&lt;lch-adjuster></dfn> = lightness || chroma || <<hue-adjuster>>
<dfn>&lt;hue-adjuster></dfn> = hue [shorter | longer | increasing | decreasing | specified ]?
</pre>

Arguments are normalized as follows:

1. When a percentage is specified without any [=color-adjuster=]s,
it is expanded to all adjusters available for the given [=colorspace=] plus alpha.
2. If a percentage is omitted and there are no adjusters present on any color arguments,
it defaults to 50% (an equal mix of the two colors).
3. Adjusters that are not present on a color default to 0% (i.e. the corresponding components are taken from the other color).
4. Adjusters that are only present on one of the colors default to <code>100% - <i>p</i></code> on the second color,
where <i>p</i> is the percentage of the corresponding adjuster in the other color.
5. If the sum of corresponding adjusters across all colors is not 100%, percentages are scaled proportionally so that the sum is exactly 100%.

Issue: Do missing adjusters default to 0% everywhere, or only in the second color?
If the former, we can end up with adjusters that sum to 0% pretty easily.

The meaning of the adjusters is defined by colorspace.
For example, if the [=colorspace=] is [=hsl=],
hue means the HSL hue, which is not the same as the LCH hue;
if the colorspace is [=lch=],
lightness means the LCH Lightness, which is the same as Lab lightness,
but different to the HSL Lightness.

Only the [=color-adjuster=]s defined for a given [=colorspace=] are available.
For example, it is not possible to use the HWB [=whiteness=] adjuster unless the colorspace is [=hwb=].
The alpha adjuster is available on any [=colorspace=].
If a percentage is omitted, it defaults to 50% (an equal mix of the two colors).

If the specified colorspace has a smaller gamut
than the one in which the color to be adjusted is specified,
gamut mapping will occur.

Note: not all [=color-adjuster=]s are equally useful.
Adjustments in LCH are the most useful, which is why it is the default.
Adjustments on the a and b axes are rarely needed.
Adjustments in the srgb-related spaces (srgb itself, hsl, hwb)
are provided mainly for backward compatibility
with the sorts of adjustments currently done in CSS preprocessors.
Adjusting the individual x, y and z channels will produce significant hue shifts;
however, adjusting all three channels together is useful
and will lighten or darken the color.

The [=hue-adjuster=] takes optional keywords, to specify the [[css-color-4#hue-interpolation]] algorithm.
If no keyword is specified, it is as if ''shorter'' were specified.

<div class="example">
This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru
and 60% <span class="swatch" style="--color: lightgoldenrod"></span> lightgoldenrod.
Expand Down Expand Up @@ -227,7 +170,7 @@ If no keyword is specified, it is as if ''shorter'' were specified.
keeps the intermediate colors
as saturated as the endpoint colors.

<pre class="lang-css">color-mix(teal 65%, olive);</pre>
<pre class="lang-css">color-mix(in lch, teal 65%, olive);</pre>

<figure>
<img src="images/CH-mixing3.svg" style="width: 50vmin">
Expand All @@ -251,10 +194,8 @@ If no keyword is specified, it is as if ''shorter'' were specified.
* 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
to only mix certain channels. The unmixed channels in the result
are copied across from the <em>first</em> color.

<!--
Let's move this example to the appropriate section when we have the new syntax for making these low-level adjustments
<div class="example">
This example produces the mixture of a deep green and a sky blue,
in ''lch()'' colorspace (the default),
Expand Down Expand Up @@ -396,6 +337,7 @@ are copied across from the <em>first</em> color.
This example demonstrates that not all colors which can be mixed, can be displayed on current devices.
</div>
-->

<!--
<img src="images/mix_red_yellow_lightness30.png" alt="Result of color-mix(red, yellow, lightness(30%)" />
Expand Down Expand Up @@ -928,6 +870,10 @@ Changes {#changes}
<h3 id="changes-20200303">Since the <a href="https://www.w3.org/TR/2020/WD-css-color-5-20200303/">FPWD of 10 June 2020</a></h3>

<ul>
<!--
<li>Added `in` keyword before <<colorspace>> tokens in functions</li>
<li>Removed adjusters from color-mix</li>
-->
<!-- to 28 Jan 2021 -->
<!-- removed interpolation section changes, added to Color 4 -->
<!-- to 5 Jan 2021 -->
Expand Down

0 comments on commit a431644

Please sign in to comment.