color property CSS Reference

Definition and Usage

The CSS color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1.

Note that the color value must be a uniform color, which may include a transparency value from CSS3 onwards. It can't be a <gradient> which is an <image> in CSS.

  • Initial Varies from one browser to another
  • Applies to all elements
  • Inherited yes
  • Media visual
  • Computed Value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • Animatable yes, as a color
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <color>
color: red;                     // A CSS Level 1 color.
color: orange;                  // The only color added in CSS Level 2 (Revision 1).
color: antiquewhite;            // A CSS Level 3 color, sometimes called a SVG or X11 color.
color: #0f0;                    // The color 'lime' defined using the 3-character dash notation.
color: #00ff00;                 // The color 'lime' defined using the 6-character dash notation.
color: rgba( 34, 12, 64, 0.3);  // A color defined using the available functional notations.
color: currentColor;            // The special keyword representing the color's value of its direct ancestor.
color: inherit;


Is a <color> value giving the color of the textual elements of the element.


The following are all ways to make the element's text red:
element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }
/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5) }
element { color: hsla(0, 100%, 50%, 0.5) }


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 or earlier)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.01.0 (1)

Relative articles