Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
You can also read the article in English (US).
The color
CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor
value. currentcolor
may be used as an indirect value on other properties and is the default for other color properties, such as border-color
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
For an overview of using color in HTML, see Applying color to HTML elements using CSS.
Syntax
/* Keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* Global values */ color: inherit; color: initial; color: unset;
The color
property is specified as a single <color>
value.
Note that the value must be a uniform color
. It can't be a <gradient>
, which is actually a type of <image>
.
Values
<color>
- Sets the color of the textual and decorative parts of the element.
Formal syntax
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Examples
The following are all ways to make a paragraph's text red:
p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%, 50%); } /* 50% translucent */ p { color: rgba(255, 0, 0, 0.5); } p { color: hsla(0, 100%, 50%, 0.5); }
Accessibility concerns
It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 The definition of 'color' in that specification. |
Working Draft | Adds commaless syntaxes for the rgb() , rgba() , hsl() , and hsla() functions. Allows alpha values in rgb() and hsl() , turning rgba() and hsla() into (deprecated) aliases for them.Adds color keyword rebeccapurple .Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. Adds hwb() , device-cmyk() , and color() functions. |
CSS Transitions The definition of 'color' in that specification. |
Working Draft | Defines color as animatable. |
CSS Color Module Level 3 The definition of 'color' in that specification. |
Recommendation | Deprecates system-colors. Adds SVG colors. Adds the rgba() , hsl() , and hsla() functions. |
CSS Level 2 (Revision 1) The definition of 'color' in that specification. |
Recommendation | Adds the orange color and the system colors. |
CSS Level 1 The definition of 'color' in that specification. |
Recommendation | Initial definition. |
Initial value | Varies from one browser to another |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
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 rgba(0,0,0,0) . |
Animation type | a color |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Edge Mobile Full support 12 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Keyword color values | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
3
| Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
RGB hexadecimal notation (#RRGGBB , #RGB ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
RGB functional notation (rgb() ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
HSL color values (hsl() ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Alpha color values (rgba() , hsla() ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3 | IE Full support 9 | Opera Full support 10 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
currentcolor | Chrome Full support 1 | Edge ? | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 4 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
transparent | Chrome Full support 1 | Edge ? | Firefox Full support 3 | IE Full support 9 | Opera Full support 10 | Safari Full support 3.1 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rebeccapurple | Chrome Full support 38 | Edge ? | Firefox Full support 33 | IE Full support 11 | Opera Full support 25 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Edge Mobile ? | Firefox Android Full support 33 | Opera Android ? | Safari iOS Full support 8 | Samsung Internet Android ? |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) | Chrome
Full support
62
| Edge No support No | Firefox Full support 49 | IE ? | Opera
Full support
39
| Safari Full support 9.1 | WebView Android ? | Chrome Android ? | Edge Mobile No support No | Firefox Android ? | Opera Android No support No | Safari iOS ? | Samsung Internet Android ? |
Space-separated functional color notations | Chrome Full support 65 | Edge ? | Firefox Full support 52 | IE ? | Opera Full support 52 | Safari ? | WebView Android Full support 65 | Chrome Android Full support 65 | Edge Mobile ? | Firefox Android Full support 52 | Opera Android Full support 52 | Safari iOS ? | Samsung Internet Android ? |
Allow floats in rgb() and rgba() | Chrome Full support 66 | Edge ? | Firefox Full support 52 | IE ? | Opera Full support 53 | Safari ? | WebView Android Full support 66 | Chrome Android Full support 66 | Edge Mobile ? | Firefox Android Full support 52 | Opera Android Full support 53 | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
- The
<color>
data type - Other color-related properties:
background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
,column-rule-color
, andcolor-adjust
- Applying color to HTML elements using CSS