Skip to content

Commit 3efd360

Browse files
LeaVerouLeaVerou
committed
[css-color] Interpolation color space syntax, closes w3c#6772
* Moved "Color Spaces" section from L5 to L4 and combined it with the existing "Color space for interpolation" section * Defined color interpolation syntax for other specifications to reference * Used new color interpolation in color-mix() definition * User agents MAY (instead of "will") handle interpolation between legacy colors in gamma-encoded sRGB
1 parent 9a5895f commit 3efd360

2 files changed

Lines changed: 41 additions & 63 deletions

File tree

‎css-color-4/Overview.bs‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4967,45 +4967,69 @@ Interpolation</h2>
49674967

49684968
<h3 id="interpolation-space">
49694969
Color space for interpolation</h3>
4970-
Different color spaces may be more appropriate for each interpolation use case.
4971-
For example,
4972-
the perceptually uniform Lab works well for avoiding bunching up in gradients,
4973-
and the chroma-preserving LCH works well for avoiding greying out in color mixing,
4974-
while the linear-light XYZ is best for compositing
4975-
and gamma-encoded sRGB, which is neither linear light nor perceptually uniform,
4976-
will give overly dark mixes but is compatible with older Web content.
49774970

49784971
Various features in CSS depend on interpolating colors.
4979-
4980-
<div class="example" id="ex-host-syntax">
49814972
Examples include:
49824973

49834974
* <<gradient>>
49844975
* 'filter'
49854976
* 'animation'
49864977
* 'transition'
4987-
* ''color-mix()''
4988-
</div>
4978+
4979+
Mixing or otherwise combining colors
4980+
has different results depending on the color space used.
4981+
Thus, different color spaces may be more appropriate for each interpolation use case.
4982+
4983+
* In some cases, the result of physically mixing two colored lights is desired.
4984+
In that case, the CIE XYZ color space is appropriate, because it is linear in light intensity.
4985+
* If colors need to be evenly spaced perceptually (such as in a gradient),
4986+
the OKLab color space (and the older Lab), are designed to be perceptually uniform.
4987+
* If avoiding graying out in color mixing is desired, i.e. maximizing chroma throughout the transition,
4988+
OKLCH (and the older LCH) work well for that.
4989+
* Lastly, compatibility with legacy Web content may be the most important consideration.
4990+
The sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here,
4991+
even though it produces poorer results (overly dark or greyish mixes).
4992+
4993+
49894994

49904995
These features are collectively termed the <dfn export>host syntax</dfn>.
49914996
The host syntax should define
49924997
what the default interpolation space should be for each case,
49934998
and optionally provide syntax for authors to override this default.
4999+
If such syntax is part of a property value, it should use a <<color-interpolation-method>> token,
5000+
defined below for easy reference from other specifications.
5001+
This ensures consistency across CSS,
5002+
and that further customizations on how color interpolation is performed
5003+
can automatically percolate across all of CSS.
5004+
5005+
<pre class='prod'>
5006+
<dfn export>&lt;rectangular-color-space></dfn> = srgb | lab | oklab | xyz | xyz-d50 | xyz-d65
5007+
<dfn export>&lt;polar-color-space></dfn> = hsl | hwb lch | oklch
5008+
<dfn export>&lt;hue-interpolation-method></dfn> = [ shorter | longer | increasing | decreasing | specified ] hue
5009+
<dfn export>&lt;color-interpolation-method> = in [ <<rectangular-color-space>> | <<polar-color-space>> <<hue-interpolation-method>>? ]
5010+
</pre>
5011+
5012+
<p dfn-type=value dfn-for="<color-space>">
5013+
The keywords in the definitions of <<rectangular-color-space>> and <<polar-color-space>>
5014+
each refer to their corresponding color space,
5015+
represented in CSS either by the functional syntax with the same name,
5016+
or (if no such function is present), by the corresponding <<ident>> in the ''color()'' function.
5017+
</p>
49945018
49955019
If the host syntax does not define what color space
49965020
interpolation should take place in,
49975021
it defaults to OKLab.
49985022
4999-
However, user agents will handle interpolation
5023+
However, user agents <em>may</em> handle interpolation
50005024
between legacy sRGB color formats
50015025
(hex colors, named colors,
50025026
''rgb()'', ''hsl()'' or ''hwb()''
50035027
and the equivalent alpha-including forms)
50045028
in gamma-encoded sRGB space.
50055029
This provides Web compatibility; legacy sRGB content interpolates in the sRGB space by default.
50065030
5007-
This also means that authors can choose to opt-in to Lab interpolation
5008-
by using the non-legacy ''color(srgb r g b)'' form.
5031+
This also means that authors can choose to opt-in to better interpolation
5032+
by using the non-legacy ''color(srgb r g b)'' form for one of their colors.
50095033
50105034
If the colors to be interpolated are outside the gamut
50115035
of the interpolation space,
@@ -5104,6 +5128,8 @@ Hue interpolation</h3>
51045128
51055129
Host syntax can specify any of the following algorithms for hue interpolation
51065130
(angles in the following are in degrees, but the logic is the same regardless of how they are specified).
5131+
Specifying a hue interpolation strategy is already part of the <<color-interpolation-method>> syntax
5132+
via the <<hue-interpolation-method>> token.
51075133
51085134
Unless the type of hue interpolation is ''specified'', both angles need to be constrained to [0, 360) prior to interpolation.
51095135
One way to do this is <code><i>θ</i> = ((<i>θ</i> % 360) + 360) % 360</code>.

‎css-color-5/Overview.bs‎

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -70,52 +70,6 @@ Introduction {#intro}
7070
''color-contrast()'',
7171
and extends existing ones with [[#relative-colors|relative color syntax]].
7272

73-
The perceptually uniform ``lch()`` color space
74-
is used recommended for mixing,
75-
as this has no gamut restrictions
76-
and colors are evenly distributed.
77-
However, other color spaces can be specified,
78-
including ``hsl()`` or ``srgb`` if desired.
79-
80-
<!--
81-
██████ ███████ ██ ███████ ████████ ██████ ████████ ███ ██████ ████████ ██████
82-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
83-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
84-
██ ██ ██ ██ ██ ██ ████████ ██████ ████████ ██ ██ ██ ██████ ██████
85-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ██ ██
86-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
87-
██████ ███████ ████████ ███████ ██ ██ ██████ ██ ██ ██ ██████ ████████ ██████
88-
-->
89-
90-
Color Spaces {#color-spaces}
91-
==============
92-
93-
Mixing or otherwise combining colors
94-
has different results depending on the color space used.
95-
In some cases, the result of physically mixing two colored lights is desired
96-
(in that case, the CIE XYZ color space is appropriate, because it is linear in light intensity).
97-
In other cases, colors which are evenly spaced perceptually are desired
98-
(in which case, the OKLab color space is designed to be perceptually uniform).
99-
Alternatively, maximizing chroma so that color mixtures follow along the hue wheel is wanted
100-
(OKLCH works well for this).
101-
Lastly, compatibility with legacy Web content may be the most important consideration.
102-
(the sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here).
103-
104-
105-
<pre class='prod'>
106-
<dfn>&lt;color-space></dfn> = srgb | hsl | hwb | xyz | lab | lch | oklab | oklch
107-
</pre>
108-
109-
<p dfn-type=value dfn-for="<color-space>">
110-
The <dfn>srgb</dfn>, <dfn>hsl</dfn>, <dfn>hwb</dfn>, <dfn>xyz</dfn>,
111-
<dfn>lab</dfn>, <dfn>lch</dfn>. <dfn>oklab</dfn> and <dfn>oklch</dfn> keywords
112-
each refer to their corresponding color space.
113-
114-
When no <<color-space>> is specified,
115-
the mixing is done in the ''oklch'' color space.
116-
The ''xyz'' color space is CIE XYZ, with a [=D65=] whitepoint, and allows computation to be done
117-
in a linear-light-intensity space.
118-
11973

12074
<!--
12175
██ ██ ████ ██ ██
@@ -137,9 +91,7 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
13791

13892

13993
<pre class='prod'>
140-
<dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage [0,100]>>? ]#{2} <<hue-adjuster>>?)
141-
<dfn>&lt;hue-adjuster></dfn> = ''shorter'' | ''longer'' | ''increasing'' | ''decreasing'' | ''specified''
142-
94+
<dfn>color-mix()</dfn> = color-mix( <<color-interpolation-method>> , [ <<color>> && <<percentage [0,100]>>? ]#{2})
14395
</pre>
14496

14597
Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:

0 commit comments

Comments
 (0)