Skip to content

Commit dc433b5

Browse files
committed
[css-color-5] consistent "color space" w3c#6217
1 parent a2868eb commit dc433b5

6 files changed

Lines changed: 50 additions & 50 deletions

File tree

css-color-5/Overview.bs

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ spec:css-color-3
2323

2424
<pre class="link-defaults">
2525
spec:css-color-4; type:dfn; text:color
26-
spec:css-color-4; type:dfn; text:colorspace
26+
spec:css-color-4; type:dfn; text:color space
2727
spec:css-color-4; type:dfn; text:gamut
2828
spec:css-color-4; type:dfn; text:rectangular orthogonal color
2929
spec:css-color-4; type:dfn; text:cylindrical polar color
@@ -69,35 +69,35 @@ Introduction {#intro}
6969
''color-contrast()'',
7070
and [[#colormodify|a way to modify colors]].
7171

72-
The perceptually uniform ``lch()`` colorspace
72+
The perceptually uniform ``lch()`` color space
7373
is used for mixing by default,
7474
as this has no gamut restrictions
7575
and colors are evenly distributed.
76-
However, other colorspaces can be specified,
76+
However, other color spaces can be specified,
7777
including ``hsl()`` or ``srgb`` if desired.
7878

79-
Colorspaces {#colorspaces-section}
79+
color spaces {#color spaces-section}
8080
==============
8181

8282
Mixing or otherwise combining colors
83-
has different results depending on the colorspace used.
83+
has different results depending on the color space used.
8484
In some cases, the result of physically mixing two colored lights is desired
85-
(in that case, the CIE XYZ colorspace is appropriate, because it is linear in light intensity).
85+
(in that case, the CIE XYZ color space is appropriate, because it is linear in light intensity).
8686
In other cases, colors which are evenly spaced perceptually are desired
87-
(in which case, the CIE Lab colorspace is designed to be perceptually uniform).
87+
(in which case, the CIE Lab color space is designed to be perceptually uniform).
8888
Alternatively, maximizing chroma so that color mixtures follow along the hue wheel is wanted
8989
(CIE LCH works well for this).
9090
Lastly, compatibility with legacy Web content may be the most important consideration.
91-
(the sRGB colorspace, which is neither linear-light nor perceptually uniform, is the choice here).
91+
(the sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here).
9292

9393

9494
<pre class='prod'>
95-
<dfn>&lt;colorspace></dfn> = srgb | hsl | hwb | xyz | lab | lch
95+
<dfn>&lt;color space></dfn> = srgb | hsl | hwb | xyz | lab | lch
9696
</pre>
9797

98-
When no [=colorspace=] is specified,
99-
the mixing is done in the ''lch'' colorspace.
100-
The [=xyz=] colorspace is CIE XYZ, with a D50 whitepoint, and allows computation to be done
98+
When no [=color space=] is specified,
99+
the mixing is done in the ''lch'' color space.
100+
The [=xyz=] color space is CIE XYZ, with a D50 whitepoint, and allows computation to be done
101101
in a linear-light-intensity space.
102102

103103

@@ -116,12 +116,12 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
116116

117117
This function takes two <<color>> specifications
118118
and returns the result of mixing them,
119-
in a given [=colorspace=],
119+
in a given [=color space=],
120120
by a specified amount.
121121

122122

123123
<pre class='prod'>
124-
<dfn>color-mix()</dfn> = color-mix( in <<colorspace>> , [ <<color>> && <<percentage>>? ]#{2})
124+
<dfn>color-mix()</dfn> = color-mix( in <<color space>> , [ <<color>> && <<percentage>>? ]#{2})
125125
</pre>
126126

127127
The percentages are normalized as follows:
@@ -143,25 +143,25 @@ Issue: Should we handle p1 + p2 &lt; 100% differently? E.g. a mix with `transpar
143143

144144
After normalizing both percentages, the result is produced via the following algorithm:
145145

146-
1. Both colors are converted to the specified [=colorspace=].
147-
If the specified colorspace has a smaller gamut
146+
1. Both colors are converted to the specified [=color space=].
147+
If the specified color space has a smaller gamut
148148
than the one in which the color to be adjusted is specified,
149149
gamut mapping will occur.
150-
2. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified colorspace</a>.
150+
2. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified color space</a>.
151151

152152
The result of mixing is the color at the specified percentage along the progression
153153
of the second color to the first color.
154154

155-
Note: As a corrollary, a percentage of 0% just returns the other color converted to the specified colorspace,
156-
and a percentage of 100% returns the same color converted to the specified colorspace.
155+
Note: As a corrollary, a percentage of 0% just returns the other color converted to the specified color space,
156+
and a percentage of 100% returns the same color converted to the specified color space.
157157

158158
<div class="example">
159159
This example produces a mixture of 40% <span class="swatch" style="--color: peru"></span> peru
160160
and 60% <span class="swatch" style="--color: palegoldenrod"></span> palegoldenrod.
161161

162162
<pre class="lang-css">color-mix(in lch, peru 40%, palegoldenrod)</pre>
163163

164-
The mixing is done in ''lch()'' colorspace.
164+
The mixing is done in ''lch()'' color space.
165165
Here is a top-down view, looking along the neutral L axis:
166166

167167
<figure>
@@ -187,7 +187,7 @@ and a percentage of 100% returns the same color converted to the specified color
187187

188188
<div class="example">
189189
This example produces the mixture of teal and olive,
190-
in ''lch'' colorspace (the default),
190+
in ''lch'' color space (the default),
191191
with each lch channel being 65% of the value for teal
192192
and 35% of the value for olive.
193193

@@ -223,7 +223,7 @@ and a percentage of 100% returns the same color converted to the specified color
223223
Let's move this example to the appropriate section when we have the new syntax for making these low-level adjustments
224224
<div class="example">
225225
This example produces the mixture of a deep green and a sky blue,
226-
in ''lch()'' colorspace (the default),
226+
in ''lch()'' color space (the default),
227227
with the lightness being 40% of the lightness of the green
228228
(and thus, 60% of the lightness of the blue).
229229
The chroma and hue of the green are used unchanged in the mixed result.
@@ -241,7 +241,7 @@ Let's move this example to the appropriate section when we have the new syntax f
241241

242242
<div class="example">
243243
This example produces the mixture of a red and a sky blue,
244-
in ''lch()'' colorspace (the default),
244+
in ''lch()'' color space (the default),
245245
with the hue being 75.23% of that of the red
246246
(and thus, 24.77% of that of the blue).
247247
The shorter hue arc will be used.
@@ -272,7 +272,7 @@ Let's move this example to the appropriate section when we have the new syntax f
272272

273273
<div class="example">
274274
This example produces the mixture of a red and a sky blue,
275-
in ''lch()'' colorspace (the default),
275+
in ''lch()'' color space (the default),
276276
with the hue being 75.23% of that of the red
277277
(and thus, 24.77% of that of the blue).
278278
The longer hue arc has been specified.
@@ -305,7 +305,7 @@ Let's move this example to the appropriate section when we have the new syntax f
305305
This example produces the mixture of
306306
the same two colors as the previous example
307307
(a red and a sky blue),
308-
in ''lch()'' colorspace (the default),
308+
in ''lch()'' color space (the default),
309309
with the hue being 75.23% of that of the red
310310
(and thus, 24.77% of that of the blue).
311311
This time, the lightness is set to 68.4% and
@@ -326,7 +326,7 @@ Let's move this example to the appropriate section when we have the new syntax f
326326
This example produces the mixture of
327327
the same two colors as the previous examples
328328
(a red and a sky blue),
329-
in ''xyz'' colorspace,
329+
in ''xyz'' color space,
330330
with the mixture being 75.23% of that of the red
331331
(and thus, 24.77% of that of the blue).
332332

@@ -344,7 +344,7 @@ Let's move this example to the appropriate section when we have the new syntax f
344344

345345
<div class="example">
346346
This example produces the mixture of red and yellow,
347-
in ''lch()'' colorspace (the default),
347+
in ''lch()'' color space (the default),
348348
with the lightness being 30% of the lightness of red
349349
(and thus, 70% of the lightness of yellow).
350350
The chroma and hue of red are left unchanged.
@@ -373,7 +373,7 @@ Let's move this example to the appropriate section when we have the new syntax f
373373
<!--
374374
<img src="images/mix_red_yellow_65.png" alt="Result of color-mix(red, yellow, 65%" /> -->
375375

376-
<!-- todo: example that specifies a different colorspace -->
376+
<!-- todo: example that specifies a different color space -->
377377

378378
<!-- worked example in Lab space
379379
with 38% of a and 38% of b
@@ -409,7 +409,7 @@ which is rgb(52.446% 45.821% 62.953%)
409409
This example produces the mixture of
410410
the same two colors as the previous example
411411
(a red and a sky blue),
412-
in Lab colorspace,
412+
in Lab color space,
413413
with 38% of a and 38% of b.
414414
The lightness of the red is left unchanged.
415415

@@ -620,16 +620,16 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
620620

621621
This function takes one <<color>> specification
622622
and returns the result of adjusting that color,
623-
in a given colorspace,
623+
in a given color space,
624624
by a specified color-adjuster.
625625

626626
Unless otherwise specified,
627-
the adjustment is done in the ''lch'' colorspace.
627+
the adjustment is done in the ''lch'' color space.
628628

629629
Multiple color functions can be specified.
630630

631631
<pre class='prod'>
632-
<dfn>color-adjust()</dfn> = color-adjust( <<color>> [ <<color-adjuster>> && [ in <<colorspace>> ]? ]? )
632+
<dfn>color-adjust()</dfn> = color-adjust( <<color>> [ <<color-adjuster>> && [ in <<color space>> ]? ]? )
633633
</pre>
634634

635635
<pre class='prod'>
@@ -646,16 +646,16 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
646646
<dfn>&lt;hue-adjuster></dfn> = hue [shorter | longer | increasing | decreasing | specified ]?
647647
</pre>
648648

649-
The meaning of the adjusters is defined by colorspace.
650-
For example, if the [=colorspace=] is [=hsl=],
649+
The meaning of the adjusters is defined by color space.
650+
For example, if the [=color space=] is [=hsl=],
651651
hue means the HSL hue, which is not the same as the LCH hue;
652-
if the colorspace is [=lch=],
652+
if the color space is [=lch=],
653653
lightness means the LCH Lightness, which is the same as Lab lightness,
654654
but different to the HSL Lightness.
655655

656-
Only the [=color-adjuster=]s defined for a given [=colorspace=] are available.
657-
For example, it is not possible to use the HWB [=whiteness=] adjuster unless the colorspace is [=hwb=].
658-
The alpha adjuster is available on any [=colorspace=].
656+
Only the [=color-adjuster=]s defined for a given [=color space=] are available.
657+
For example, it is not possible to use the HWB [=whiteness=] adjuster unless the color space is [=hwb=].
658+
The alpha adjuster is available on any [=color space=].
659659

660660
Note: not all [=color-adjuster=]s are equally useful.
661661
Adjustments in LCH are the most useful, which is why it is the default.
@@ -672,7 +672,7 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
672672

673673
<div class="example">
674674
This example produces the adjustment of peru (#CD853F),
675-
in ''lch()'' colorspace (the default),
675+
in ''lch()'' color space (the default),
676676
with the lightness being reduced by 20%.
677677
The chroma and hue of red are left unchanged.
678678

@@ -796,7 +796,7 @@ so it has meaningful values for the channels.
796796

797797
(Note, tho, that an easier and more accurate way to grayscale a color
798798
is to use the ''lch()'' function,
799-
as that colorspace is more accurate to human perception:
799+
as that color space is more accurate to human perception:
800800
''lch(from var(--color) l 0 h)'' preserves the lightness,
801801
but zeroes out the chroma,
802802
which determines how "colorful" the color is.)
@@ -822,7 +822,7 @@ the allowed [=channel keywords=] are:
822822
* <dfn value for="rgb()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
823823

824824
<div class="example">
825-
To manipulate color channels in the sRGB colorspace:
825+
To manipulate color channels in the sRGB color space:
826826

827827
<pre>
828828
rgb(from <span class="swatch" style="--color: indianred"></span> indianred 255 g b)
@@ -993,14 +993,14 @@ Changes {#changes}
993993

994994
<ul>
995995
<!--
996-
<li>Added `in` keyword before <<colorspace>> tokens in functions</li>
996+
<li>Added `in` keyword before <<color space>> tokens in functions</li>
997997
<li>Removed adjusters from color-mix</li>
998998
-->
999999
<!-- to 28 Jan 2021 -->
10001000
<!-- removed interpolation section changes, added to Color 4 -->
10011001
<!-- to 5 Jan 2021 -->
10021002
<li>Link to CSS 4 definition of color serialization</li>
1003-
<li>Added separate section for colorspaces</li>
1003+
<li>Added separate section for color spaces</li>
10041004
<li>Updated color-adjust example</li>
10051005
<li>Added explanatory diagrams</li>
10061006
<li>Deal with unresolved percentages</li>
@@ -1014,8 +1014,8 @@ Changes {#changes}
10141014
<li>added vs keyword to color-contrast</li>
10151015
<li>added xyz adjuster to grammar</li>
10161016
<li>added hue adjuster keywords</li>
1017-
<li>add XYZ colorspace for mixing</li>
1018-
<li>defined color-adjuster and colorspace</li>
1017+
<li>add XYZ color space for mixing</li>
1018+
<li>defined color-adjuster and color space</li>
10191019
<li>allowed mix percent to default to 50%</li>
10201020
<li>added worked examples and diagrams</li>
10211021
<li>corrected minor spelling, syntax and formatting issues</li>

css-color-5/images/CH-mixing.svg

Lines changed: 1 addition & 1 deletion
Loading

css-color-5/images/CH-mixing2.svg

Lines changed: 1 addition & 1 deletion
Loading

css-color-5/images/CH-mixing2b.svg

Lines changed: 1 addition & 1 deletion
Loading

css-color-5/images/CH-mixing2c.svg

Lines changed: 1 addition & 1 deletion
Loading

css-color-5/images/CH-mixing3.svg

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)