8000 [css-color-4] Specified values for named colors, #7870 #1004 · blazein45/csswg-drafts@64708df · GitHub
Skip to content

Commit 64708df

Browse files
committed
[css-color-4] Specified values for named colors, w3c#7870 w3c#1004
1 parent c3dde2f commit 64708df

File tree

1 file changed

+83
-34
lines changed

1 file changed

+83
-34
lines changed

css-color-4/Overview.bs

Lines changed: 83 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5259,40 +5259,54 @@ Resolving sRGB values</h3>
52595259
* ''hsl()'' and ''hsla()'' values
52605260
* ''hwb()'' values
52615261
* [=named colors=]
5262+
* [=system colors=]
5263+
* <a href="#deprecated-system-colors">deprecated-colors</a>
5264+
5265+
If the sRGB color was explicitly specified by the author as a [=named color=],
5266+
or as a [=system color=],
5267+
the [=specified value=] is that named or system color, converted to all lowercase.
5268+
5269+
<div class="example" id="ex-named-case">
5270+
<p>The author-provided mixed-case form below has a specified value in all lowercase.</p>
5271+
<pre class="lang-css"><span class="swatch" style="--color: purple"></span> pUrPlE
5272+
5273+
<span class="swatch" style="--color: purple"></span> purple</pre>
5274+
</div>
5275+
5276+
<!--
5277+
This is not observable currently
5278+
5279+
<div class="example" id="ex-hsl-case">
5280+
<p>For example, the first form below is treated as identical to the second:</p>
5281+
<pre class="lang-css"><span class="swatch" style="--color: hsl(39 100% 50%)"></span> HsL(39 100% 50%)
5282+
<span class="swatch" style="--color: hsl(39 100% 50%)"></span> hsl(39 100% 50%)</pre>
5283+
</div>
52625284

5263-
While the function names and named colors
5285+
-->
5286+
5287+
<!-- While the function names and named colors
52645288
are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>,
52655289
the [=specified value=]
52665290
does not preserve any mixed casing
5267-
and is treated as being all lowercase.
5291+
and is treated as being all lowercase. -->
5292+
5293+
5294+
Otherwise, the specified, computed and used value
5295+
is the corresponding sRGB color,
5296+
paired with the specified alpha channel
5297+
and defaulting to opaque if unspecified).
52685298

52695299
<wpt>
52705300
parsing/color-computed-rgb.html
52715301
</wpt>
52725302

5273-
<div class="example" id="ex-hsl-case">
5274-
<p>For example, the first form below is treated as identical to the second:</p>
5275-
<pre class="lang-css"><span class="swatch" style="--color: hsl(39 100% 50%)"></span> HsL(39 100% 50%)
52765303

5277-
<span class="swatch" style="--color: hsl(39 100% 50%)"></span> hsl(39 100% 50%)</pre>
5278-
<p>Similarly the first form below is treated as identical to the second:</p>
5279-
<pre class="lang-css"><span class="swatch" style="--color: purple"></span> pUrPlE
5280-
5281-
<span class="swatch" style="--color: purple"></span> purple</pre>
5282-
</div>
5283-
5284-
The computed and used value
5285-
is the corresponding sRGB color,
5286-
paired with the specified alpha channel
5287-
and defaulting to opaque if unspecified).
5288-
5289-
5290-
<div class="example" id="ex-hsl-computed">
5291-
<p>For example, the computed value of</p>
5292-
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> hsl(38.824 100% 50%)</pre>
5293-
<p>is</p>
5294-
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> rgb(255, 165, 0)</pre>
5295-
</div>
5304+
<div class="example" id="ex-hsl-computed">
5305+
<p>For example, the computed value of</p>
5306+
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> hsl(38.824 100% 50%)</pre>
5307+
<p>is</p>
5308+
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> rgb(255, 165, 0)</pre>
5309+
</div>
52965310

52975311

52985312
<h3 id="resolving-lab-lch-values">
@@ -5453,8 +5467,9 @@ as the string "none".
54535467
Serializing alpha values</h3>
54545468

54555469
This applies to any <<color>> value which can take an optional alpha value.
5470+
It does not apply to the ''opacity'' property.
54565471

5457-
If the alpha is exactly 1,
5472+
If, after clamping to the range [0.0, 1.0] the alpha is exactly 1,
54585473
it is omitted from the serialization;
54595474
an implicit value of 1 (fully opaque) is the default.
54605475

@@ -5516,10 +5531,22 @@ Serializing sRGB values</h3>
55165531

55175532
<!-- are all system colors assumed to be sRGB? -->
55185533

5519-
is derived from the [=computed value=] and thus,
5520-
uses either the ''rgb()'' or ''rgba()'' form
5521-
(depending on whether the alpha is exactly 1, or not),
5522-
with lowercase letters for the function name.
5534+
is derived from the [=specified value=].
5535+
5536+
When serializing the value of a property
5537+
which was set by the author to a CSS named color,
5538+
therefore, for the [=specified value=],
5539+
the (all lowercase) named value is retained.
5540+
For the computed and used value,
5541+
the corresponding sRGB value is used.
5542+
5543+
For all other sRGB values,
5544+
the specified, computed and used value
5545+
is the corresponding sRGB value.
5546+
5547+
Corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form
5548+
(depending on whether the (clamped) alpha is exactly 1, or not),
5549+
with all lowercase letters for the function name.
55235550

55245551
During serialization,
55255552
any [=missing=] values
@@ -5532,7 +5559,6 @@ Serializing sRGB values</h3>
55325559
with a range of [0-255], regardless of
55335560
the bit depth with which they are stored.
55345561

5535-
55365562
<a href="#serializing-alpha-values">As noted earlier</a>,
55375563
unitary alpha values are not explicitly serialized.
55385564
Also, for compatibility, if the alpha is exactly 1,
@@ -5541,7 +5567,6 @@ Serializing sRGB values</h3>
55415567
otherwise, the ''rgba()'' form is used,
55425568
with an explicit alpha value.
55435569

5544-
55455570
For compatibility,
55465571
the legacy form with comma separators is used;
55475572
exactly one ASCII space follows each comma.
@@ -5557,9 +5582,33 @@ Serializing sRGB values</h3>
55575582
<p>is the string "rgba(29, 164, 192, 0.95)"</p>
55585583
</div>
55595584

5585+
<div class="example" id="ex-hwb-serial">
5586+
For example, an author-supplied value:
5587+
5588+
<pre class="lang-css">
5589+
<span class="swatch" style="--color: rgb(70% 36.67% 20% / 0.5)"></span> hwb(740deg 20% 30% / 50%)
5590+
</pre>
5591+
5592+
Would be normalized first to
5593+
5594+
<pre class="lang-css">
5595+
<span class="swatch" style="--color: rgb(70% 36.67% 20% / 0.5)"></span> hwb(20 20% 30% / 50%)
5596+
</pre>
5597+
5598+
and then converted to sRGB and serialized as
5599+
5600+
<pre class="lang-css">
5601+
<span class="swatch" style="--color: rgb(70% 36.67% 20% / 0.5)"></span> rgba(178.5, 93.5, 51, 0.5)
5602+
</pre>
5603+
5604+
The precision of the returned result
8096 5605+
is <a href="#sRGB-precision">described below</a>.
5606+
5607+
</div>
5608+
55605609
Note: contrary to CSS Color 3,
55615610
the parameters of the ''rgb()'' function
5562-
are of type <<number>> not <<integer>>.
5611+
are of type <<number>>, not <<integer>>.
55635612
Thus, any higher precision than eight bits
55645613
is indicated with a fractional part.
55655614

@@ -5582,7 +5631,7 @@ Serializing sRGB values</h3>
55825631
color values returned from
55835632
<span style="font-family:monospace">getComputedStyle</span>
55845633
to have <<integer>> component values,
5585-
are advised to update them to cope with
5634+
are advised to update them to also cope with
55865635
<<number>>.
55875636

55885637
<div class="example" id="ex-rgb-number">
@@ -5596,7 +5645,7 @@ Serializing sRGB values</h3>
55965645
</div>
55975646

55985647
<div class="example" id="ex-rgb-notrail">
5599-
<p>The serialized value of </p>
5648+
<p>The serialized computed value of </p>
56005649
<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> ''goldenrod''</pre>
56015650
<p>is the string "rgb(218, 165, 32)"
56025651
and not the string "rgb(218.000, 165.000, 32.000)"</p>

0 commit comments

Comments
 (0)