This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

color

Summary

The color property sets the color of an element’s foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a).

Overview table

Initial value
black, except in a few cases (see notes)
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
For a non-translucent color, an hexadecimal equivalent is used. Otherwise it is the RGBa equivalent
Animatable
Yes
CSS Object Model Property
color
Percentages
NA

Syntax

  • color: color

Values

color
CSS color value

Examples

/* Setting a paragraph color to turquoise with a name value */
p {color:turquoise}

/* Setting the same propriety with an hexadecimal value*/
p {color:#40E0D0}

/* with a RGB decimal value */
p { color: rgb(64,224,208) }

/* with a RGB percentage value */
p { color: rgb(25.1%,87.8%,81.6%) }

/* with an HSL value */
p { color: hsl(174,72%,56%) }

/* We now want our color to be 20% translucent which means a 80% opacity */

/* We can achieve this with an RGBa value */
p { color: rgba(64,224,208,0.8) }

/* Or an HSLa value */
p { color: hsla(174,72%,56%,0.8) }

View live example

Usage

 Though CSS color values are precisely defined, they may appear differently between different output devices. Most of them are not calibrated, and some browsers do not support output device color profiles. Without these, color rendering may vary significantly.

Notes

Default color

Some browsers change the default color from black to another color in their default css (user-agent stylesheet).

RGB, HSL, RGBa and HSLa support

HSL, RGBa and HSLa are not supported by older browsers (IE6-8), therefore if you do use such colours you should also provide a fallback color property that uses something similar but more widely supported, like a hex value. This should be placed either next to the modern color value but earlier in the cascade, or in a separate stylesheet hidden behind a conditional comment.

Separating foreground from background

In order to make it easier for users to see and hear content including separating foreground from background, [WCAG] indicates the following:

  • color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. [Guideline 1.4.1] (Level A)
  • The visual presentation of text and images of text has a minimum contrast ratio of at least 4.5:1, with some exceptions. [Contrast Minimum Guideline 1.4.3] (Level AA)
  • The visual presentation of text and images of text has an enhanced contrast ratio of at least 7:1 [Guideline 1.4.6] (Level AAA)

Related specifications

CSS3 Color Module Level 3
W3C Recommendation
Color in CSS1
W3C Recommendation

See also

Other articles

css color value

See css color value for more information. The color value may be given as:

  • Basic color keyword
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
  • Extended color keyword
aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, ...
See [W3C CSS Color Module Recommendation 4.3. Extended color keywords](http://www.w3.org/TR/css3-color/#svg-color) for a complete list of keywords.
- RGB
#00f
#0000ff
rgb(0,0,255)
rgb(0%,0%,100%)
  • RGBA
rgba(0,0,255,0.5)
rgba(0%,0%,100%,0.5)
  • HSL
hsl(0, 100%, 50%)
  • HSLA
hsla(0, 100%, 50%, 0.5)
  • “transparent” (since CSS3)
  • “currentColor” (since CSS3) (same as “color: inherit”)
  • CSS2 system colors (Deprecated)