Skip to content

Commit 102f3c3

Browse files
committed
[css-color-5] RCS has number or percent everywhere, see w3c#7114
1 parent 0d10110 commit 102f3c3

File tree

1 file changed

+46
-32
lines changed

1 file changed

+46
-32
lines changed

css-color-5/Overview.bs

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1011,7 +1011,7 @@ so it has meaningful values for the channels.
10111011
without changing any other aspect of the color.
10121012

10131013
Note as well that the [=origin color=] is a color keyword
1014-
(effectively RGB),
1014+
(and thus, sRGB),
10151015
but it's automatically interpreted as an LCH color
10161016
due to being used in the ''lch()'' function.
10171017
</div>
@@ -1048,15 +1048,16 @@ so it has meaningful values for the channels.
10481048
for the obsolete NTSC color space,
10491049
not sRGB.)
10501050

1051-
(Note, though, that an easier and more accurate way to grayscale a color
1052-
is to use the ''lch()'' function,
1051+
(Note, too, that this is just to illustrate the syntax;
1052+
an easier and more accurate way to grayscale a color
1053+
is to use the ''oklch()'' function,
10531054
as that color space is more accurate to human perception:
1054-
''lch(from var(--color) l 0 h)'' preserves the lightness,
1055+
''oklch(from var(--color) l 0 h)'' preserves the lightness,
10551056
but zeroes out the chroma,
10561057
which determines how "colorful" the color is.)
10571058
</div>
10581059

1059-
<h3 id="relative-RGB">Relative RGB colors</h3>
1060+
<h3 id="relative-RGB">Relative sRGB colors</h3>
10601061

10611062
The grammar of the ''rgb()'' function is extended as follows:
10621063

@@ -1072,9 +1073,10 @@ Within a [=relative color=] syntax ''rgb()'' function,
10721073
the allowed [=channel keywords=] are:
10731074

10741075
* <dfn value for="rgb()">r</dfn>, <dfn value for="rgb()">g</dfn>, and <dfn value for="rgb()">b</dfn>
1075-
are all <<percentage>>s
1076+
are all <<percentage>>s or <<number>>s
10761077
that correspond to the [=origin color's=] red, green, and blue channels
1077-
after its conversion to sRGB
1078+
after its conversion to sRGB. For <<number>>s, 255 (or 255.0)
1079+
is equivalent to 100%.
10781080
* <dfn value for="rgb()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
10791081

10801082
<div class="example">
@@ -1117,7 +1119,9 @@ The grammar of the ''hsl()'' function is extended as follows:
11171119

11181120
<pre class='prod'>
11191121
<dfn>hsl()</dfn> = hsl(([from <<color>>]?
1120-
[<<hue>> | none] [<<percentage>> | none] [<<percentage>> | none]
1122+
[<<hue>> | none]
1123+
[<<percentage>> | <<number>> | none]
1124+
[<<percentage>> | <<number>> | none]
11211125
[ / [<<alpha-value>> | none] ]? )
11221126
</pre>
11231127

@@ -1130,7 +1134,7 @@ the allowed [=channel keywords=] are:
11301134
after its conversion to sRGB,
11311135
normalized to a [0deg, 360deg) range
11321136
* <dfn value for="hsl()">s</dfn> and <dfn value for="hsl()">l</dfn>
1133-
are <<percentage>>s that correspond to the [=origin color's=] HSL saturation and lightness
1137+
are <<percentage>>s or <<number>>s that correspond to the [=origin color's=] HSL saturation and lightness
11341138
after its conversion to sRGB
11351139
* <dfn value for="hsl()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
11361140

@@ -1151,7 +1155,9 @@ The grammar of the ''hwb()'' function is extended as follows:
11511155

11521156
<pre class='prod'>
11531157
<dfn>hwb()</dfn> = hwb([from <<color>>]?
1154-
[<<hue>> | none] [<<percentage>> | none] [<<percentage>> | none]
1158+
[<<hue>> | none]
1159+
[<<percentage>> | <<number>> | none]
1160+
[<<percentage>> | <<number>> | none]
11551161
[ / [<<alpha-value>> | none] ]? )
11561162
</pre>
11571163

@@ -1164,7 +1170,7 @@ the allowed [=channel keywords=] are:
11641170
after its conversion to sRGB,
11651171
normalized to a [0deg, 360deg) range
11661172
* <dfn value for="hwb()">w</dfn> and <dfn value for="hwb()">b</dfn>
1167-
are <<percentage>>s that correspond to the [=origin color's=] HWB whiteness and blackness
1173+
are <<percentage>>s or <<number>>s that correspond to the [=origin color's=] HWB whiteness and blackness
11681174
after its conversion to sRGB
11691175
* <dfn value for="hwb()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
11701176

@@ -1174,18 +1180,20 @@ The grammar of the ''lab()'' function is extended as follows:
11741180

11751181
<pre class='prod'>
11761182
<dfn>lab()</dfn> = lab([from <<color>>]?
1177-
[<<percentage>> | none] [<<number>> | none] [<<number>> | none]
1183+
[<<percentage>> | <<number>> | none]
1184+
[<<percentage>> | <<number>> | none]
1185+
[<<percentage>> | <<number>> | none]
11781186
[ / [<<alpha-value>> | none] ]? )
11791187
</pre>
11801188

11811189

11821190
Within a [=relative color=] syntax ''lab()'' function,
11831191
the allowed [=channel keywords=] are:
11841192

1185-
* <dfn value for="lab()">l</dfn> is a <<percentage>>
1193+
* <dfn value for="lab()">l</dfn> is a <<percentage>> or <<number>>
11861194
that corresponds to the [=origin color's=] CIE Lightness
1187-
* <dfn value for="lab()">a</dfn> and <dfn value for="lab()">b</dfn> are <<number>>s
1188-
that correspond to the [=origin color's=] CIELab a and b axises
1195+
* <dfn value for="lab()">a</dfn> and <dfn value for="lab()">b</dfn> are <<percentage>>s or <<number>>s
1196+
that correspond to the [=origin color's=] CIELab a and b axes
11891197
* <dfn value for="lab()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
11901198

11911199
<div class="example">
@@ -1216,17 +1224,19 @@ The grammar of the ''oklab()'' function is extended as follows:
12161224

12171225
<pre class='prod'>
12181226
<dfn>oklab()</dfn> = oklab([from <<color>>]?
1219-
[<<percentage>> | none] [<<number>> | none] [<<number>> | none]
1227+
[<<percentage>> | <<number>> | none]
1228+
[<<percentage>> | <<number>> | none]
1229+
[<<percentage>> | <<number>> | none]
12201230
[ / [<<alpha-value>> | none] ]? )
12211231
</pre>
12221232

12231233

12241234
Within a [=relative color=] syntax ''oklab()'' function,
12251235
the allowed [=channel keywords=] are:
12261236

1227-
* <dfn value for="oklab()">l</dfn> is a <<percentage>>
1237+
* <dfn value for="oklab()">l</dfn> is a <<percentage>> or <<number>>
12281238
that corresponds to the [=origin color's=] OKLab Lightness
1229-
* <dfn value for="oklab()">a</dfn> and <dfn value for="oklab()">b</dfn> are <<number>>s
1239+
* <dfn value for="oklab()">a</dfn> and <dfn value for="oklab()">b</dfn> are <<percentage>>s or <<number>>s
12301240
that correspond to the [=origin color's=] OKLab a and b axes
12311241
* <dfn value for="oklab()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
12321242

@@ -1236,17 +1246,19 @@ The grammar of the ''lch()'' function is extended as follows:
12361246

12371247
<pre class='prod'>
12381248
<dfn>lch()</dfn> = lch([from <<color>>]?
1239-
[<<percentage>> | none] [<<number>> | none] [<<hue>> | none]
1249+
[<<percentage>> | <<number>> | none]
1250+
[<<percentage>> | <<number>> | none]
1251+
[<<hue>> | none]
12401252
[ / [<<alpha-value>> | none] ]? )
12411253
</pre>
12421254

12431255

12441256
Within a [=relative color=] syntax ''lch()'' function,
12451257
the allowed [=channel keywords=] are:
12461258

1247-
* <dfn value for="lch()">l</dfn> is a <<percentage>>
1259+
* <dfn value for="lch()">l</dfn> is a <<percentage>> or <<number>>
12481260
that corresponds to the [=origin color's=] CIE Lightness
1249-
* <dfn value for="lch()">c</dfn> is a <<number>>
1261+
* <dfn value for="lch()">c</dfn> is a <<percentage>> or <<number>>
12501262
that corresponds to the [=origin color's=] LCH chroma
12511263
* <dfn value for="lch()">h</dfn> is an <<angle>>
12521264
that corresponds to the [=origin color's=] LCH hue,
@@ -1361,17 +1373,19 @@ The grammar of the ''oklch()'' function is extended as follows:
13611373

13621374
<pre class='prod'>
13631375
<dfn>oklch()</dfn> = oklch([from <<color>>]?
1364-
[<<percentage>> | none] [<<number>> | none] [<<hue>> | none]
1376+
[<<percentage>> | <<number>> | none]
1377+
[<<percentage>> | <<number>> | none]
1378+
[<<hue>> | none]
13651379
[ / [<<alpha-value>> | none] ]? )
13661380
</pre>
13671381

13681382

13691383
Within a [=relative color=] syntax ''oklch()'' function,
13701384
the allowed [=channel keywords=] are:
13711385

1372-
* <dfn value for="oklch()">l</dfn> is a <<percentage>>
1386+
* <dfn value for="oklch()">l</dfn> is a <<percentage>> or <<number>>
13731387
that corresponds to the [=origin color's=] OKLab Lightness
1374-
* <dfn value for="oklch()">c</dfn> is a <<number>>
1388+
* <dfn value for="oklch()">c</dfn> is a <<percentage>> or <<number>>
13751389
that corresponds to the [=origin color's=] OKLCH chroma
13761390
* <dfn value for="oklch()">h</dfn> is an <<angle>>
13771391
that corresponds to the [=origin color's=] OKLCH hue,
@@ -1426,14 +1440,14 @@ The OKLCH chroma has dropped from 0.251 to 0.117.
14261440
<dfn>custom-params</dfn> = <<dashed-ident>> [ <<number>> | <<percentage>> | none ]#
14271441
<dfn>predefined-rgb-params</dfn> = <<predefined-rgb>> [ <<number>> | <<percentage>> | none ]{3}
14281442
<dfn>predefined-rgb</dfn> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
1429-
<dfn>xyz-params</dfn> = <<xyz>> [ <<number>> | none ]{3}
1443+
<dfn>xyz-params</dfn> = <<xyz>> [ <<number>> | <<percentage>> | none ]{3}
14301444
<dfn>xyz</dfn> = xyz | xyz-d50 | xyz-d65
14311445
</pre>
14321446

14331447
<!-- check this test, remove any fallback testing -->
1434-
<!-- <wpt>
1448+
<wpt>
14351449
color-function-parsing.html
1436-
</wpt> -->
1450+
</wpt>
14371451

14381452
The color function takes parameters specifying a color, in an explicitly listed color space.
14391453

@@ -1468,21 +1482,21 @@ the number and name of the allowed [=channel keywords=] are:
14681482

14691483
* defined by the '@color-profile/components' descriptor on the corresponding ''@color-profile'',
14701484
if present;
1471-
otherwise, no relative color manipulation is valid. They are <<percentage>>s that correspond to the [=origin color's=] channels
1472-
after its conversion to the color space of the color profile.
1485+
otherwise, no relative color manipulation is valid. They are <<number>>s or <<percentage>>s that correspond to the [=origin color's=] channels
1486+
after its conversion to the color space of the color profile. For <<number>>s, 1.0 corresponds to 100%.
14731487

14741488
Within a [=relative color=] syntax ''color()'' function using <<predefined-rgb-params>>,
14751489
the allowed [=channel keywords=] are:
14761490

14771491
* <dfn value for="color()">r</dfn>, <dfn value for="color()">g</dfn>, and <dfn value for="color()">b</dfn>
1478-
are all <<percentage>>s
1492+
are all <<percentage>>s or <<number>>s
14791493
that correspond to the [=origin color's=] red, green, and blue channels
14801494
after its conversion to the predefined RGB color space.
14811495

14821496
Within a [=relative color=] syntax ''color()'' function using <<xyz-params>>,
14831497
the allowed [=channel keywords=] are:
14841498

1485-
* <dfn value for="color()">x</dfn>, <dfn value for="color()">y</dfn>, <dfn value for="color()">z</dfn> are all <<number>>s
1499+
* <dfn value for="color()">x</dfn>, <dfn value for="color()">y</dfn>, <dfn value for="color()">z</dfn> are all <<percentage>>s or <<number>>s
14861500
that correspond to the [=origin color's=] X, Y and Z channels
14871501
after its conversion to relative CIE XYZ color space
14881502
adapted to the relevant white point.
@@ -2066,7 +2080,7 @@ or any other color or monochrome output device which has been characterized.
20662080
}
20672081
</pre>
20682082

2069-
This example does not use illustrative swatches, because most of the colors are outside of sRGB.
2083+
Note: This example does not use illustrative swatches, because most of the colors are outside of sRGB.
20702084

20712085
This CMYK color corresponds to lab(56.596645% -58.995875 28.072154)
20722086
or lch(56.596645% 65.33421077211648 154.5533771086801).

0 commit comments

Comments
 (0)