mozilla

Revision 41479 of <color>

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

Revision Content

{{ CSSRef() }}

Summary

Many CSS properties accept color values. {{ Cssxref("color") }}, and {{ 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
Fully tranparent, the computed value is rgba(0,0,0,0).
currentColor
The value of the {{ Cssxref("color") }} property.
RGB
These examples all specify the same color:
color: #f00          /* #RGB */
color: #ff0000       /* RRGGBB */
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)
RGBA
{{ Fx_minversion_inline("3") }} fixme
HSL
fixme
HSLA
{{ Fx_minversion_inline("3") }} fixme

Specifications

Browser compatibility

Browser Lowest Version
RGB RGBA HSL HSLA
Internet Explorer 3.0 n/a n/a n/a
Firefox 1.0 3.0 1.0 3.0
Opera 2 10.0 9.5 10.0
Safari 1.0 3.1 3.1 3.1

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") }}, and {{ 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>transparent</dt><dd> Fully tranparent, the computed value is<code> rgba(0,0,0,0)</code>.</dd><dt>currentColor</dt><dd>The value of the {{ Cssxref("color") }} property.</dd><dt>RGB</dt><dd>These examples all specify the same color:
<pre>color: #f00          /* #RGB */
color: #ff0000       /* RRGGBB */
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)</pre>
</dd><dt>RGBA</dt><dd>{{ Fx_minversion_inline("3") }} fixme</dd><dt>HSL<br>
</dt><dd>fixme</dd><dt>HSLA</dt><dd>{{ Fx_minversion_inline("3") }} fixme</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">CSS2.1 Syntax</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="4" style="text-align: center;">Lowest Version</th> </tr> <tr> <th>RGB</th> <th>RGBA</th> <th>HSL</th> <th>HSLA</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>n/a</td> <td>n/a</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> </tr> <tr> <td>Opera</td> <td>2</td> <td>10.0</td> <td>9.5</td> <td>10.0</td> </tr> <tr> <td>Safari</td> <td>1.0</td> <td>3.1</td> <td>3.1</td> <td>3.1</td> </tr> </tbody>
</table>
<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