@@ -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".
54535467Serializing 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