Skip to content
Permalink
main
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<pre class=metadata>
Title: CSS Color Module Level 4
Status: ED
Prepare for TR: no
Work Status: Refining
ED: https://drafts.csswg.org/css-color/
TR: https://www.w3.org/TR/css-color-4/
Previous Version: https://www.w3.org/TR/2021/WD-css-color-4-20210601/
Shortname: css-color
Group: csswg
Level: 4
Implementation Report: https://test.csswg.org/harness/results/css-color-4_dev/grouped/
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact, w3cid 42199
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Abstract: This specification describes CSS <<color>> values and properties for foreground color and group opacity.
Repository: w3c/csswg-drafts
Ignored Terms: stacking context, double, octet
Complain About: missing-example-ids true
Complain About: broken-links false
Complain About: accidental-2119 true
Inline Github Issues: title
Default Highlight: css
WPT Path Prefix: css/css-color/
WPT Display: closed
</pre>
<pre class='ignored-specs'>
spec:css-color-3
</pre>
<pre class="link-defaults">
spec:css-color-4; type:descriptor; for:@color-profile; text:src
spec:css-color-4; type:dfn; text:color space
spec:css-color-4; type:dfn; text:gamut
</pre>
<pre class=biblio>
{
"TIFF": {
"href": "https://www.loc.gov/preservation/digital/formats/fdd/fdd000022.shtml",
"title": "TIFF Revision 6.0",
"date": "3 June 1992"
},
"Sharma": {
"href": "http://www2.ece.rochester.edu/~gsharma/ciede2000/",
"title": "The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations",
"authors": "G. Sharma, W. Wu, E. N. Dalal",
"journal": "Color Research and Application, vol. 30. No. 1, pp. 21-30",
"date": "February 2005"
}
}
</pre>
<link rel="stylesheet" href="style.css" />
<style>
table.named-color-table thead th { text-align:center; background:black; color:white; }
table.named-color-table th, table.named-color-table td { padding: 0 .25em; }
table.named-color-table td { text-align:center; text-transform:uppercase; }
table.named-color-table td:nth-child(-n+2) { border:1px solid black; }
table.named-color-table td:nth-child(n+4) { background: silver; }
.color-table {
background: #808080;
display: table;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.color-table table { padding:1em; margin:0; float:left; }
.color-table td, .color-table th { font-size:smaller; }
.color-table th { white-space: pre-line; }
.color-table td { background: currentcolor; }
.color-table .white { color: white; }
table.deltaE td {border: 4px solid white; padding: 6px; font-size: 1.4em;}
table.deltaE td.dE0 { background: rgb(68, 243, 91)}
table.deltaE td.dE1 { background: rgb(153, 243, 68)}
table.deltaE td.dE2 { background: rgb(217, 243, 68)}
table.deltaE td.dE3 { background: rgb(243, 240, 68)}
table.deltaE td.dE4 { background: rgb(243, 202, 68)}
table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white}
</style>
<h2 id="introduction">
Introduction</h2>
<em>This section is not normative.</em>
This module describes CSS properties which
allow authors to specify
the foreground color and opacity of the text content of an element.
This module also describes in detail the CSS <<color>> value type.
It not only defines the color-related properties and values that
already exist in <a href="https://www.w3.org/TR/CSS1">CSS1</a>, <a
href="https://www.w3.org/TR/CSS2/">CSS2</a>,
and <a href="https://www.w3.org/TR/css-color-3/">CSS Color 3</a>,
but also defines new properties and values.
In particular, it allows specifying colors
in other [=color spaces=] than sRGB;
previously, the more saturated colors outside the sRGB gamut
could not be used in CSS
even if the display device supported them.
In addition to the family of
<abbr title="red-green-blue">RGB</abbr> color spaces,
[=color spaces=] with other primaries
such as <abbr title="cyan-magenta-yellow-black">CMYK</abbr> or
<abbr title="black-cyan-magenta-yellow-green-orange-violet">KCMYGOV</abbr>
are supported.
A <a href="https://test.csswg.org/harness/results/css-color-4_dev/grouped/">draft implementation report</a> is available.
<h3 id="values">
Value Definitions</h3>
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the <a>CSS-wide keywords</a> as their property value.
For readability they have not been repeated explicitly.
<h2 id="terminology">Color terminology</h2>
A <dfn export>color</dfn> is a definition (numeric or textual)
of the human visual perception of a light
or a physical object illuminated with light.
The objective study of human color perception is termed
<abbr title="colorimetry is the measurement of human color perception">colorimetry</abbr>.
If two objects have different
<abbr title="the amount of light at each wavelength">spectra</abbr>,
but produce the same physical sensation,
we say they have the same color.
<div class="example" id="ex-cal-leaf">For example a green leaf, a photograph of that leaf
displayed on a computer screen, and a print of that photograph,
are all producing a green sensation by different means.
If the screen and the printer are [=calibrated=],
the green in the leaf, and the photo, and the print will look the same.
</div>
A <dfn export>color space</dfn> is an organization of colors
with respect to an underlying
<abbr title="colorimetry is the measurement of human color perception">colorimetric</abbr>
model,
such that there is a clear, objectively-measurable meaning
for any color in that color space.
This also means that the same color can be expressed in multiple color spaces,
or transformed from one color space to another,
while looking the same.
<div class="example" id="ex-leaf-spectro"><p>A leaf is measured
with a spectrophotometer
and found to have the color
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> lch(51.2345% 21.2 130)
which is
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> lab(51.2345% -13.6271 16.2401).</p>
<p>This same color could be expressed in various color spaces:</p>
<pre class="lang-css">
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(sRGB 0.41587 0.503670 0.36664);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(display-p3 0.43313 0.50108 0.37950);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(a98-rgb 0.44091 0.49971 0.37408);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(prophoto-rgb 0.36589 0.41717 0.31333);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(rec2020 0.42210 0.47580 0.35605);
</pre>
</div>
An <dfn export>additive color space</dfn>
means that the coordinate system is linear in light intensity.
The <abbr title="International Commission on Illumination, = Commission internationale de l'éclairage (in French)">CIE</abbr>
XYZ color space is an additive color space
(in addition, the Y component of XYZ is the
<abbr title="the intensity per unit area, or 'how bright it is'">luminance</abbr>).
In an additive color space, calculations can be done
to accurately predict color mixing. Most RGB spaces
are not additive, because the components are
<em>gamma encoded</em>. Undoing this gamma encoding
produces linear-light values.
<div class="example" id="ex-additivity">
For example, if a light fixture contains two identical colored lights,
and only one is switched on,
and the color is measured to be
<span class="swatch" style="--color: rgb(47.74% 35.59% 21.53%)"></span> color(xyz 0.13 0.12 0.04),
then the color when both are switched on will be exactly twice that,
<span class="swatch" style="--color: rgb(65.57% 49.35% 30.58%)"></span> color(xyz 0.26 0.24 0.08).
If we have two differently colored spotlights shining on a stage,
and one has the measured value
<span class="swatch" style="--color: rgb(0% 60.02% 47.86%)"></span>
color(xyz 0.15 0.24 0.17)
while the other is
<span class="swatch" style="--color: rgb(50.45% 9.53% 31.04%)"></span>
color(xyz 0.11 0.06 0.06)
then we can accurately predict that if the colored beams are made to overlap,
the color of the mixture will be the sum
of the XYZ component values, or
<span class="swatch" style="--color: rgb(75.5% 51.71% 56.61%)"></span>
color(xyz 0.26 0.30 0.23).
</div>
A <dfn export>chromaticity</dfn> is a color measurement
where the lightness component has been factored out.
From the identical lights example above,
the <em>u',v'</em> chromaticity with one light is
(0.2537, 0.5268)
and the chromaticity is the same with both lights
(they are the same color, it is just brighter).
Chromaticities are additive,
so they accurately predict
the chromaticity (but not the resulting lightness)
of a mixture.
Being two-dimensional, chromaticity is easily represented
on a <em>chromaticity diagram</em>
to predict the chromaticity of a color mixture.
Any two colors can be mixed, and the resulting colors
will lie on the line joining them on the diagram.
Three colors form a plane, and the resulting colors
will lie in the triangle they form on the diagram.
When the measured physical characteristics
(such as the <abbr title="measured color, irrespective of lightness">chromaticities</abbr> of the primary colors it uses,
or the colors produced in response to a given set of inputs)
of a [=color space=] or a color-producing device are known,
it is said to be <dfn export>characterized</dfn>.
This characterization information is stored in a <em>profile</em>.
The most common type of color profile is defined by the International Color Consortium (ICC) [[!ICC]].
If in addition adjustments have been made so that a device meets calibration targets
such as white point, neutrality of greys, predictability and consistency of tone response,
then it is said to be <dfn export>calibrated</dfn>.
Real physical devices cannot yet produce every possible color that the human eye can see.
The range of colors that a given device can produce is termed the <dfn export>gamut</dfn>
<em>(not to be confused with gamma)</em>.
Devices with a limited gamut cannot produce very saturated colors,
like those found in a rainbow.
The gamuts of different [=color space=]s may be compared
by looking at the volume (in cubic Lab units) of colors that can be expressed.
The following table examines the <a href="#predefined">predefined</a> color spaces available in CSS.
<table class=gamuts>
<tr>
<th>color space</th>
<th>Volume (million Lab units)</th>
</tr>
<tr>
<td>sRGB</td>
<td>0.820</td>
</tr>
<tr>
<td>display-p3</td>
<td>1.233</td>
</tr>
<tr>
<td>a98-rgb</td>
<td>1.310</td>
</tr>
<tr>
<td>prophoto-rgb</td>
<td>2.896</td>
</tr>
<tr>
<td>rec2020</td>
<td>2.042</td>
</tr>
</table>
<h2 id="the-color-property">
Foreground Color: the 'color' property</h2>
<pre class=propdef>
Name: color
Value: <<color>>
Initial: CanvasText
Applies to: all elements and text
Inherited: yes
Percentages: N/A
Computed value: computed color, see <a href="#resolving-color-values">resolving color values</a>
Animation type: by computed value type
</pre>
<wpt>
color-001.html
color-002.html
color-003.html
inheritance.html
</wpt>
This property describes the foreground fill color of an element's text content.
In addition, it provides the value that ''<color>/currentcolor'' resolves to.
There are several different ways to syntactically specify a given color.
<div class="example" id="ex-lime">
For example, to specify the sRGB color lime green:
<pre class="lang-css">
em { color: <span class="swatch" style="--color: lime"></span>&nbsp;lime; } /* color keyword */
em { color: <span class="swatch" style="--color: lime"></span>&nbsp;rgb(0 255 0); } /* RGB range 0-255 */
em { color: <span class="swatch" style="--color: lime"></span>&nbsp;rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color: <span class="swatch" style="--color: lime"></span>&nbsp;color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */
</pre>
</div>
<dl>
<dt><<color>>
<dd>The <<color>> type is defined in a later section.
</dl>
<p class="note">
Note: In general, this property, including its alpha component, has
no effect on "color glyphs", such as emoji in some fonts, which are
colored by a built-in palette. Some colored fonts are able to refer
to the foreground color, such as palette entry ''0xFFFF'' in COLR
table of OpenType, and ''context-fill'' value in SVG-in-OpenType. In
that case, the foreground color is set by this property, identical
to how ''<color>/currentcolor'' value works.
<h2 id='color-type'>
Representing Colors: the <<color>> type</h2>
CSS has several syntaxes for specifying color values.
Some directly specify an sRGB color by its channels,
such as the [=hex color notation=] or ''rgb()'' function.
Others are more human-friendly to write and understand,
such as the ''hsl()'' and ''lch()'' functions,
or the long list of [=named colors=].
<h3 id="color-syntax">The <<color>> syntax</h3>
Colors are represented as a list of components,
also sometimes called “channels”,
representing axises in the color space.
Each channel has a minimum and maximum value,
and can take any value between those two.
Additionally, every color is accompanied by
an <dfn lt="alpha channel | alpha component" export>alpha component</dfn>,
indicating how transparent it is,
and thus how much of the backdrop one can see behind the color.
Colors in CSS are represented by the <dfn export><<color>></dfn> type:
<pre class='prod'>
&lt;color> = <<hex-color>> | <<named-color>> | currentcolor | transparent |
<<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> | <<hwb()>> |
<<lab()>> | <<lch()>> |
<<color()>> | <<device-cmyk()>> |
<<system-color>>
</pre>
The <dfn export>color-functions</dfn> are <<rgb()>>, <<rgba()>>,
<<hsl()>>, <<hsla()>>, <<hwb()>>,
<<lab()>>, <<lch()>>, and
<<color()>>.
Of those, <<hsl()>>, <<hsla()>>, <<hwb()>> and <<lch()>>
are <dfn export>cylindrical polar color</dfn> representations,
which specify color using a <<hue>> angle,
a central axis representing lightness
(black-to-white),
and a radius representing saturation or chroma
(how far the color is from a neutral grey).
The other color spaces are
<dfn export>rectangular orthogonal color</dfn> representations,
which specify color using three
(or more, in the case of CMYK or CMYKOGV)
orthogonal component axes.
<!-- <<device-cmyk()>> does not actually specify a color; it can't be converted to Lab -->
For easy reference in other specifications,
<dfn export>opaque black</dfn> is defined as the color <nobr>''rgb(0 0 0 / 100%)''</nobr>;
<dfn export>transparent black</dfn> is the same color,
but fully transparent--
i.e. <nobr>''rgb(0 0 0 / 0%)''</nobr>.
<h3 id="hue-syntax">The <<hue>> syntax</h3>
Hue is represented as an angle of the color circle
(the rainbow, twisted around into a circle, and with purple added between violet and red).
<pre class='prod'>
<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
</pre>
Because this value is so often given in degrees,
the argument can also be given as a number,
which is interpreted as a number of degrees.
The angles and spacing
corresponding to particular hues
depend on the color space.
For example, in HSL and HWB, which use the sRGB color space,
sRGB green is 120 degrees.
In LCH, sRGB green is 134.39 degrees,
display-p3 green is 136.01 degrees,
a98-rgb green is 145.97 degrees
and prophoto-rgb green is 141.04 degrees
(because these are all different shades of green).
For colors very close to the neutral axis,
the hue angle becomes indeterminate
(for example, in Lab,
minute changes in near-zero a and b values
give huge changes in LCH hue angle).
<span id="NaN-hue">Therefore, sometimes a hue angle of NaN
(not a number) may be returned.</span>
This impacts, for example,
<a href="#hue-interpolation">hue interpolation</a>.
<h3 id="notes">
Accessibility and Conveying Information By Color</h3>
Although colors can add significant information to documents
and make them more readable,
color by itself should not be the sole means to convey important information.
Authors should consider the W3C Web Content Accessibility Guidelines [[WCAG21]]
when using color in their documents.
> <a href="https://www.w3.org/TR/WCAG21/#use-of-color"><em>1.4.1 Use of Color:</em>
> Color is not used as the only visual means of conveying information,
> indicating an action, prompting a response, or distinguishing a visual element</a>
<h3 id="tagged-images">Color Space of Tagged Images</h3>
An <dfn export>tagged image</dfn> is an image
that is explicitly assigned a color profile,
as defined by the image format.
This is usually done by including an
International Color Consortium (ICC) profile [[!ICC]].
For example JPEG [[JPEG]], PNG [[PNG]] and TIFF [[TIFF]]
all specify a means to embed an ICC profile.
Image formats may also use other, equivalent methods, often for brevity.
For example, PNG specifies a means (the
<a href="https://www.w3.org/TR/PNG/#11sRGB">sRGB chunk</a>)
to explicitly tag an image as being in the sRGB color space,
without including the sRGB ICC profile.
Tagged RGB images,
and tagged images using a transformation of RGB such as YCbCr,
if the color profile or other identifying information is valid,
must be treated as being in the specified color space.
If the color profile or other identifying information is invalid, the image is treated as [=untagged images=]
For example, when a browser running on a system with a Display P3 monitor
displays an JPEG image
tagged as being in the ITU Rec BT.2020 [[!Rec.2020]]
color space, it must convert the colors
from ITU Rec BT.2020 to Display P3
so that they display correctly.
It must not treat the ITU Rec BT.2020 values
as if they were Display P3 values, which would produce incorrect colors.
<h3 id='untagged'>
Color Spaces of Untagged Colors</h3>
Colors specified in HTML,
and [=untagged images=] must be treated
as being in the sRGB color space ([[!SRGB]])
unless otherwise specified.
An <dfn export>untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format.
Note that this rule does not apply to untagged videos, since
<dfn export>untagged video</dfn> should be presumed to be in an ITU-defined color space.
* At below 720p, it is Recommendation ITU-R BT.601 [[!ITU-R-BT.601]]
* At 720p, it is SMPTE ST 296 (same colorimetry as 709) [[!SMPTE296]]
* At 1080p, it is Recommendation ITU-R BT.709 [[!ITU-R-BT.709]]
* At 4k (UHDTV) and above, it is ITU-R BT.2020 [[!Rec.2020]] for SDR video
<h3 id='resolving-color-values'>
Resolving <<color>> Values</h3>
Unless otherwise specified for a particular property,
[=specified value|specified=] colors are resolved to
<dfn export lt="computed color">[=computed value|computed=] colors</dfn>
and then further to <dfn export lt="used color">[=used value|used=] colors</dfn> as described below.
The [=resolved value=] of a <<color>> is its [=used value=].
<h4 id="resolving-sRGB-values">Resolving sRGB values</h4>
This applies to:
* [=hex colors=]
* ''rgb()'' and ''rgba()'' values
* ''hsl()'' and ''hsla()'' values
* ''hwb()'' values
* [=named colors=]
While the function names and named colors
are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>,
the [=specified value=]
does not preserve any mixed casing
and is treated as being all lowercase.
<wpt>
color-resolving-hsl.html
color-resolving-keywords.html
color-resolving.html
</wpt>
<div class="example" id="ex-hsl-case">
<p>For example, the first form below is treated as identical to the second:</p>
<pre class="lang-css"><span class="swatch" style="--color: hsl(39 100% 50%)"></span> HsL(39 100% 50%)
<span class="swatch" style="--color: hsl(39 100% 50%)"></span> hsl(39 100% 50%)</pre>
<p>Similarly the first form below is treated as identical to the second:</p>
<pre class="lang-css"><span class="swatch" style="--color: purple"></span> pUrPlE
<span class="swatch" style="--color: purple"></span> purple</pre>
</div>
The computed and used value
is the corresponding sRGB color,
paired with the specified alpha channel
and defaulting to opaque if unspecified).
<div class="example" id="ex-hsl-computed">
<p>For example, the computed value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> hsl(38.824 100% 50%)</pre>
<p>is</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> rgb(255, 165, 0)</pre>
</div>
<h4 id="resolving-lab-lch-values">Resolving Lab and LCH values</h4>
This applies to ''lab()'' and ''lch()'' values.
The computed and used value
is the corresponding CIE Lab or LCH color
paired with the specified alpha channel
(as a <<number>>, not a <<percentage>>;
and defaulting to opaque if unspecified).
<div class="example" id="ex-lch-computed">
<p>For example, the computed value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2 / 1)</pre>
<p>is</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2)</pre>
</div>
<h4 id="resolving-color-function-values">Resolving values of the ''color()'' function</h4>
The computed and used value
is the color in the specified [=color space=],
paired with the specified alpha channel
(as a <<number>>, not a <<percentage>>;
and defaulting to opaque if unspecified).
<div class="example" id="ex-p3-computed">
<p>For example, the computed value of</p>
<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> color(display-p3 0.823 0.6554 0.2537 /1)</pre>
<p>is</p>
<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> color(display-p3 0.823 0.6554 0.2537)</pre>
</div>
<h4 id="resolving-device-cmyk-values">Resolving ''device-cmyk'' values</h4>
The computed and used value
is the specified device-specific CMYK color,
(with components as <<number>>, not <<percentage>>)
paired with the specified alpha channel
(as a <<number>>, not a <<percentage>>;
and defaulting to opaque if unspecified).
The [=actual value=] can vary based on the operation;
for rendering to a CMYK-capable device,
it may be rendered as a CMYK color;
for blending with non-CMYK colors
or rendering to a non-CMYK device,
it must be converted
as specified in [[#device-cmyk]].
<div class="example" id="ex-device-cmyk-used">
For example,
<pre class="lang-css">
<span class="swatch" style="--color: rgb(93.124%, 44.098%, 57.491%)"></span> device-cmyk(0% 70% 20% 0%)
</pre>
has the specified and actual value
<pre class="lang-css">
<span class="swatch" style="--color: rgb(93.124%, 44.098%, 57.491%)"></span> device-cmyk(0 0.7 0.2 0)
</pre>
and will, if the implementation understands ICC profiles
and has an appropriate profile installed,
have the used value
<pre class="lang-css">
<span class="swatch" style="--color: rgb(93.124%, 44.098%, 57.491%)"></span> lab(63.673% 51.577 5.811)
</pre>
Note: As with all colors, the used value is not available to script.
</div>
<h4 id="resolving-other-colors">Resolving other colors</h4>
This applies to [=system colors=],
<a href="#deprecated-system-colors">deprecated-colors</a>,
''transparent'', and
''currentcolor''.
Each <<system-color>> keyword computes to itself.
Its used value is the corresponding color in its color space.
The computed and used value of ''transparent'' is [=transparent black=].
The ''currentcolor'' keyword computes to itself.
In the 'color' property,
the used value of ''currentcolor'' is the [=inherited value=].
In any other property,
its used value is the used value of the 'color' property on the same element.
Note: This means that if the ''<color>/currentcolor'' value is inherited,
it’s inherited as a keyword,
not as the value of the 'color' property,
so descendants will use their own 'color' property to resolve it.
<h3 id='serializing-color-values'>
Serializing <<color>> Values</h3>
This section updates and replaces that part of CSS Object Model, section
<a href="https://drafts.csswg.org/cssom-1/#serializing-css-values"> Serializing CSS Values</a>, which relates to serializing <<color>> values.
In this section, the strings used in the specification and the corresponding characters are as follows.
<table class="data">
<tr>
<th>String</th>
<th>Character</th>
</tr>
<tr>
<td>" "</td>
<td>U+0020 SPACE</td>
</tr>
<tr>
<td>","</td>
<td>U+002C COMMA</td>
</tr>
<tr>
<td>"-"</td>
<td>U+002D HYPHEN-MINUS</td>
</tr>
<tr>
<td>"."</td>
<td>U+002E FULL STOP</td>
</tr>
<tr>
<td>"/"</td>
<td>U+002F SOLIDUS</td>
</tr>
</table>
The string "." shall be used as a decimal separator,
regardless of locale,
and there shall be no thousands separator.
<h4 id="serializing-alpha-values">Serializing alpha values</h4>
This applies to any <<color>> value which can take an optional alpha value.
If the alpha is exactly 1,
it is omitted from the serialization;
an implicit value of 1 (fully opaque) is the default.
If the alpha is any other value than 1,
it is explicitly included in the serialization,
as a <<number>>, not a <<percentage>>.
The value is expressed in base ten,
with the "." character as decimal separator.
The leading zero must not be omitted.
Trailing zeroes must be omitted.
<div class="example" id="ex-alpha-trimzero">
<p>For example, an alpha value of 70%
will be serialized as the string
"0.7"
which has a leading zero before the decimal separator,
"." as decimal separator
(even if the current locale would use some other character,
such as ","),
and all digits after the "7" would be "0" and are omitted.
</p>
</div>
The precision with which alpha values are retained,
and thus the number of decimal places in the serialized value,
is not defined in this specification,
but must at least be sufficient
to round-trip integer percentage values.
Thus, the serialized value must contain
at least two decimal places
(unless trailing zeroes have been removed).
Values must be
<a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.
<div class="example" id="ex-alpha-round">
<p>For example, an alpha value of 12.3456789%
could be serialized as the strings
"0.12" or "0.123" or "0.1234" or "0.12346"
(rounding the value of 5
towards +∞
because the following digit is 6)
or any longer, rounded serialization of the same form.
</p>
</div>
<h4 id="serializing-sRGB-values">Serializing sRGB values</h4>
The serialized form of the following sRGB values:
* [=hex colors=]
* ''rgb()'' and ''rgba()'' values
* ''hsl()'' and ''hsla()'' values
* ''hwb()'' values
* [=named colors=]
is derived from the [=computed value=] and thus,
uses either the ''rgb()'' or ''rgba()'' form
(depending on whether the alpha is exactly 1, or not),
with lowercase letters for the function name.
For compatibility, the sRGB component values
are serialized in <<number>> form, not <<percentage>>).
Also for compatibility,
the component values are serialized in base 10,
with a range of [0-255], regardless of
the bit depth with which they are stored.
<a href="#serializing-alpha-values">As noted earlier</a>,
unitary alpha values are not explicitly serialized.
Also, for compatibility, if the alpha is exactly 1,
the ''rgb()'' form is used,
with an implicit alpha;
otherwise, the ''rgba()'' form is used,
with an explicit alpha value.
For compatibility,
the legacy form with comma separators is used;
exactly one ASCII space follows each comma.
This includes the comma (not slash) used
to separate the blue component of ''rgba()''
from the alpha value.
<div class="example" id="ex-rgb-ser-int-rgba">
<p>For example, the serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgba(29, 164, 192, 0.95)"></span> rgb(29 164 192 / 95%)</pre>
<p>is the string "rgba(29, 164, 192, 0.95)"</p>
</div>
Note: contrary to CSS Color 3,
the parameters of the ''rgb()'' function
are of type <<number>> not <<integer>>.
Thus, any higher precision than eight bits
is indicated with a fractional part.
Trailing fractional zeroes in any component values must be omitted;
if the fractional part consists of all zeroes,
the decimal point must also be omitted.
This means that sRGB colors specified with integer component values
will serialize with backwards-compatible integer values.
The precision with which sRGB component values are retained,
and thus the number of significant figures in the serialized value,
is not defined in this specification,
but must at least be sufficient
to round-trip eight bit values.
Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.
Note: authors of scripts which expect
color values returned from
<span style="font-family:monospace">getComputedStyle</span>
to have <<integer>> component values,
are advised to update them to cope with
<<number>>.
<div class="example" id="ex-rgb-number">
<p>
For example,</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(146.064 107.457 131.223)</pre>
<p>is now valid, and equal to</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(57.28% 42.14% 51.46%)</pre>
<p>A conformant serialized form for both,
is the string "rgb(146.06, 107.46, 131.2)".</p>
</div>
<div class="example" id="ex-rgb-notrail">
<p>The serialized value of </p>
<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> ''goldenrod''</pre>
<p>is the string "rgb(218, 165, 32)"
and not the string "rgb(218.000, 165.000, 32.000)"</p>
</div>
<h4 id="serializing-lab-lch">Serializing Lab and LCH values</h4>
The serialized form of ''lch()'' and ''lab()'' values
is derived from the [=computed value=]
and uses the ''lab()'' or ''lch()'' forms,
with lowercase letters for the function name.
The component values are serialized in base 10;
the Lightness component is serialized as
<<percentage>>, while the a and b component values
are serialized as <<number>>.
A single ASCII space character " "
must be used as the separator
between the component values.
Trailing fractional zeroes in any component values must be omitted;
if the fractional part consists of all zeroes,
the decimal point must also be omitted.
<div class="example" id="ex-lab-zero-a">
<p>The serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(60.7% 52.23% 0%)"></span> lab(56.200% 0.000 83.600)</pre>
<p>is the string "lab(56.2% 0 83.6)"</p>
</div>
<div class="example" id="ex-lch-serial">
<p>The serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(41.66% 15.34% 90.66%)"></span> lch(37% 105.0 305.00)</pre>
<p>is the string "lch(37% 105 305)",
not "lch(37% 105.0 305.00)".
</div>
The precision with which ''lab()'' component values are retained,
and thus the number of significant figures in the serialized value,
is not defined in this specification,
but due to the wide gamut must be sufficient
to round-trip L values between 0 and 100,
and a and b values between ±127,
with at least sixteen bit precision;
this will result in at least three decimal places
unless trailing zeroes have been omitted.
(half float or float, is recommended for internal storage).
Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.
Note: a and b values outside ±127 are possible
with ultrawide gamut spaces. For example, <em>all</em>
of the ''prophoto-rgb'' primaries and secondaries
exceed this range, but are within ±200.
<a href="#serializing-alpha-values">As noted earlier</a>,
unitary alpha values are not explicitly serialized.
Non-unitary alpha values must be explicitly serialized,
and the string " / "
(an ASCII space, then forward slash, then another space)
must be used to separate the b component value from the alpha value.
<div class="example" id="ex-lch-alpha">
<p>The serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgba(99.56%, 6.09%, 57.02%, 0.93)"></span> lch(56.2% 83.6 357.4 /93%)</pre>
<p>is the string "lch(56.2% 83.6 357.4 / 0.93)"</p>
</div>
<h4 id="serializing-color-function-values">Serializing values of the ''color()'' function</h4>
The serialized form of ''color()'' values
is derived from the [=computed value=]
and uses the ''color()'' form,
with lowercase letters for the function name
and the color space name.
The component values are serialized in base 10,
as <<number>>.
A single ASCII space character " "
must be used as the separator
between the component values,
and also between the color space name and the first color component.
Trailing fractional zeroes in any component values must be omitted;
if the fractional part consists of all zeroes,
the decimal point must also be omitted.
<div class="example" id="ex-color-serial">
<p>The serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgba(99.56%, 6.09%, 57.02%, 0.93)"></span> color(dIsPlAy-P3 0.964 0.763 0.787)</pre>
<p>is the string "color(display-p3 0.96 0.76 0.79)",
if two decimal places are retained.
Notice that 0.787 has rounded up to 0.79,
rather than being truncated to 0.78.
</p>
</div>
<div class="example" id="ex-color-swop-serial">
<p>The serialized value of the color in</p>
<pre class="lang-css">@color-profile --swop5c {
src: url('https://example.org/SWOP2006_Coated5v2.icc');
}
.header {
background-color: <span class="swatch" style="--color: rgb(94.903% 45.248% 59.104%)"></span> color(--swop5c 0% 70.0% 20.00% .0%);
}</pre>
<p>is the string "color(--swop5c 0 0.7 0.2 0)"</p>
</div>
<!--
the name in the @color-profile is also lowercased, right?
the serialization is not sufficient because the name and the link to the profile are also needed.
-->
If the color space is sRGB, the color space is still explicitly required in the serialized result.
The precision with which ''color()'' component values are retained,
and thus the number of significant figures in the serialized value,
is not defined in this specification,
but for CMYK color spaces must at least be sufficient
to round-trip values
with eight bit precision;
this will result in at least two decimal places
unless trailing zeroes have been omitted.
For the predefined color spaces,
the <em>minimum</em> precision for round-tripping is as follows:
<table class="data">
<tr><th>color space</th><th>Minimum bits</th></tr>
<tr>
<td>''srgb''</td>
<td>10</td>
</tr>
<tr>
<td>''display-p3''</td>
<td>10</td>
</tr>
<tr>
<td>''a98-rgb''</td>
<td>10</td>
</tr>
<tr>
<td>''prophoto-rgb''</td>
<td>12</td>
</tr>
<tr>
<td>''rec2020''</td>
<td>12</td>
</tr>
<tr>
<td>''xyz''</td>
<td>16</td>
</tr>
</table>
(16bit, half-float, or float <em>per component</em>
is recommended for internal storage).
Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.
Note: compared to the legacy forms
such as ''rgb()'', ''hsl()'' and so on,
''color(srgb)'' has a higher minimum precision requirement.
Stylesheet authors who prefer higher precision
are thus encouraged to use the ''color(srgb)'' form.
<a href="#serializing-alpha-values">As noted earlier</a>,
unitary alpha values are not explicitly serialized.
Non-unitary alpha values must be explicitly serialized,
and the string " / "
(an ASCII space, then forward slash, then another space)
must be used to separate
the final color component value
from the alpha value.
<div class="example" id="ex-color-prophoto-alpha-serial">
<p>The serialized value of</p>
<pre class="lang-css"><span class="swatch" style="--color: rgba(0.003%, 50.196%, 50.196%, 0.85)"></span> color(prophoto-rgb 0.2804 0.40283 0.42259/85%)</pre>
<p>is the string "color(prophoto-rgb 0.28 0.403 0.423 / 0.85)",
if three decimal places are retained.
</p>
</div>
<h4 id="serializing-device-cmyk-values">Serializing ''device-cmyk'' values</h4>
The serialized form of ''device-cmyk()'' values
is derived from the [=computed value=]
and uses the ''device-cmyk()'' form,
with lowercase letters for the function name.
The component values are serialized in base 10,
as <<number>>.
A single ASCII space character " "
must be used as the separator
between the component values.
Trailing fractional zeroes in any component values must be omitted;
if the fractional part consists of all zeroes,
the decimal point must also be omitted.
<div class="example" id="ex-device-cmyk-serial">
<p>The serialized value of the color</p>
<pre class="lang-css"><span class="swatch" style="--color: rgb(70.7% 26.9% 19.7%);"></span> device-cmyk(0 81% 81% 30%)</pre>
<p>is the string "device-cmyk(0 0.81 0.81 0.3)"</p>
</div>
The precision with which ''device-cmyk()'' component values are retained,
and thus the number of significant figures in the serialized value,
is not defined in this specification,
but must at least be sufficient
to round-trip values
with eight bit precision;
this will result in at least two decimal places
unless trailing zeroes have been omitted.
Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated.
<a href="#serializing-alpha-values">As noted earlier</a>,
unitary alpha values are not explicitly serialized.
Non-unitary alpha values must be explicitly serialized,
and the string " / "
(an ASCII space, then forward slash, then another space)
must be used to separate
the black ("k") color component value
from the alpha value.
<h4 id="serializing-other-colors">Serializing other colors</h4>
This applies to [=system colors=],
<a href="#deprecated-system-colors">deprecated-colors</a>,
''transparent'', and
''currentcolor''.
The serialized form of these values
is derived from the [=computed value=]
and uses lowercase letters for the color name.
<div class="example" id="ex-system-serial">
<p>The serialized form of the color</p>
<pre class="lang-css"><span class="swatch" style="--color: VisitedText"></span> VisitedText</pre>
<p>is the string "visitedtext"</p>
</div>
<div class="example" id="ex-deprecated-serial">
<p>The serialized form of the color</p>
<pre class="lang-css"><span class="swatch" style="--color: ButtonFace"></span> ThreeDFace</pre>
<p>is the string "threedface"</p>
</div>
The serialized form of ''transparent'' is the string "rgba(0, 0, 0, 0)".
The serialized form of ''currentColor'' is the string "currentcolor".
<h2 id='numeric-srgb'>
sRGB Colors</h2>
CSS colors in the <a>sRGB</a> color space
are represented by a triplet of values--
red, green, and blue--
identifying a point in the sRGB color space [[!SRGB]].
This is an internationally-recognized, device-independent color space,
and so is useful for specifying colors that will be displayed on a computer screen,
but is also useful for specifying colors on other types of devices, like printers.
<!-- (See [[COLORIMETRY]].) broken link, find new one and fix in specref -->
CSS also allows the use of non-sRGB [=color space=]s,
as described in [[#predefined]].
CSS provides several methods of directly specifying an sRGB color:
[=hex colors=],
''rgb()''/''rgba()'' [=color-functions=],
''hsl()''/''hsla()'' [=color-functions=],
''hwb()'' [=color-functions|color-function=],
[=named colors=],
and the ''transparent'' keyword.
<h3 id='rgb-functions'>
The RGB functions: ''rgb()'' and ''rgba()''</h3>
The ''rgb()'' function defines an sRGB color by specifying the red, green, and blue channels directly.
Its syntax is:
<pre class='prod'>
<dfn>rgb()</dfn> = rgb( <<percentage>>{3} [ / <<alpha-value>> ]? ) |
rgb( <<number>>{3} [ / <<alpha-value>> ]? )
<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
</pre>
<wpt>
rgb-001.html
rgb-002.html
rgb-003.html
rgb-004.html
rgb-005.html
rgb-006.html
rgb-007.html
rgb-008.html
rgb-rounding-001.html
<!--
apparently it can't find these, but their rel=help points to this spec
background-color-rgb-001.html
background-color-rgb-002.html
background-color-rgb-003.html -->
</wpt>
The first three arguments specify the red, green, and blue channels of the color, respectively.
''0%'' represents the minimum value for that color channel in the sRGB gamut,
and ''100%'' represents the maximum value.
A <<number>> is equivalent to a <<percentage>>,
but with a different range:
''0'' again represents the minimum value for the color channel,
but ''255'' represents the maximum.
These values come from the fact that many graphics engines store the color channels internally as a single byte,
which can hold integers between 0 and 255.
Implementations should honor the precision of the channel as authored or calculated wherever possible.
If this is not possible, the channel should be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>.
The final argument, the <<alpha-value>>, specifies the alpha of the color.
If given as a <<number>>, the useful range of the value is ''0''
(representing a fully transparent color)
to ''1''
(representing a fully opaque color).
If given as a <<percentage>>, ''0%'' represents a fully transparent color,
while ''100%'' represents a fully opaque color.
If omitted, it defaults to ''100%''.
Values outside these ranges are not invalid,
but are clamped to the ranges defined here at computed-value time.
For legacy reasons,
''rgb()'' also supports an alternate syntax
that separates all of its arguments with commas:
<pre class='prod'>
rgb() = rgb( <<percentage>>#{3} , <<alpha-value>>? ) |
rgb( <<number>>#{3} , <<alpha-value>>? )
</pre>
Also for legacy reasons,
an <dfn>rgba()</dfn> function also exists,
with an identical grammar and behavior to ''rgb()''.
<wpt>
rgba-001.html
rgba-002.html
rgba-003.html
rgba-004.html
rgba-005.html
rgba-006.html
rgba-007.html
rgba-008.html
</wpt>
<h3 id='hex-notation'>
The RGB hexadecimal notations: ''#RRGGBB''</h3>
The CSS <dfn lt="hex color | hex color notation" export>hex color notation</dfn>
allows an sRGB color to be specified by giving the channels as hexadecimal numbers,
which is similar to how colors are often written directly in computer code.
It's also shorter than writing the same color out in ''rgb()'' notation.
The syntax of a <dfn>&lt;hex-color></dfn> is a <<hash-token>> token whose value consists of 3, 4, 6, or 8 hexadecimal digits.
In other words, a hex color is written as a hash character, "#",
followed by some number of digits 0-9 or letters a-f
(the case of the letters doesn't matter - ''#00ff00'' is identical to ''#00FF00'').
The number of hex digits given determines how to decode the hex notation into an RGB color:
<dl>
<dt>6 digits
<dd>
The first pair of digits, interpreted as a hexadecimal number,
specifies the red channel of the color,
where ''00'' represents the minimum value
and ''ff'' (255 in decimal) represents the maximum.
The next pair of digits, interpreted in the same way,
specifies the green channel,
and the last pair specifies the blue.
The alpha channel of the color is fully opaque.
<div class='example' id="ex-hex6">
In other words, <span class="swatch" style="--color: #00ff00"></span> ''#00ff00'' represents the same color as <span class="swatch" style="--color: #00ff00"></span> ''rgb(0 255 0)'' (a lime green).
</div>
<dt>8 digits
<dd>
The first 6 digits are interpreted identically to the 6-digit notation.
The last pair of digits, interpreted as a hexadecimal number,
specifies the alpha channel of the color,
where ''00'' represents a fully transparent color
and ''ff'' represent a fully opaque color.
<div class='example' id="ex-hex8">
In other words, <span class="swatch" style="--color: #0000ffcc"></span> ''#0000ffcc'' represents the same color as <span class="swatch" style="--color: #0000ffcc"></span> ''rgb(0 0 100% / 80%)'' (a slightly-transparent blue).
</div>
<dt>3 digits
<dd>
This is a shorter variant of the 6-digit notation.
The first digit, interpreted as a hexadecimal number,
specifies the red channel of the color,
where ''0'' represents the minimum value
and ''f'' represents the maximum.
The next two digits represent the green and blue channels, respectively,
in the same way.
The alpha channel of the color is fully opaque.
<div class='example' id="ex-hex3">
This syntax is often explained by saying that it's identical to a 6-digit notation obtained by "duplicating" all of the digits.
For example, the notation <span class="swatch" style="--color: #123"></span> ''#123'' specifies the same color as the notation <span class="swatch" style="--color: #123"></span> ''#112233''.
This method of specifying a color has lower "resolution" than the 6-digit notation;
there are only 4096 possible colors expressible in the 3-digit hex syntax,
as opposed to approximately 17 million in 6-digit hex syntax.
</div>
<dt>4 digits
<dd>
This is a shorter variant of the 8-digit notation,
"expanded" in the same way as the 3-digit notation is.
The first digit, interpreted as a hexadecimal number,
specifies the red channel of the color,
where ''0'' represents the minimum value
and ''f'' represents the maximum.
The next three digits represent the green, blue, and alpha channels, respectively.
</dl>
<wpt>
hex-001.html
hex-002.html
hex-003.html
hex-004.html
</wpt>
<h2 id='color-keywords'>
Color Keywords</h2>
In addition to the various numeric syntaxes for <<color>>s,
CSS defines several sets of color keywords that can be used instead—
each with their own advantages or use cases.
<h3 id="named-colors">
Named Colors</h3>
CSS defines a large set of <dfn id="named-color" lt="named color" export>named colors</dfn>,
so that common colors can be written and read more easily.
A <dfn>&lt;named-color></dfn> is written as an <<ident>>,
accepted anywhere a <<color>> is.
As usual for CSS-defined <<ident>>s,
all of these keywords are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>.
The names resolve to colors in sRGB.
16 of CSS's named colors come from the VGA palette originally, and were then adopted into HTML:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Most of the rest
come from one version of the X11 color system,
used in Unix-derived systems to specify colors for the console,
and were then adopted into SVG.
Note: these color names are standardized here,
<em>not because they are good</em>,
but because their use and implementation has been widespread for decades
and the standard needs to reflect reality.
Indeed, it is often hard to imagine what each name will look like (hence the list below);
the names are not evenly distributed throughout the sRGB color volume,
the names are not even internally consistent
(<span class="swatch" style="--color: darkgray"></span> ''darkgray'' is lighter than
<span class="swatch" style="--color: gray"></span> ''gray'', while
<span class="swatch" style="--color: lightpink"></span> ''lightpink'' is darker than
<span class="swatch" style="--color: pink"></span> ''pink''),
and some names
(such as <span class="swatch" style="--color: indianred"></span> ''indianred'',
which was originally named after a red pigment from India),
have been found to be offensive.
Thus, their use is <em>not encouraged</em>.
(Two special color values, ''transparent'' and ''<color>/currentcolor'',
are specially defined in their own sections.)
The following table defines all of the opaque named colors,
by giving equivalent numeric specifications in the other color syntaxes.
<table class="named-color-table" dfn-type=value dfn-for="<color>">
<thead>
<tr>
<th style="background:black">Named
<th>Numeric
<th>Color&nbsp;name
<th>Hex&nbsp;rgb
<th>Decimal
<tbody>
<tr>
<td style="background:aliceblue">&nbsp;<td style="background:#f0f8ff">&nbsp;<th scope=row><dfn>aliceblue</dfn><td>#f0f8ff<td>240 248 255
<tr>
<td style="background:antiquewhite">&nbsp;<td style="background:#faebd7">&nbsp;<th scope=row><dfn>antiquewhite</dfn><td>#faebd7<td>250 235 215
<tr>
<td style="background:aqua">&nbsp;<td style="background:#00ffff">&nbsp;<th scope=row><dfn>aqua</dfn><td>#00ffff<td>0 255 255
<tr>
<td style="background:aquamarine">&nbsp;<td style="background:#7fffd4">&nbsp;<th scope=row><dfn>aquamarine</dfn><td>#7fffd4<td>127 255 212
<tr>
<td style="background:azure">&nbsp;<td style="background:#f0ffff">&nbsp;<th scope=row><dfn>azure</dfn><td>#f0ffff<td>240 255 255
<tr>
<td style="background:beige">&nbsp;<td style="background:#f5f5dc">&nbsp;<th scope=row><dfn>beige</dfn><td>#f5f5dc<td>245 245 220
<tr>
<td style="background:bisque">&nbsp;<td style="background:#ffe4c4">&nbsp;<th scope=row><dfn>bisque</dfn><td>#ffe4c4<td>255 228 196
<tr>
<td style="background:black">&nbsp;<td style="background:#000000">&nbsp;<th scope=row><dfn>black</dfn><td>#000000<td>0 0 0
<tr>
<td style="background:blanchedalmond">&nbsp;<td style="background:#ffebcd">&nbsp;<th scope=row><dfn>blanchedalmond</dfn><td>#ffebcd<td>255 235 205
<tr>
<td style="background:blue">&nbsp;<td style="background:#0000ff">&nbsp;<th scope=row><dfn>blue</dfn><td>#0000ff<td>0 0 255
<tr>
<td style="background:blueviolet">&nbsp;<td style="background:#8a2be2">&nbsp;<th scope=row><dfn>blueviolet</dfn><td>#8a2be2<td>138 43 226
<tr>
<td style="background:brown">&nbsp;<td style="background:#a52a2a">&nbsp;<th scope=row><dfn>brown</dfn><td>#a52a2a<td>165 42 42
<tr>
<td style="background:burlywood">&nbsp;<td style="background:#deb887">&nbsp;<th scope=row><dfn>burlywood</dfn><td>#deb887<td>222 184 135
<tr>
<td style="background:cadetblue">&nbsp;<td style="background:#5f9ea0">&nbsp;<th scope=row><dfn>cadetblue</dfn><td>#5f9ea0<td>95 158 160
<tr>
<td style="background:chartreuse">&nbsp;<td style="background:#7fff00">&nbsp;<th scope=row><dfn>chartreuse</dfn><td>#7fff00<td>127 255 0
<tr>
<td style="background:chocolate">&nbsp;<td style="background:#d2691e">&nbsp;<th scope=row><dfn>chocolate</dfn><td>#d2691e<td>210 105 30
<tr>
<td style="background:coral">&nbsp;<td style="background:#ff7f50">&nbsp;<th scope=row><dfn>coral</dfn><td>#ff7f50<td>255 127 80
<tr>
<td style="background:cornflowerblue">&nbsp;<td style="background:#6495ed">&nbsp;<th scope=row><dfn>cornflowerblue</dfn><td>#6495ed<td>100 149 237
<tr>
<td style="background:cornsilk">&nbsp;<td style="background:#fff8dc">&nbsp;<th scope=row><dfn>cornsilk</dfn><td>#fff8dc<td>255 248 220
<tr>
<td style="background:crimson">&nbsp;<td style="background:#dc143c">&nbsp;<th scope=row><dfn>crimson</dfn><td>#dc143c<td>220 20 60
<tr>
<td style="background:cyan">&nbsp;<td style="background:#00ffff">&nbsp;<th scope=row><dfn>cyan</dfn><td>#00ffff<td>0 255 255
<tr>
<td style="background:darkblue">&nbsp;<td style="background:#00008b">&nbsp;<th scope=row><dfn>darkblue</dfn><td>#00008b<td>0 0 139
<tr>
<td style="background:darkcyan">&nbsp;<td style="background:#008b8b">&nbsp;<th scope=row><dfn>darkcyan</dfn><td>#008b8b<td>0 139 139
<tr>
<td style="background:darkgoldenrod">&nbsp;<td style="background:#b8860b">&nbsp;<th scope=row><dfn>darkgoldenrod</dfn><td>#b8860b<td>184 134 11
<tr>
<td style="background:darkgray">&nbsp;<td style="background:#a9a9a9">&nbsp;<th scope=row><dfn>darkgray</dfn><td>#a9a9a9<td>169 169 169
<tr>
<td style="background:darkgreen">&nbsp;<td style="background:#006400">&nbsp;<th scope=row><dfn>darkgreen</dfn><td>#006400<td>0 100 0
<tr>
<td style="background:darkgrey">&nbsp;<td style="background:#a9a9a9">&nbsp;<th scope=row><dfn>darkgrey</dfn><td>#a9a9a9<td>169 169 169
<tr>
<td style="background:darkkhaki">&nbsp;<td style="background:#bdb76b">&nbsp;<th scope=row><dfn>darkkhaki</dfn><td>#bdb76b<td>189 183 107
<tr>
<td style="background:darkmagenta">&nbsp;<td style="background:#8b008b">&nbsp;<th scope=row><dfn>darkmagenta</dfn><td>#8b008b<td>139 0 139
<tr>
<td style="background:darkolivegreen">&nbsp;<td style="background:#556b2f">&nbsp;<th scope=row><dfn>darkolivegreen</dfn><td>#556b2f<td>85 107 47
<tr>
<td style="background:darkorange">&nbsp;<td style="background:#ff8c00">&nbsp;<th scope=row><dfn>darkorange</dfn><td>#ff8c00<td>255 140 0
<tr>
<td style="background:darkorchid">&nbsp;<td style="background:#9932cc">&nbsp;<th scope=row><dfn>darkorchid</dfn><td>#9932cc<td>153 50 204
<tr>
<td style="background:darkred">&nbsp;<td style="background:#8b0000">&nbsp;<th scope=row><dfn>darkred</dfn><td>#8b0000<td>139 0 0
<tr>
<td style="background:darksalmon">&nbsp;<td style="background:#e9967a">&nbsp;<th scope=row><dfn>darksalmon</dfn><td>#e9967a<td>233 150 122
<tr>
<td style="background:darkseagreen">&nbsp;<td style="background:#8fbc8f">&nbsp;<th scope=row><dfn>darkseagreen</dfn><td>#8fbc8f<td>143 188 143
<tr>
<td style="background:darkslateblue">&nbsp;<td style="background:#483d8b">&nbsp;<th scope=row><dfn>darkslateblue</dfn><td>#483d8b<td>72 61 139
<tr>
<td style="background:darkslategray">&nbsp;<td style="background:#2f4f4f">&nbsp;<th scope=row><dfn>darkslategray</dfn><td>#2f4f4f<td>47 79 79
<tr>
<td style="background:darkslategrey">&nbsp;<td style="background:#2f4f4f">&nbsp;<th scope=row><dfn>darkslategrey</dfn><td>#2f4f4f<td>47 79 79
<tr>
<td style="background:darkturquoise">&nbsp;<td style="background:#00ced1">&nbsp;<th scope=row><dfn>darkturquoise</dfn><td>#00ced1<td>0 206 209
<tr>
<td style="background:darkviolet">&nbsp;<td style="background:#9400d3">&nbsp;<th scope=row><dfn>darkviolet</dfn><td>#9400d3<td>148 0 211
<tr>
<td style="background:deeppink">&nbsp;<td style="background:#ff1493">&nbsp;<th scope=row><dfn>deeppink</dfn><td>#ff1493<td>255 20 147
<tr>
<td style="background:deepskyblue">&nbsp;<td style="background:#00bfff">&nbsp;<th scope=row><dfn>deepskyblue</dfn><td>#00bfff<td>0 191 255
<tr>
<td style="background:dimgray">&nbsp;<td style="background:#696969">&nbsp;<th scope=row><dfn>dimgray</dfn><td>#696969<td>105 105 105
<tr>
<td style="background:dimgrey">&nbsp;<td style="background:#696969">&nbsp;<th scope=row><dfn>dimgrey</dfn><td>#696969<td>105 105 105
<tr>
<td style="background:dodgerblue">&nbsp;<td style="background:#1e90ff">&nbsp;<th scope=row><dfn>dodgerblue</dfn><td>#1e90ff<td>30 144 255
<tr>
<td style="background:firebrick">&nbsp;<td style="background:#b22222">&nbsp;<th scope=row><dfn>firebrick</dfn><td>#b22222<td>178 34 34
<tr>
<td style="background:floralwhite">&nbsp;<td style="background:#fffaf0">&nbsp;<th scope=row><dfn>floralwhite</dfn><td>#fffaf0<td>255 250 240
<tr>
<td style="background:forestgreen">&nbsp;<td style="background:#228b22">&nbsp;<th scope=row><dfn>forestgreen</dfn><td>#228b22<td>34 139 34
<tr>
<td style="background:fuchsia">&nbsp;<td style="background:#ff00ff">&nbsp;<th scope=row><dfn>fuchsia</dfn><td>#ff00ff<td>255 0 255
<tr>
<td style="background:gainsboro">&nbsp;<td style="background:#dcdcdc">&nbsp;<th scope=row><dfn>gainsboro</dfn><td>#dcdcdc<td>220 220 220
<tr>
<td style="background:ghostwhite">&nbsp;<td style="background:#f8f8ff">&nbsp;<th scope=row><dfn>ghostwhite</dfn><td>#f8f8ff<td>248 248 255
<tr>
<td style="background:gold">&nbsp;<td style="background:#ffd700">&nbsp;<th scope=row><dfn>gold</dfn><td>#ffd700<td>255 215 0
<tr>
<td style="background:goldenrod">&nbsp;<td style="background:#daa520">&nbsp;<th scope=row><dfn>goldenrod</dfn><td>#daa520<td>218 165 32
<tr>
<td style="background:gray">&nbsp;<td style="background:#808080">&nbsp;<th scope=row><dfn>gray</dfn><td>#808080<td>128 128 128
<tr>
<td style="background:green">&nbsp;<td style="background:#008000">&nbsp;<th scope=row><dfn>green</dfn><td>#008000<td>0 128 0
<tr>
<td style="background:greenyellow">&nbsp;<td style="background:#adff2f">&nbsp;<th scope=row><dfn>greenyellow</dfn><td>#adff2f<td>173 255 47
<tr>
<td style="background:grey">&nbsp;<td style="background:#808080">&nbsp;<th scope=row><dfn>grey</dfn><td>#808080<td>128 128 128
<tr>
<td style="background:honeydew">&nbsp;<td style="background:#f0fff0">&nbsp;<th scope=row><dfn>honeydew</dfn><td>#f0fff0<td>240 255 240
<tr>
<td style="background:hotpink">&nbsp;<td style="background:#ff69b4">&nbsp;<th scope=row><dfn>hotpink</dfn><td>#ff69b4<td>255 105 180
<tr>
<td style="background:indianred">&nbsp;<td style="background:#cd5c5c">&nbsp;<th scope=row><dfn>indianred</dfn><td>#cd5c5c<td>205 92 92
<tr>
<td style="background:indigo">&nbsp;<td style="background:#4b0082">&nbsp;<th scope=row><dfn>indigo</dfn><td>#4b0082<td>75 0 130
<tr>
<td style="background:ivory">&nbsp;<td style="background:#fffff0">&nbsp;<th scope=row><dfn>ivory</dfn><td>#fffff0<td>255 255 240
<tr>
<td style="background:khaki">&nbsp;<td style="background:#f0e68c">&nbsp;<th scope=row><dfn>khaki</dfn><td>#f0e68c<td>240 230 140
<tr>
<td style="background:lavender">&nbsp;<td style="background:#e6e6fa">&nbsp;<th scope=row><dfn>lavender</dfn><td>#e6e6fa<td>230 230 250
<tr>
<td style="background:lavenderblush">&nbsp;<td style="background:#fff0f5">&nbsp;<th scope=row><dfn>lavenderblush</dfn><td>#fff0f5<td>255 240 245
<tr>
<td style="background:lawngreen">&nbsp;<td style="background:#7cfc00">&nbsp;<th scope=row><dfn>lawngreen</dfn><td>#7cfc00<td>124 252 0
<tr>
<td style="background:lemonchiffon">&nbsp;<td style="background:#fffacd">&nbsp;<th scope=row><dfn>lemonchiffon</dfn><td>#fffacd<td>255 250 205
<tr>
<td style="background:lightblue">&nbsp;<td style="background:#add8e6">&nbsp;<th scope=row><dfn>lightblue</dfn><td>#add8e6<td>173 216 230
<tr>
<td style="background:lightcoral">&nbsp;<td style="background:#f08080">&nbsp;<th scope=row><dfn>lightcoral</dfn><td>#f08080<td>240 128 128
<tr>
<td style="background:lightcyan">&nbsp;<td style="background:#e0ffff">&nbsp;<th scope=row><dfn>lightcyan</dfn><td>#e0ffff<td>224 255 255
<tr>
<td style="background:lightgoldenrodyellow">&nbsp;<td style="background:#fafad2">&nbsp;<th scope=row><dfn>lightgoldenrodyellow</dfn><td>#fafad2<td>250 250 210
<tr>
<td style="background:lightgray">&nbsp;<td style="background:#d3d3d3">&nbsp;<th scope=row><dfn>lightgray</dfn><td>#d3d3d3<td>211 211 211
<tr>
<td style="background:lightgreen">&nbsp;<td style="background:#90ee90">&nbsp;<th scope=row><dfn>lightgreen</dfn><td>#90ee90<td>144 238 144
<tr>
<td style="background:lightgrey">&nbsp;<td style="background:#d3d3d3">&nbsp;<th scope=row><dfn>lightgrey</dfn><td>#d3d3d3<td>211 211 211
<tr>
<td style="background:lightpink">&nbsp;<td style="background:#ffb6c1">&nbsp;<th scope=row><dfn>lightpink</dfn><td>#ffb6c1<td>255 182 193
<tr>
<td style="background:lightsalmon">&nbsp;<td style="background:#ffa07a">&nbsp;<th scope=row><dfn>lightsalmon</dfn><td>#ffa07a<td>255 160 122
<tr>
<td style="background:lightseagreen">&nbsp;<td style="background:#20b2aa">&nbsp;<th scope=row><dfn>lightseagreen</dfn><td>#20b2aa<td>32 178 170
<tr>
<td style="background:lightskyblue">&nbsp;<td style="background:#87cefa">&nbsp;<th scope=row><dfn>lightskyblue</dfn><td>#87cefa<td>135 206 250
<tr>
<td style="background:lightslategray">&nbsp;<td style="background:#778899">&nbsp;<th scope=row><dfn>lightslategray</dfn><td>#778899<td>119 136 153
<tr>
<td style="background:lightslategrey">&nbsp;<td style="background:#778899">&nbsp;<th scope=row><dfn>lightslategrey</dfn><td>#778899<td>119 136 153
<tr>
<td style="background:lightsteelblue">&nbsp;<td style="background:#b0c4de">&nbsp;<th scope=row><dfn>lightsteelblue</dfn><td>#b0c4de<td>176 196 222
<tr>
<td style="background:lightyellow">&nbsp;<td style="background:#ffffe0">&nbsp;<th scope=row><dfn>lightyellow</dfn><td>#ffffe0<td>255 255 224
<tr>
<td style="background:lime">&nbsp;<td style="background:#00ff00">&nbsp;<th scope=row><dfn>lime</dfn><td>#00ff00<td>0 255 0
<tr>
<td style="background:limegreen">&nbsp;<td style="background:#32cd32">&nbsp;<th scope=row><dfn>limegreen</dfn><td>#32cd32<td>50 205 50
<tr>
<td style="background:linen">&nbsp;<td style="background:#faf0e6">&nbsp;<th scope=row><dfn>linen</dfn><td>#faf0e6<td>250 240 230
<tr>
<td style="background:magenta">&nbsp;<td style="background:#ff00ff">&nbsp;<th scope=row><dfn>magenta</dfn><td>#ff00ff<td>255 0 255
<tr>
<td style="background:maroon">&nbsp;<td style="background:#800000">&nbsp;<th scope=row><dfn>maroon</dfn><td>#800000<td>128 0 0
<tr>
<td style="background:mediumaquamarine">&nbsp;<td style="background:#66cdaa">&nbsp;<th scope=row><dfn>mediumaquamarine</dfn><td>#66cdaa<td>102 205 170
<tr>
<td style="background:mediumblue">&nbsp;<td style="background:#0000cd">&nbsp;<th scope=row><dfn>mediumblue</dfn><td>#0000cd<td>0 0 205
<tr>
<td style="background:mediumorchid">&nbsp;<td style="background:#ba55d3">&nbsp;<th scope=row><dfn>mediumorchid</dfn><td>#ba55d3<td>186 85 211
<tr>
<td style="background:mediumpurple">&nbsp;<td style="background:#9370db">&nbsp;<th scope=row><dfn>mediumpurple</dfn><td>#9370db<td>147 112 219
<tr>
<td style="background:mediumseagreen">&nbsp;<td style="background:#3cb371">&nbsp;<th scope=row><dfn>mediumseagreen</dfn><td>#3cb371<td>60 179 113
<tr>
<td style="background:mediumslateblue">&nbsp;<td style="background:#7b68ee">&nbsp;<th scope=row><dfn>mediumslateblue</dfn><td>#7b68ee<td>123 104 238
<tr>
<td style="background:mediumspringgreen">&nbsp;<td style="background:#00fa9a">&nbsp;<th scope=row><dfn>mediumspringgreen</dfn><td>#00fa9a<td>0 250 154
<tr>
<td style="background:mediumturquoise">&nbsp;<td style="background:#48d1cc">&nbsp;<th scope=row><dfn>mediumturquoise</dfn><td>#48d1cc<td>72 209 204
<tr>
<td style="background:mediumvioletred">&nbsp;<td style="background:#c71585">&nbsp;<th scope=row><dfn>mediumvioletred</dfn><td>#c71585<td>199 21 133
<tr>
<td style="background:midnightblue">&nbsp;<td style="background:#191970">&nbsp;<th scope=row><dfn>midnightblue</dfn><td>#191970<td>25 25 112
<tr>
<td style="background:mintcream">&nbsp;<td style="background:#f5fffa">&nbsp;<th scope=row><dfn>mintcream</dfn><td>#f5fffa<td>245 255 250
<tr>
<td style="background:mistyrose">&nbsp;<td style="background:#ffe4e1">&nbsp;<th scope=row><dfn>mistyrose</dfn><td>#ffe4e1<td>255 228 225
<tr>
<td style="background:moccasin">&nbsp;<td style="background:#ffe4b5">&nbsp;<th scope=row><dfn>moccasin</dfn><td>#ffe4b5<td>255 228 181
<tr>
<td style="background:navajowhite">&nbsp;<td style="background:#ffdead">&nbsp;<th scope=row><dfn>navajowhite</dfn><td>#ffdead<td>255 222 173
<tr>
<td style="background:navy">&nbsp;<td style="background:#000080">&nbsp;<th scope=row><dfn>navy</dfn><td>#000080<td>0 0 128
<tr>
<td style="background:oldlace">&nbsp;<td style="background:#fdf5e6">&nbsp;<th scope=row><dfn>oldlace</dfn><td>#fdf5e6<td>253 245 230
<tr>
<td style="background:olive">&nbsp;<td style="background:#808000">&nbsp;<th scope=row><dfn>olive</dfn><td>#808000<td>128 128 0
<tr>
<td style="background:olivedrab">&nbsp;<td style="background:#6b8e23">&nbsp;<th scope=row><dfn>olivedrab</dfn><td>#6b8e23<td>107 142 35
<tr>
<td style="background:orange">&nbsp;<td style="background:#ffa500">&nbsp;<th scope=row><dfn>orange</dfn><td>#ffa500<td>255 165 0
<tr>
<td style="background:orangered">&nbsp;<td style="background:#ff4500">&nbsp;<th scope=row><dfn>orangered</dfn><td>#ff4500<td>255 69 0
<tr>
<td style="background:orchid">&nbsp;<td style="background:#da70d6">&nbsp;<th scope=row><dfn>orchid</dfn><td>#da70d6<td>218 112 214
<tr>
<td style="background:palegoldenrod">&nbsp;<td style="background:#eee8aa">&nbsp;<th scope=row><dfn>palegoldenrod</dfn><td>#eee8aa<td>238 232 170
<tr>
<td style="background:palegreen">&nbsp;<td style="background:#98fb98">&nbsp;<th scope=row><dfn>palegreen</dfn><td>#98fb98<td>152 251 152
<tr>
<td style="background:paleturquoise">&nbsp;<td style="background:#afeeee">&nbsp;<th scope=row><dfn>paleturquoise</dfn><td>#afeeee<td>175 238 238
<tr>
<td style="background:palevioletred">&nbsp;<td style="background:#db7093">&nbsp;<th scope=row><dfn>palevioletred</dfn><td>#db7093<td>219 112 147
<tr>
<td style="background:papayawhip">&nbsp;<td style="background:#ffefd5">&nbsp;<th scope=row><dfn>papayawhip</dfn><td>#ffefd5<td>255 239 213
<tr>
<td style="background:peachpuff">&nbsp;<td style="background:#ffdab9">&nbsp;<th scope=row><dfn>peachpuff</dfn><td>#ffdab9<td>255 218 185
<tr>
<td style="background:peru">&nbsp;<td style="background:#cd853f">&nbsp;<th scope=row><dfn>peru</dfn><td>#cd853f<td>205 133 63
<tr>
<td style="background:pink">&nbsp;<td style="background:#ffc0cb">&nbsp;<th scope=row><dfn>pink</dfn><td>#ffc0cb<td>255 192 203
<tr>
<td style="background:plum">&nbsp;<td style="background:#dda0dd">&nbsp;<th scope=row><dfn>plum</dfn><td>#dda0dd<td>221 160 221
<tr>
<td style="background:powderblue">&nbsp;<td style="background:#b0e0e6">&nbsp;<th scope=row><dfn>powderblue</dfn><td>#b0e0e6<td>176 224 230
<tr>
<td style="background:purple">&nbsp;<td style="background:#800080">&nbsp;<th scope=row><dfn>purple</dfn><td>#800080<td>128 0 128
<tr>
<td style="background:rebeccapurple">&nbsp;<td style="background:#663399">&nbsp;<th scope=row><dfn>rebeccapurple</dfn><td>#663399<td>102 51 153
<tr>
<td style="background:red">&nbsp;<td style="background:#ff0000">&nbsp;<th scope=row><dfn>red</dfn><td>#ff0000<td>255 0 0
<tr>
<td style="background:rosybrown">&nbsp;<td style="background:#bc8f8f">&nbsp;<th scope=row><dfn>rosybrown</dfn><td>#bc8f8f<td>188 143 143
<tr>
<td style="background:royalblue">&nbsp;<td style="background:#4169e1">&nbsp;<th scope=row><dfn>royalblue</dfn><td>#4169e1<td>65 105 225
<tr>
<td style="background:saddlebrown">&nbsp;<td style="background:#8b4513">&nbsp;<th scope=row><dfn>saddlebrown</dfn><td>#8b4513<td>139 69 19
<tr>
<td style="background:salmon">&nbsp;<td style="background:#fa8072">&nbsp;<th scope=row><dfn>salmon</dfn><td>#fa8072<td>250 128 114
<tr>
<td style="background:sandybrown">&nbsp;<td style="background:#f4a460">&nbsp;<th scope=row><dfn>sandybrown</dfn><td>#f4a460<td>244 164 96
<tr>
<td style="background:seagreen">&nbsp;<td style="background:#2e8b57">&nbsp;<th scope=row><dfn>seagreen</dfn><td>#2e8b57<td>46 139 87
<tr>
<td style="background:seashell">&nbsp;<td style="background:#fff5ee">&nbsp;<th scope=row><dfn>seashell</dfn><td>#fff5ee<td>255 245 238
<tr>
<td style="background:sienna">&nbsp;<td style="background:#a0522d">&nbsp;<th scope=row><dfn>sienna</dfn><td>#a0522d<td>160 82 45
<tr>
<td style="background:silver">&nbsp;<td style="background:#c0c0c0">&nbsp;<th scope=row><dfn>silver</dfn><td>#c0c0c0<td>192 192 192
<tr>
<td style="background:skyblue">&nbsp;<td style="background:#87ceeb">&nbsp;<th scope=row><dfn>skyblue</dfn><td>#87ceeb<td>135 206 235
<tr>
<td style="background:slateblue">&nbsp;<td style="background:#6a5acd">&nbsp;<th scope=row><dfn>slateblue</dfn><td>#6a5acd<td>106 90 205
<tr>
<td style="background:slategray">&nbsp;<td style="background:#708090">&nbsp;<th scope=row><dfn>slategray</dfn><td>#708090<td>112 128 144
<tr>
<td style="background:slategrey">&nbsp;<td style="background:#708090">&nbsp;<th scope=row><dfn>slategrey</dfn><td>#708090<td>112 128 144
<tr>
<td style="background:snow">&nbsp;<td style="background:#fffafa">&nbsp;<th scope=row><dfn>snow</dfn><td>#fffafa<td>255 250 250
<tr>
<td style="background:springgreen">&nbsp;<td style="background:#00ff7f">&nbsp;<th scope=row><dfn>springgreen</dfn><td>#00ff7f<td>0 255 127
<tr>
<td style="background:steelblue">&nbsp;<td style="background:#4682b4">&nbsp;<th scope=row><dfn>steelblue</dfn><td>#4682b4<td>70 130 180
<tr>
<td style="background:tan">&nbsp;<td style="background:#d2b48c">&nbsp;<th scope=row><dfn>tan</dfn><td>#d2b48c<td>210 180 140
<tr>
<td style="background:teal">&nbsp;<td style="background:#008080">&nbsp;<th scope=row><dfn>teal</dfn><td>#008080<td>0 128 128
<tr>
<td style="background:thistle">&nbsp;<td style="background:#d8bfd8">&nbsp;<th scope=row><dfn>thistle</dfn><td>#d8bfd8<td>216 191 216
<tr>
<td style="background:tomato">&nbsp;<td style="background:#ff6347">&nbsp;<th scope=row><dfn>tomato</dfn><td>#ff6347<td>255 99 71
<tr>
<td style="background:turquoise">&nbsp;<td style="background:#40e0d0">&nbsp;<th scope=row><dfn>turquoise</dfn><td>#40e0d0<td>64 224 208
<tr>
<td style="background:violet">&nbsp;<td style="background:#ee82ee">&nbsp;<th scope=row><dfn>violet</dfn><td>#ee82ee<td>238 130 238
<tr>
<td style="background:wheat">&nbsp;<td style="background:#f5deb3">&nbsp;<th scope=row><dfn>wheat</dfn><td>#f5deb3<td>245 222 179
<tr>
<td style="background:white">&nbsp;<td style="background:#ffffff">&nbsp;<th scope=row><dfn>white</dfn><td>#ffffff<td>255 255 255
<tr>
<td style="background:whitesmoke">&nbsp;<td style="background:#f5f5f5">&nbsp;<th scope=row><dfn>whitesmoke</dfn><td>#f5f5f5<td>245 245 245
<tr>
<td style="background:yellow">&nbsp;<td style="background:#ffff00">&nbsp;<th scope=row><dfn>yellow</dfn><td>#ffff00<td>255 255 0
<tr>
<td style="background:yellowgreen">&nbsp;<td style="background:#9acd32">&nbsp;<th scope=row><dfn>yellowgreen</dfn><td>#9acd32<td>154 205 50
</table>
Note: this list of colors and their definitions is a superset of the list of <a href="https://www.w3.org/TR/SVG11/types.html#ColorKeywords">named colors defined by SVG 1.1</a>.
For historical reasons, this is also referred to as the X11 color set.
Note: The history of the X11 color system is interesting,
and was excellently summarized by
<a href="https://www.youtube.com/watch?v=HmStJQzclHc">Alex Sexton in his talk “Peachpuffs and Lemonchiffons”</a>.
<wpt>
named-001.html
</wpt>
<h3 id="css-system-colors" dfn lt="system colors">
System Colors</h3>
In general, the <<system-color>> keywords
reflect <em>default</em> color choices made by the user, the browser, or the OS.
They are typically used in the browser default stylesheet, for this reason.
To maintain legibility,
the <<system-color>> keywords also respond to light mode or dark mode changes.
<div class="example" id="ex-LM-DM-links">
For example, traditional <span class="swatch" style="--color: blue"></span> blue link text is legible on a <span class="swatch" style="--color: #fff"></span> white background
(WCAG contrast 8.59:1, AAA pass)
but would not be legible on a <span class="swatch" style="--color: #000"></span> black background
(WCAG contrast 2.44:1, AA fail).
Instead, a lighter blue such as <span class="swatch" style="--color: #81D9FE"></span> #81D9FE would be used in dark mode
(WCAG contrast 13.28:1, AAA pass).
<div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit">
<p style="padding: 4px; background-color: white; color: blue"> Legible link text</p>
<p style="padding: 4px; background-color: black; color: blue"> Illegible link text</p>
<p style="padding: 4px; background-color: black; color: #81D9FE"> Legible link text</p>
</div>
</div>
However, in [=forced colors mode=],
most colors on the page are forced into a restricted, user-chosen palette.
The <dfn>&lt;system-color></dfn> keywords
expose these user-chosen colors
so that the rest of the page can integrate with this restricted palette.
When the 'forced-colors' [=media feature=] is ''forced-colors/active'',
authors <em>should</em> use the <<system-color>> keywords as color values
in properties other than those listed in [[css-color-adjust-1#forced-colors-properties]],
to ensure legibility and consistency across the page
and avoid an uncoordinated mishmash of user-forced and page-chosen colors.
When the values of <<system-color>> keywords come from the browser,
(as opposed to being OS defaults or user choices) the browser should
ensure that <a href="#system-color-pairs">matching
foreground/background pairs</a> have a minimum
of WCAG AA contrast.
However, user preferences (for higher or lower contrast),
whether set as a browser preference, a user stylesheet,
or by altering the OS defaults,
must take precedence over this requirement.
Authors <em>may</em> also use these keywords at any time,
but <em>should</em> be careful to use the colors
in <a href="#system-color-pairs">matching background-foreground pairs</a>
to ensure appropriate contrast,
as any particular contrast relationship across non-matching pairs
(e.g. ''Canvas'' and ''ButtonText'')
is not guaranteed.
The <<system-color>> keywords are defined as follows:
<dl id="system-color-values" data-dfn-type="value" dfn-for="<system-color>">
<dt><dfn>Canvas</dfn>
<dd><span class="swatch" style="--color: canvas"></span>&nbsp;Background of application content or documents.
<dt><dfn>CanvasText</dfn>
<dd><span class="swatch" style="--color: canvastext"></span>&nbsp;Text in application content or documents.
<dt><dfn>LinkText</dfn>
<dd><span class="swatch" style="--color: linktext"></span>&nbsp;Text in non-active, non-visited links. For light backgrounds, traditionally blue.
<dt><dfn>VisitedText</dfn>
<dd><span class="swatch" style="--color: visitedtext"></span>&nbsp;Text in visited links. For light backgrounds, traditionally purple.
<dt><dfn>ActiveText</dfn>
<dd><span class="swatch" style="--color: activetext"></span>&nbsp;Text in active links. For light backgrounds, traditionally red.
<dt><dfn>ButtonFace</dfn>
<dd><span class="swatch" style="--color: buttonface"></span>&nbsp;The face background color for push buttons.
<dt><dfn>ButtonText</dfn>
<dd><span class="swatch" style="--color: buttontext"></span>&nbsp;Text on push buttons.
<dt><dfn>ButtonBorder</dfn>
<dd><span class="swatch" style="--color: buttonborder"></span>&nbsp;The base border color for push buttons.
<dt><dfn>Field</dfn>
<dd><span class="swatch" style="--color: field"></span>&nbsp;Background of input fields.
<dt><dfn>FieldText</dfn>
<dd><span class="swatch" style="--color: fieldtext"></span>&nbsp;Text in input fields.
<dt><dfn>Highlight</dfn>
<dd><span class="swatch" style="--color: highlight"></span>&nbsp;Background of selected items/text.
<dt><dfn>HighlightText</dfn>
<dd><span class="swatch" style="--color: highlighttext"></span>&nbsp;Text of selected items/text.
<dt><dfn>Mark</dfn>
<dd><span class="swatch" style="--color: mark"></span>&nbsp;Background of text that has been specially marked
(such as by the HTML <{mark}> element).
<dt><dfn>MarkText</dfn>
<dd><span class="swatch" style="--color: marktext"></span>&nbsp;Text that has been specially marked
(such as by the HTML <{mark}> element).
<dt><dfn>GrayText</dfn>
<dd><span class="swatch" style="--color: graytext"></span>&nbsp;Disabled text.
(Often, but not necessarily, gray.)
</dl>
<wpt>
parsing/system-color-valid.html
system-color-compute.html
</wpt>
Note: As with all other [=CSS/keywords=],
these names are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>.
They are shown here with mixed capitalization for legibility.
For systems that do not have a particular system UI concept,
the specified value should be mapped to
the most closely related system color value that exists.
The following <dfn export>system color pairings</dfn> are expected to form legible background-foreground colors:
<ul id=system-color-pairs>
* ''Canvas'' background with ''CanvasText'', ''LinkText'', ''VisitedText'', ''ActiveText'' foreground.
* ''Canvas'' background with a ''ButtonBorder'' border and adjacent color ''Canvas''
* ''ButtonFace'' background with ''ButtonText'' foreground.
* ''Field'' background with ''FieldText'' foreground.
* ''Mark'' background with ''MarkText'' foreground
* ''ButtonFace'' or ''Field'' background with a ''ButtonBorder'' border and adjacent color ''Canvas'''
* ''Highlight'' background with ''HighlightText'' foreground.
</ul>
Additionally, ''GrayText'' is expected to be readable,
though possibly at a lower contrast rating,
over any of the backgrounds.
<div class="example" id="ex-SystemCombo">
For example, the system color combinations in the browser you are currently using:
<p>Canvas with CanvasText <span style="background-color:Canvas; color:CanvasText">CanvasText</span></p>
<p>Canvas with LinkText <span style="background-color:Canvas; color:LinkText">LinkText</span></p>
<p>Canvas with VisitedText <span style="background-color:Canvas; color:VisitedText">VisitedText</span></p>
<p>Canvas with ActiveText <span style="background-color:Canvas; color:ActiveText">ActiveText</span></p>
<p>Canvas with GrayText <span style="background-color:Canvas; color:GrayText">GrayText</span></p>
<p>Canvas with ButtonBorder and adjacent Canvas <span style="background-color:Canvas; border: ButtonBorder; color:CanvasText; padding: 3px">CanvasText</span><span style="background-color:Canvas; color:CanvasText">Adjacent</span></p>
<p>ButtonFace with ButtonText <span style="background-color:ButtonFace; color:ButtonText">ButtonText</span></p>
<p>ButtonFace with ButtonText and ButtonBorder <span style="background-color:ButtonFace; color:ButtonText; border:ButtonBorder; padding: 3px">ButtonText</span></p>
<p>ButtonFace with GrayText <span style="background-color:ButtonFace; color:GrayText">GrayText</span></p>
<p>Field with FieldText <span style="background-color:Field; color:FieldText">FieldText</span></p>
<p>Field with GrayText <span style="background-color:Field; color:GrayText">GrayText</span></p>
<p>Mark with MarkText <span style="background-color:Mark; color:MarkText">MarkText</span></p>
<p>Mark with GrayText <span style="background-color:Mark; color:GrayText">GrayText</span></p>
<p>Highlight with HighlightText <span style="background-color:Highlight; color:HighlightText">HighlightText</span></p>
<p>Highlight with GrayText <span style="background-color:Highlight; color:GrayText">GrayText</span></p>
</div>
Earlier versions of CSS defined additional <<system-color>>s,
which have since been deprecated.
These are documented in [[#deprecated-system-colors]].
Note: The <<system-color>>s incur some privacy and security risk, as detailed in [[#priv-sec]].
<h3 id='transparent-color'>
The ''transparent'' keyword</h3>
The keyword <dfn value for="<color>">transparent</dfn> specifies a <a>transparent black</a>.
It is a type of <<named-color>>.
<h3 id='currentcolor-color'>
The ''<color>/currentcolor'' keyword</h3>
The keyword <dfn value for="<color>">currentcolor</dfn> represents value of the 'color' property on the same element.
Unlike <<named-color>>s, it is <em>not</em> restricted to sRGB;
the value can be any <<color>>.
Its <a>used values</a> is determined by <a href="#resolving-other-colors">resolving color values</a>.
<wpt>
currentcolor-001.html
currentcolor-002.html
</wpt>
<div class='example' id="ex-currentcolor">
Here's a simple example showing how to use the ''<color>/currentcolor'' keyword:
<pre class="lang-css">
.foo {
color: <span class="swatch" style="--color: red"></span>&nbsp;red;
background-color: <span class="swatch" style="--color: red"></span>&nbsp;currentcolor;
}
</pre>
This is equivalent to writing:
<pre class="lang-css">
.foo {
color: <span class="swatch" style="--color: red"></span>&nbsp;red;
background-color: <span class="swatch" style="--color: red"></span>&nbsp;red;
}
</pre>
</div>
<div class='example' id="ex-textemph-currentcolor">
For example, the 'text-emphasis-color' property [[CSS3-TEXT-DECOR]],
whose initial value is ''<color>/currentcolor'',
by default matches the text color
even as the 'color' property changes across elements.
<pre class="language-markup">
&lt;p>&lt;em>Some &lt;strong>really&lt;/strong> emphasized text.&lt;/em>
&lt;style>
p { color: black; }
em { text-emphasis: dot; }
strong { color: red; }
&lt;/style>
</pre>
<p><img src="images/text-emphasis.png" alt="rendered emphasized text with the word 'really' in red with red emphasis dots"/></p>
In the above example, the emphasis marks are black over the text "Some" and "emphasized text",
but red over the text "really".
</div>
Note: Multi-word keywords in CSS usually separate their component words with hyphens.
''<color>/currentcolor'' doesn't, because (deep breath)
it was originally introduced in SVG
as a property value, "current-color" with the usual CSS spelling.
It (along with all other properties and their values)
then became presentation attributes and attribute values,
as well as properties,
to make generation with XSLT easier.
Then all of the presentation attributes were changed
from hyphenated to camelCase, because the DOM
had an issue with hyphen meaning "minus".
But then, they didn't follow CSS conventions
anymore so all the properties and property values
that were <em>already</em> part of CSS were changed back to hyphenated!
''<color>/currentcolor'' was not a part of CSS at that time,
so remained camelCased.
Only later did CSS pick it up,
at which point the capitalization stopped mattering,
as CSS keywords are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>.
<h2 id='the-hsl-notation'>
HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
The RGB system for specifying colors,
while convenient for machines and graphic libraries,
is often regarded as very difficult for humans to gain an intuitive grasp on.
It's not easy to tell, for example,
how to alter an RGB color to produce a lighter variant of the same hue.
There are several other color schemes possible.
One such is the HSL color scheme,
which is much more intuitive to use,
but still maps easily back to RGB colors.
HSL colors are specified as a triplet of hue, saturation, and lightness.
The syntax of the ''hsl()'' function is:
<pre class='prod'>
<dfn>hsl()</dfn> = hsl( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
</pre>
<wpt>
hsl-001.html
hsl-002.html
hsl-003.html
hsl-004.html
hsl-005.html
hsl-006.html
hsl-007.html
hsl-008.html
<!--
the rel=help for these points to this spec, but bikeshed can't fnd them
background-color-hsl-001.html
background-color-hsl-002.html
background-color-hsl-003.html
background-color-hsl-004.html -->
</wpt>
The first argument specifies the hue angle.
In HSL (and HWB) the angle ''0deg'' represents sRGB primary red
(as does ''360deg'', ''720deg'', etc.),
and the rest of the hues are spread around the circle,
so ''120deg'' represents sRGB primary green,
''240deg'' represents sRGB primary blue, etc.
The next two arguments are the saturation and lightness, respectively.
For saturation, ''100%'' is a fully-saturated, bright color,
and ''0%'' is a fully-unsaturated gray.
For lightness, ''50%'' represents the "normal" color,
while ''100%'' is white and ''0%'' is black.
If the saturation or lightness are less than ''0%''
or greater than ''100%'',
they are clamped to those values
at computed value time,
before being converted to an sRGB color.
The final argument specifies the alpha channel of the color.
It's interpreted identically to the fourth argument of the ''rgb()'' function.
If omitted, it defaults to ''100%''.
HSL colors resolve to sRGB.
<div class='example' id="ex-hsl-primary-red">
For example, an ordinary red,
the same color you would see from the keyword <span class="swatch" style="--color: red"></span>&nbsp;''red''
or the hex notation <span class="swatch" style="--color: red"></span>&nbsp;''#f00'',
is represented in HSL as <span class="swatch" style="--color: red"></span>&nbsp;''hsl(0deg 100% 50%)''.
</div>
An advantage of HSL over RGB is that it is more intuitive:
people can guess at the colors they want,
and then tweak.
<div class='example' id="ex-hsl-tweak">
For example, the following colors can all be generated off of the basic "green" hue,
just by varying the other two arguments:
<pre class="lang-css">
hsl(120deg 100% 50%) <span style="color:black; background:hsl(120,100%,50%);">lime green</span>
hsl(120deg 100% 25%) <span style="color:white; background:hsl(120,100%,25%);">dark green</span>
hsl(120deg 100% 75%) <span style="color:black; background:hsl(120,100%,75%);">light green</span>
hsl(120deg 75% 85%) <span style="color:black; background:hsl(120,75%,85%);">pastel green</span>
</pre>
</div>
An advantage of HSL over LCH is that,
regardless of manipulation,
the result always lies inside the sRGB gamut.
A disadvantage of HSL over LCH
is that hue manipulation changes the visual lightness,
and that hues are not evenly spaced apart.
It is thus easier in HSL to create sets of matching colors
(by keeping the hue the same and varying the saturation and lightness),
compared to manipulating the sRGB component values;
however, because the lightness is simply the mean of the gamma-corrected
red, green and blue components
it does not correspond to the visual perception of lightness
across hues.
<div class="example" id="ex-hsl-sucks">
For example, <span class="swatch" style="--color: blue"></span>&nbsp;''blue''
is represented in HSL as
<span class="swatch" style="--color: blue"></span>&nbsp;''hsl(240deg 100% 50%)''
while <span class="swatch" style="--color: yellow"></span>&nbsp;''yellow''
is <span class="swatch" style="--color: yellow"></span>&nbsp;''hsl(60deg 100% 50%)''.
Both have an HSL Lightness of 50%,
but clearly the yellow looks much lighter than the blue.
In LCH, sRGB blue is
<span class="swatch" style="--color: blue"></span>&nbsp;''lch(29.6% 131.2 301.3)''
while
sRGB yellow is
<span class="swatch" style="--color: yellow"></span>&nbsp;''lch(97.6% 94.7 99.6)''.
The LCH Lightnesses of 29.6% and 97.6% clearly reflect
the visual lightnesses of the two colors.
</div>
The hue angle in HSL is not perceptually uniform;
colors appear bunched up in some areas
and widely spaced in others.
<div class="example" id="ex-hsl-sucks-more">
For example, the pair of hues
<!--
hsl(220 100% 50%) 42.114139000774955, 97.39536874737148, 290.5815091930946
hsl(250 100% 50%) 30.84988530751331, 129.71314978865763, 302.1290808073227
-->
<!--
hsl(50 100% 50%) 86.84897521929184, 86.24043356068755, 87.26505542654621
hsl(80 100% 50%) 91.96771031614921, 98.8076382873608, 119.14730687158351
-->
<span class="swatch" style="--color: hsl(220 100% 50%)"></span>&nbsp;''hsl(220deg 100% 50%)''
and
<span class="swatch" style="--color: hsl(250 100% 50%)"></span>&nbsp;''hsl(250deg 100% 50%)''
have an HSL hue difference of 250-220 = <strong>30</strong>deg and look fairly similar,
while another pair of colors
<span class="swatch" style="--color: hsl(50 100% 50%)"></span>&nbsp;''hsl(50deg 100% 50%)''
and
<span class="swatch" style="--color: hsl(80 100% 50%)"></span>&nbsp;''hsl(80deg 100% 50%)'',
which also have a hue difference of 80-50 = <strong>30</strong>deg, look very different.
In LCH, the same pair of colors
<span class="swatch" style="--color: hsl(220 100% 50%)"></span>&nbsp;''lch(42.1% 97.4 290.6)''
and
<span class="swatch" style="--color: hsl(250 100% 50%)"></span>&nbsp;''lch(30.8% 129.7 302.1)''
have a hue difference of 302.1-290.6 = <strong>11.5</strong>deg
while the second pair
<span class="swatch" style="--color: hsl(50 100% 50%)"></span>&nbsp;''lch(86.8% 86.2 87.3)''
and
<span class="swatch" style="--color: hsl(80 100% 50%)"></span>&nbsp;''lch(92.0% 98.8 119.1)''
have a hue difference of 119.1-87.3 = <strong>31.8</strong>deg,
correctly reflecting the visual separation of hues.
</div>
For legacy reasons,
''hsl()'' also supports an alternate syntax
that separates all of its arguments with commas:
<pre class='prod'>
hsl() = hsl( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
</pre>
Also for legacy reasons,
an <dfn>hsla()</dfn> function also exists,
with an identical grammar and behavior to ''hsl()''.
<wpt>
hsla-001.html
hsla-002.html
hsla-003.html
hsla-004.html
hsla-005.html
hsla-006.html
hsla-007.html
hsla-008.html
</wpt>
<h3 id='hsl-to-rgb'>
Converting HSL colors to sRGB colors</h3>
Converting an HSL color to sRGB is straightforward mathematically.
Here's a simple implementation of the conversion algorithm in JavaScript.
For simplicity, this algorithm assumes that the hue has been normalized to
a number in the half-open range [0, 6),
and the saturation and lightness have been normalized to the range [0, 1].
It returns an array of three numbers
representing the red, green, and blue channels of the colors,
normalized to the range [0, 1].
<pre class='lang-javascript'>
function hslToRgb(hue, sat, light) {
if( light &lt;= .5 ) {
var t2 = light * (sat + 1);
} else {
var t2 = light + sat - (light * sat);
}
var t1 = light * 2 - t2;
var r = hueToRgb(t1, t2, hue + 2);
var g = hueToRgb(t1, t2, hue);
var b = hueToRgb(t1, t2, hue - 2);
return [r,g,b];
}
function hueToRgb(t1, t2, hue) {
if(hue &lt; 0) hue += 6;
if(hue >= 6) hue -= 6;
if(hue &lt; 1) return (t2 - t1) * hue + t1;
else if(hue &lt; 3) return t2;
else if(hue &lt; 4) return (t2 - t1) * (4 - hue) + t1;
else return t1;
}
</pre>
<h3 id='hsl-examples'>
Examples of HSL colors</h3>
The tables below illustrate a wide range of possible HSL colors.
Each table represents one hue,
selected at 30° intervals,
to illustrate the common "core" hues:
red,
yellow,
green,
cyan,
blue,
magenta,
and the six intermediary colors between these.
In each table, the X axis represents the saturation
while the Y axis represents the lightness.
Issue(3088):
<div class="note">The conversions in the table below are known to contain errors. They are copied from CSS Color 3, which also had the same errors. Those colors were supposedly computed by a program in ABC. A future spec will correctly compute those colors. Meanwhile, please note that these conversions are non-normative examples.</div>
<div style="overflow: hidden;" class="color-table">
<table>
<tr>
<th><th colspan=5>0° Reds
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#FFBFBF"><td style="color:#F7C7C7"><td style="color:#EFCFCF"><td style="color:#E7D7D7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#FF8080"><td style="color:#EF8F8F"><td style="color:#DF9F9F"><td style="color:#CFAFAF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#FF4040"><td style="color:#E75858"><td style="color:#CF7070"><td style="color:#B78787"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#FF0000"><td style="color:#DF2020"><td style="color:#BF4040"><td style="color:#9F6060"><td style="color:#808080">
<tr><th>38%
<td style="color:#BF0000"><td style="color:#A71818"><td style="color:#8F3030"><td style="color:#784848"><td style="color:#606060">
<tr><th>25%
<td style="color:#800000"><td style="color:#701010"><td style="color:#602020"><td style="color:#503030"><td style="color:#404040">
<tr><th>13%
<td style="color:#400000"><td style="color:#380808"><td style="color:#301010"><td style="color:#281818"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>30° Red-Yellows (=Oranges)
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#FFDFBF"><td style="color:#F7DFC7"><td style="color:#EFDFCF"><td style="color:#E7DFD7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#FFBF80"><td style="color:#EFBF8F"><td style="color:#DFBF9F"><td style="color:#CFBFAF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#FF9F40"><td style="color:#E79F58"><td style="color:#CF9F70"><td style="color:#B79F87"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#FF8000"><td style="color:#DF8020"><td style="color:#BF8040"><td style="color:#9F8060"><td style="color:#808080">
<tr><th>38%
<td style="color:#BF6000"><td style="color:#A76018"><td style="color:#8F6030"><td style="color:#786048"><td style="color:#606060">
<tr><th>25%
<td style="color:#804000"><td style="color:#704010"><td style="color:#604020"><td style="color:#504030"><td style="color:#404040">
<tr><th>13%
<td style="color:#402000"><td style="color:#382008"><td style="color:#302010"><td style="color:#282018"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>60° Yellows
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#FFFFBF"><td style="color:#F7F7C7"><td style="color:#EFEFCF"><td style="color:#E7E7D7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#FFFF80"><td style="color:#EFEF8F"><td style="color:#DFDF9F"><td style="color:#CFCFAF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#FFFF40"><td style="color:#E7E758"><td style="color:#CFCF70"><td style="color:#B7B787"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#FFFF00"><td style="color:#DFDF20"><td style="color:#BFBF40"><td style="color:#9F9F60"><td style="color:#808080">
<tr><th>38%
<td style="color:#BFBF00"><td style="color:#A7A718"><td style="color:#8F8F30"><td style="color:#787848"><td style="color:#606060">
<tr><th>25%
<td style="color:#808000"><td style="color:#707010"><td style="color:#606020"><td style="color:#505030"><td style="color:#404040">
<tr><th>13%
<td style="color:#404000"><td style="color:#383808"><td style="color:#303010"><td style="color:#282818"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>90° Yellow-Greens
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#DFFFBF"><td style="color:#DFF7C7"><td style="color:#DFEFCF"><td style="color:#DFE7D7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#BFFF80"><td style="color:#BFEF8F"><td style="color:#BFDF9F"><td style="color:#BFCFAF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#9FFF40"><td style="color:#9FE758"><td style="color:#9FCF70"><td style="color:#9FB787"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#80FF00"><td style="color:#80DF20"><td style="color:#80BF40"><td style="color:#809F60"><td style="color:#808080">
<tr><th>38%
<td style="color:#60BF00"><td style="color:#60A718"><td style="color:#608F30"><td style="color:#607848"><td style="color:#606060">
<tr><th>25%
<td style="color:#408000"><td style="color:#407010"><td style="color:#406020"><td style="color:#405030"><td style="color:#404040">
<tr><th>13%
<td style="color:#204000"><td style="color:#203808"><td style="color:#203010"><td style="color:#202818"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>120° Greens
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#BFFFBF"><td style="color:#C7F7C7"><td style="color:#CFEFCF"><td style="color:#D7E7D7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#80FF80"><td style="color:#8FEF8F"><td style="color:#9FDF9F"><td style="color:#AFCFAF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#40FF40"><td style="color:#58E758"><td style="color:#70CF70"><td style="color:#87B787"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#00FF00"><td style="color:#20DF20"><td style="color:#40BF40"><td style="color:#609F60"><td style="color:#808080">
<tr><th>38%
<td style="color:#00BF00"><td style="color:#18A718"><td style="color:#308F30"><td style="color:#487848"><td style="color:#606060">
<tr><th>25%
<td style="color:#008000"><td style="color:#107010"><td style="color:#206020"><td style="color:#305030"><td style="color:#404040">
<tr><th>13%
<td style="color:#004000"><td style="color:#083808"><td style="color:#103010"><td style="color:#182818"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>150° Green-Cyans
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#BFFFDF"><td style="color:#C7F7DF"><td style="color:#CFEFDF"><td style="color:#D7E7DF"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#80FFBF"><td style="color:#8FEFBF"><td style="color:#9FDFBF"><td style="color:#AFCFBF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#40FF9F"><td style="color:#58E79F"><td style="color:#70CF9F"><td style="color:#87B79F"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#00FF80"><td style="color:#20DF80"><td style="color:#40BF80"><td style="color:#609F80"><td style="color:#808080">
<tr><th>38%
<td style="color:#00BF60"><td style="color:#18A760"><td style="color:#308F60"><td style="color:#487860"><td style="color:#606060">
<tr><th>25%
<td style="color:#008040"><td style="color:#107040"><td style="color:#206040"><td style="color:#305040"><td style="color:#404040">
<tr><th>13%
<td style="color:#004020"><td style="color:#083820"><td style="color:#103020"><td style="color:#182820"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>180° Cyans
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#BFFFFF"><td style="color:#C7F7F7"><td style="color:#CFEFEF"><td style="color:#D7E7E7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#80FFFF"><td style="color:#8FEFEF"><td style="color:#9FDFDF"><td style="color:#AFCFCF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#40FFFF"><td style="color:#58E7E7"><td style="color:#70CFCF"><td style="color:#87B7B7"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#00FFFF"><td style="color:#20DFDF"><td style="color:#40BFBF"><td style="color:#609F9F"><td style="color:#808080">
<tr><th>38%
<td style="color:#00BFBF"><td style="color:#18A7A7"><td style="color:#308F8F"><td style="color:#487878"><td style="color:#606060">
<tr><th>25%
<td style="color:#008080"><td style="color:#107070"><td style="color:#206060"><td style="color:#305050"><td style="color:#404040">
<tr><th>13%
<td style="color:#004040"><td style="color:#083838"><td style="color:#103030"><td style="color:#182828"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>210° Cyan-Blues
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#BFDFFF"><td style="color:#C7DFF7"><td style="color:#CFDFEF"><td style="color:#D7DFE7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#80BFFF"><td style="color:#8FBFEF"><td style="color:#9FBFDF"><td style="color:#AFBFCF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#409FFF"><td style="color:#589FE7"><td style="color:#709FCF"><td style="color:#879FB7"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#0080FF"><td style="color:#2080DF"><td style="color:#4080BF"><td style="color:#60809F"><td style="color:#808080">
<tr><th>38%
<td style="color:#0060BF"><td style="color:#1860A7"><td style="color:#30608F"><td style="color:#486078"><td style="color:#606060">
<tr><th>25%
<td style="color:#004080"><td style="color:#104070"><td style="color:#204060"><td style="color:#304050"><td style="color:#404040">
<tr><th>13%
<td style="color:#002040"><td style="color:#082038"><td style="color:#102030"><td style="color:#182028"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>240° Blues
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#BFBFFF"><td style="color:#C7C7F7"><td style="color:#CFCFEF"><td style="color:#D7D7E7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#8080FF"><td style="color:#8F8FEF"><td style="color:#9F9FDF"><td style="color:#AFAFCF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#4040FF"><td style="color:#5858E7"><td style="color:#7070CF"><td style="color:#8787B7"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#0000FF"><td style="color:#2020DF"><td style="color:#4040BF"><td style="color:#60609F"><td style="color:#808080">
<tr><th>38%
<td style="color:#0000BF"><td style="color:#1818A7"><td style="color:#30308F"><td style="color:#484878"><td style="color:#606060">
<tr><th>25%
<td style="color:#000080"><td style="color:#101070"><td style="color:#202060"><td style="color:#303050"><td style="color:#404040">
<tr><th>13%
<td style="color:#000040"><td style="color:#080838"><td style="color:#101030"><td style="color:#181828"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>270° Blue-Magentas
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#DFBFFF"><td style="color:#DFC7F7"><td style="color:#DFCFEF"><td style="color:#DFD7E7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#BF80FF"><td style="color:#BF8FEF"><td style="color:#BF9FDF"><td style="color:#BFAFCF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#9F40FF"><td style="color:#9F58E7"><td style="color:#9F70CF"><td style="color:#9F87B7"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#8000FF"><td style="color:#8020DF"><td style="color:#8040BF"><td style="color:#80609F"><td style="color:#808080">
<tr><th>38%
<td style="color:#6000BF"><td style="color:#6018A7"><td style="color:#60308F"><td style="color:#604878"><td style="color:#606060">
<tr><th>25%
<td style="color:#400080"><td style="color:#401070"><td style="color:#402060"><td style="color:#403050"><td style="color:#404040">
<tr><th>13%
<td style="color:#200040"><td style="color:#200838"><td style="color:#201030"><td style="color:#201828"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>300° Magentas
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#FFBFFF"><td style="color:#F7C7F7"><td style="color:#EFCFEF"><td style="color:#E7D7E7"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#FF80FF"><td style="color:#EF8FEF"><td style="color:#DF9FDF"><td style="color:#CFAFCF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#FF40FF"><td style="color:#E758E7"><td style="color:#CF70CF"><td style="color:#B787B7"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#FF00FF"><td style="color:#DF20DF"><td style="color:#BF40BF"><td style="color:#9F609F"><td style="color:#808080">
<tr><th>38%
<td style="color:#BF00BF"><td style="color:#A718A7"><td style="color:#8F308F"><td style="color:#784878"><td style="color:#606060">
<tr><th>25%
<td style="color:#800080"><td style="color:#701070"><td style="color:#602060"><td style="color:#503050"><td style="color:#404040">
<tr><th>13%
<td style="color:#400040"><td style="color:#380838"><td style="color:#301030"><td style="color:#281828"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
<table>
<tr>
<th><th colspan=5>330° Magenta-Reds
<tr>
<th><th colspan=5>Saturation
<tr>
<th><th>100%<th>75%<th>50%<th>25%<th>0%
<tr><th>100%
<td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF"><td style="color:#FFFFFF">
<tr><th>88%
<td style="color:#FFBFDF"><td style="color:#F7C7DF"><td style="color:#EFCFDF"><td style="color:#E7D7DF"><td style="color:#DFDFDF">
<tr><th>75%
<td style="color:#FF80BF"><td style="color:#EF8FBF"><td style="color:#DF9FBF"><td style="color:#CFAFBF"><td style="color:#BFBFBF">
<tr><th>63%
<td style="color:#FF409F"><td style="color:#E7589F"><td style="color:#CF709F"><td style="color:#B7879F"><td style="color:#9F9F9F">
<tr><th>50%
<td style="color:#FF0080"><td style="color:#DF2080"><td style="color:#BF4080"><td style="color:#9F6080"><td style="color:#808080">
<tr><th>38%
<td style="color:#BF0060"><td style="color:#A71860"><td style="color:#8F3060"><td style="color:#784860"><td style="color:#606060">
<tr><th>25%
<td style="color:#800040"><td style="color:#701040"><td style="color:#602040"><td style="color:#503040"><td style="color:#404040">
<tr><th>13%
<td style="color:#400020"><td style="color:#380820"><td style="color:#301020"><td style="color:#281820"><td style="color:#202020">
<tr><th>0%
<td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000"><td style="color:#000000">
</table>
</div>
<h2 id='the-hwb-notation'>
HWB Colors: ''hwb()'' function</h2>
HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors,
similar to HSL, but often even easier for humans to work with.
It describes colors with a starting hue,
then a degree of whiteness and blackness to mix into that base hue.
Many color-pickers are based on the HWB color system,
due to its intuitiveness.
HWB colors resolve to sRGB.
<figure>
<img src="images/color-picker.png">
<figcaption>
This is a screenshot of Chrome's color picker,
shown when a user activates an <code class='lang-markup'>&lt;input type="color"></code>.
The outer wheel is used to select the hue,
then the relative amounts of white and black are selected by clicking on the inner triangle.
</figcaption>
</figure>
The syntax of the ''hwb()'' function is:
<pre class='prod'>
<dfn>hwb()</dfn> = hwb( <<hue>> <<percentage>> <<percentage>> [ / <<alpha-value>> ]? )
</pre>
The first argument specifies the hue,
and is interpreted identically to ''hsl()''.
The second argument specifies the amount of white to mix in,
as a percentage from ''0%'' (no whiteness) to ''100%'' (full whiteness).
Similarly, the third argument specifies the amount of black to mix in,
also from ''0%'' (no blackness) to ''100%'' (full blackness).
Values outside of these ranges
are not invalid,
but are clamped to the ranges defined here at computed-value time.
If the sum of these two arguments is greater than 100%,
then at computed-value time they are further normalized to add up to 100%,
with the same relative ratio.
The fourth argument specifies the alpha channel of the color.
It's interpreted identically to the fourth argument of the ''rgb()'' function.
If omitted, it defaults to ''100%''.
The resulting color can be thought of conceptually as a mixture of paint in the chosen hue,
white paint, and black paint,
with the relative amounts of each determined by the percentages.
If white+black is equal to ''100%'' (after normalization),
it defines an achromatic color,
i.e. some shade of gray,
without any hint of the chosen hue.
<wpt>
hwb-001.html
hwb-002.html
hwb-003.html
hwb-004.html
hwb-005.html
color-resolving-hwb.html
</wpt>
<h3 id='hwb-to-rgb'>
Converting HWB colors to sRGB colors</h3>
Converting an HWB color to sRGB is straightforward,
and related to how one converts HSL to RGB.
The following Javascript implementation of the algorithm
first normalizes the white and black components,
so their sum is no larger than 100%.
<pre class="lang-javascript">
white /= 100;
black /= 100;
if (white + black >= 1) {
var gray = white / (white + black);
return [gray, gray, gray];
}
function hwbToRgb(hue, white, black) {
var rgb = hslToRgb(hue, 1, .5);
for(var i = 0; i &lt; 3; i++) {
rgb[i] *= (1 - white - black);
rgb[i] += white;
}