<color>

  • Revision slug: CSS/color_value
  • Revision title: color (CSS data type)
  • Revision id: 41483
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 47 words added, 15 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") }}.

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") }} (hue-saturation-lightness-alpha) hsla(H,S,L,a)
Extendeds the HSL color model to include "alpha" to allow specification of the opacity of a color. [fixme]

System Colors
[fixme]

Specifications

Browser compatibility

Browser Lowest Version
RGB RGBa HSL HSLa transparent currentColor
Internet Explorer 3.0 n/a n/a n/a (*) n/a
Firefox 1.0 3.0 1.0 3.0 3.0 3.0
Opera 3.5 10.0 9.5 10.0 10.0 9.5
Safari 1.0 3.1 3.1 3.1 3.1 n/a

(*) 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>
<h3 name="Summary">Summary</h3>
<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>
<h3 name="Units">Units</h3>
<p>A<code> <span class="index-def value-def-color" id="valuea-def-color" title="&lt;color>::definition of">&lt;color&gt;</span> </code>is either a keyword or a numerical specification.</p>
<dl><dt>HTML4 and SVG color keywords </dt><dd>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></dd> <dt><br>
</dt><dt>transparent</dt><dd> {{ Fx_minversion_inline("3") }} Fully transparent, the computed value is<code> rgba(0,0,0,0)</code>.<br>
In CSS 2.1 allowd for {{ Cssxref("background") }} and {{ Cssxref("border") }}.<br>
In CSS 3 also allowed for {{ Cssxref("color") }}.<br>
</dd><dt><br>
</dt><dt>currentColor</dt><dd>{{ Fx_minversion_inline("3") }} The value of the element's {{ Cssxref("color") }} property.</dd><dt><br>
</dt><dt>RGB (red-green-blue) </dt><dd>
<ul> <li>Hexadecimal notation <ul> <li><code>#RRGGBB  </code><span style="font-family: monospace;">"</span><code>#", </code>followed by six hexadecimal characters (0-9, A-F).</li> <li><code>#RGB</code>  <span style="font-family: monospace;">"</span><code>#", </code>followed by three hexadecimal characters (0-9, A-F).</li> </ul> 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.</li> <li> <p>functional Notation<code> rgb(R,G,B)</code><br> "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.</p> </li>
</ul>
<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>
</dd><dt><br>
</dt><dt>RGBa (red-green-blue-alpha)<code> rgba(R,G,B,a) </code></dt><dd>{{ Fx_minversion_inline("3") }}<code> </code><br>
Extendeds the RGB color model to include "alpha" to allow specification of the opacity of a color. [fixme]</dd><dt><br>
</dt><dt>HSL (hue-saturation-lightness)<code> hsl(H,S,L)</code><code> </code><br>
</dt><dd> 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).</dd><dd><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.<br>
</dd><dd><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".
<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>
</dd><dt><br>
</dt><dt>HSLa (hue-saturation-lightness-alpha)<code> hsla(H,S,L,a) </code></dt><dd>{{ Fx_minversion_inline("3") }} (hue-saturation-lightness-alpha)<code> hsla(H,S,L,a) </code><br>
Extendeds the HSL color model to include "alpha" to allow specification of the opacity of a color. [fixme]</dd><dt><br>
System Colors<br>
</dt><dd>[fixme]<br>
</dd> </dl><h3 name="Specifications">Specifications</h3>
<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>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<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>n/a</td> <td>n/a</td> <td>n/a</td> <td>(*)</td> <td>n/a</td> </tr> <tr> <td>Firefox</td> <td>1.0</td> <td>3.0</td> <td>1.0</td> <td>3.0</td> <td>3.0</td> <td>3.0</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</td> <td>1.0</td> <td>3.1</td> <td>3.1</td> <td>3.1</td> <td>3.1</td> <td>n/a</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>
<h3 name="See_Also">See Also</h3>
<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