Revision 41485 of <color>

  • Revision slug: CSS/color_value
  • Revision title: color (CSS data type)
  • Revision id: 41485
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 303 words added, 20 words removed

Revision Content

{{ CSSRef() }}

Summary

Many CSS properties accept color values. {{ Cssxref("color") }}, {{ Cssxref("background-color") }} or {{ Cssxref("border-color") }} are common CSS properties that need color as a value.

Units

A <color> is either a keyword or a numerical specification.

HTML4 and SVG color keywords

E.g. red, blue, lightseegreen. See CSS3 Color #svg-color

transparent

{{ Fx_minversion_inline("3") }} Fully transparent, the computed value is rgba(0,0,0,0).

In CSS 2.1 allowd for {{ Cssxref("background") }} and {{ Cssxref("border") }}.

In CSS 3 also allowed for {{ Cssxref("color") }} and other properties.

currentColor

{{ Fx_minversion_inline("3") }} The value of the element's {{ Cssxref("color") }} property.

RGB (red-green-blue)

Hexadecimal notation

#RRGGBB
"#", followed by six hexadecimal characters (0-9, A-F).
#RGB
"#", followed by three hexadecimal characters (0-9, A-F).

The three-digit RGB notation (#RGB) and the six-digit form (#RRGGBB) are equal.
For example, #f03 and #ff0033 represent the same color.

functional Notation rgb(R,G,B)

"rgb", followed by three {{ Xref_cssinteger() }} or three {{ Xref_csspercentage() }} values.
The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.

/* These examples all specify the same RGB color: */
 
color: #f03
color: #F03
color: #ff0033
color: #FF0033
color: rgb(255,0,51)
color: rgb(255, 0, 51)
color: rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
color: rgb(100%,0%,20%)
color: rgb(100%, 0%, 20%)
color: rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

RGBa (red-green-blue-alpha) rgba(R,G,B,a)

{{ Fx_minversion_inline("3") }}Extendeds the RGB color model to include "alpha" to allow specification of the opacity of a color. [fixme]

HSL (hue-saturation-lightness) hsl(H,S,L) 

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).

Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless {{ Xref_cssnumber() }}. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.

Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of grey. 0% lightness is black, 100% lightness is white, and 50% lightness is "normal".

color: hsl(120, 100%, 50%)   /* green */ 
color: hsl(120, 100%, 30%)   /* dark green */ 
color: hsl(120, 100%, 70%)   /* light green */
color: hsl(120,  60%, 70%)   /* pastel green */

HSLa (hue-saturation-lightness-alpha) hsla(H,S,L,a)

{{ Fx_minversion_inline("3") }} Extendeds the HSL color model to include "alpha" to allow specification of the opacity of a color. [fixme]

System Colors

Not all system colors are supported on all systems. {{ deprecated_inline() }} for use on public web pages.

ActiveBorder
Active window border.
ActiveCaption
Active window caption.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face color for three-dimensional display elements.
ButtonHighlight
Highlight color for three-dimensional display elements (for edges facing away from the light source).
ButtonShadow
Shadow color for three-dimensional display elements.
ButtonText
Text on push buttons.
CaptionText
Text in caption, size box, and scrollbar arrow box.
GrayText
Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight
Item(s) selected in a control.
HighlightText
Text of item(s) selected in a control.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption.
InactiveCaptionText
Color of text in an inactive caption.
InfoBackground
Background color for tooltip controls.
InfoText
Text color for tooltip controls.
Menu
Menu background.
MenuText
Text in menus.
Scrollbar
Scroll bar gray area.
ThreeDDarkShadow
Dark shadow for three-dimensional display elements.
ThreeDFace
Face color for three-dimensional display elements.
ThreeDHighlight
Highlight color for three-dimensional display elements.
ThreeDLightShadow
Light color for three-dimensional display elements (for edges facing the light source).
ThreeDShadow
Dark shadow for three-dimensional display elements.
Window
Window background.
WindowFrame
Window frame.
WindowText
Text in windows.

Specifications

Browser compatibility

Browser Lowest Version
RGB RGBa HSL HSLa transparent currentColor
Internet Explorer 3.0 --- --- --- (*) ---
Firefox (Gecko) 1.0 (1.0) 3.0 (1.9) 1.0 3.0 (1.9) 3.0 (1.9) 3.0 (1.9)
Opera 3.5 10.0 9.5 10.0 10.0 9.5
Safari (WebKit) 1.0 3.1 3.1 3.1 3.1 ---

(*) IE 7-8 supports transparent only for {{ Cssxref("background") }} and {{ Cssxref("border") }}. color:transparent is drawn black in IE.

See Also

{{ Cssxref("color") }}, {{ Cssxref("background-color") }}, {{ Cssxref("border-color") }}, {{ Cssxref("outline-color") }}, {{ Cssxref("text-shadow") }}, {{ Cssxref("-moz-box-shadow") }}

{{ languages( { "fr": "fr/CSS/valeur_de_couleur" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>Many CSS properties accept color values. {{ Cssxref("color") }}, {{ Cssxref("background-color") }} or {{ Cssxref("border-color") }} are common CSS properties that need color as a value.</p>
<h2>Units</h2>
<p>A<code> &lt;color&gt; </code>is either a keyword or a numerical specification.</p>
<h3>HTML4 and SVG color keywords</h3>
<p>E.g.<code> red</code>,<code> blue</code>,<code> lightseegreen</code>. See <a class="external" href="http://www.w3.org/TR/css3-color/#svg-color" title="http://www.w3.org/TR/css3-color/#svg-color">CSS3 Color #svg-color</a></p>
<h3>transparent</h3>
<p>{{ Fx_minversion_inline("3") }} Fully transparent, the computed value is<code> rgba(0,0,0,0)</code>.</p>
<p>In CSS 2.1 allowd for {{ Cssxref("background") }} and {{ Cssxref("border") }}.</p>
<p>In CSS 3 also allowed for {{ Cssxref("color") }} and other properties.</p>
<h3>currentColor</h3>
<p>{{ Fx_minversion_inline("3") }} The value of the element's {{ Cssxref("color") }} property.</p>
<h3>RGB (red-green-blue)</h3>
<h4>Hexadecimal notation</h4>
<dl><dt><code>#RRGGBB</code></dt><dd>"<code>#</code>", followed by six hexadecimal characters (0-9, A-F).</dd><dt><code>#RGB</code></dt><dd>"<code>#</code>", followed by three hexadecimal characters (0-9, A-F).</dd></dl>
<p>The three-digit RGB notation (<code>#RGB</code>) and the six-digit form (<code>#RRGGBB</code>) are equal.<br>
For example,<code> #f03 </code>and<code> #ff0033 </code>represent the same color.</p>
<h4>functional Notation<code> rgb(R,G,B)</code></h4>
<p>"<code>rgb</code>", followed by three {{ Xref_cssinteger() }} or three {{ Xref_csspercentage() }} values.<br>
The integer number 255 corresponds to 100%, and to F or FF in the hexadecimal notation.</p>
<pre>/* These examples all specify the same RGB color: */
 
color: #f03
color: #F03
color: #ff0033
color: #FF0033
color: rgb(255,0,51)
color: rgb(255, 0, 51)
color: <strike>rgb(255, 0, 51.2)</strike> /* ERROR! Don't use fractions, use integers */ 
color: rgb(100%,0%,20%)
color: rgb(100%, 0%, 20%)
color: <strike>rgb(100%, 0, 20%)</strike> /* ERROR! Don't mix up integer and percentage notation */</pre>
<h3>RGBa (red-green-blue-alpha)<code> rgba(R,G,B,a) </code></h3>
<p>{{ Fx_minversion_inline("3") }}Extendeds the RGB color model to include "alpha" to allow specification of the opacity of a color. [fixme]</p>
<h3>HSL (hue-saturation-lightness)<code> hsl(H,S,L)</code><code> </code></h3>
<p>The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).</p>
<p><strong>Hue </strong>is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is given as a unitless {{ Xref_cssnumber() }}. By definition <strong>red=0=360</strong>, and the other colors are spread around the circle, so <strong>green=120</strong>, <strong>blue=240</strong>, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.</p>
<p><strong>Saturation</strong> and <strong>lightness</strong> are represented as percentages. 100% is full saturation, and 0% is a shade of grey. 0% lightness is black, 100% lightness is white, and 50% lightness is "normal".</p>
<pre>color: hsl(120, 100%, 50%)   /* green */ 
color: hsl(120, 100%, 30%)   /* dark green */ 
color: hsl(120, 100%, 70%)   /* light green */
color: hsl(120,  60%, 70%)   /* pastel green */</pre>
<h3>HSLa (hue-saturation-lightness-alpha)<code> hsla(H,S,L,a) </code></h3>
<p>{{ Fx_minversion_inline("3") }} Extendeds the HSL color model to include "alpha" to allow specification of the opacity of a color. [fixme]</p>
<h3>System Colors</h3>
<p>Not all system colors are supported on all systems. {{ deprecated_inline() }} for use on public web pages.<a class="internal" href="/Project:en/Custom_Templates" title="Project:En/Custom Templates"><br>
</a></p>
<dl><dt>ActiveBorder</dt><dd>Active window border.</dd><dt>ActiveCaption</dt><dd>Active window caption.</dd><dt>AppWorkspace</dt><dd>Background color of multiple document interface.</dd><dt>Background</dt><dd>Desktop background.</dd><dt>ButtonFace</dt><dd>Face color for three-dimensional display elements.</dd><dt>ButtonHighlight</dt><dd>Highlight color for three-dimensional display elements (for edges facing away from the light source).</dd><dt>ButtonShadow</dt><dd>Shadow color for three-dimensional display elements.</dd><dt>ButtonText</dt><dd>Text on push buttons.</dd><dt>CaptionText</dt><dd>Text in caption, size box, and scrollbar arrow box.</dd><dt>GrayText</dt><dd>Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.</dd><dt>Highlight</dt><dd>Item(s) selected in a control.</dd><dt>HighlightText</dt><dd>Text of item(s) selected in a control.</dd><dt>InactiveBorder</dt><dd>Inactive window border.</dd><dt>InactiveCaption</dt><dd>Inactive window caption.</dd><dt>InactiveCaptionText</dt><dd>Color of text in an inactive caption.</dd><dt>InfoBackground</dt><dd>Background color for tooltip controls.</dd><dt>InfoText</dt><dd>Text color for tooltip controls.</dd><dt>Menu</dt><dd>Menu background.</dd><dt>MenuText</dt><dd>Text in menus.</dd><dt>Scrollbar</dt><dd>Scroll bar gray area.</dd><dt>ThreeDDarkShadow</dt><dd>Dark shadow for three-dimensional display elements.</dd><dt>ThreeDFace</dt><dd>Face color for three-dimensional display elements.</dd><dt>ThreeDHighlight</dt><dd>Highlight color for three-dimensional display elements.</dd><dt>ThreeDLightShadow</dt><dd>Light color for three-dimensional display elements (for edges facing the light source).</dd><dt>ThreeDShadow</dt><dd>Dark shadow for three-dimensional display elements.</dd><dt>Window</dt><dd>Window background.</dd><dt>WindowFrame</dt><dd>Window frame.</dd><dt>WindowText</dt><dd>Text in windows.</dd></dl>
<h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-color" title="http://www.w3.org/TR/CSS21/syndata.html#value-def-color">CSS 2.1 Syntax</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" title="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS 2.1 UI #system-colors</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-color/#colorunits" title="http://www.w3.org/TR/css3-color/#colorunits">CSS3 Color</a></li>
</ul>
<h2>Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th rowspan="2">Browser</th> <th colspan="6" style="text-align: center;">Lowest Version</th> </tr> <tr> <th>RGB</th> <th>RGBa</th> <th>HSL</th> <th>HSLa</th> <th>transparent</th> <th>currentColor</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>---</td> <td>---</td> <td>---</td> <td>(*)</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.0 (1.9)</td> <td>1.0</td> <td>3.0 (1.9)</td> <td>3.0 (1.9)</td> <td>3.0 (1.9)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.0</td> <td>9.5</td> <td>10.0</td> <td>10.0</td> <td>9.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0</td> <td>3.1</td> <td>3.1</td> <td>3.1</td> <td>3.1</td> <td>---</td> </tr> </tbody>
</table>
<p>(*) IE 7-8 supports transparent only for {{ Cssxref("background") }} and {{ Cssxref("border") }}.<code> color:transparent </code>is drawn black in IE.</p>
<h2>See Also</h2>
<p>{{ Cssxref("color") }}, {{ Cssxref("background-color") }}, {{ Cssxref("border-color") }}, {{ Cssxref("outline-color") }}, {{ Cssxref("text-shadow") }}, {{ Cssxref("-moz-box-shadow") }}</p>
<p>{{ languages( { "fr": "fr/CSS/valeur_de_couleur" } ) }}</p>
Revert to this revision