CSS color Property
Example
Setting text color for different elements:
body {
color: red;
}
h1 {
color: #00ff00;
}
p {
color: rgb(0,0,255);
}
Property Definition and Usage
The color property specifies the color of the text.
| Default value: | Not specified |
|---|---|
| Inherited: | Yes |
| Version: | CSS1 |
| JavaScript syntax: | object.style.color="#FF0000" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| color | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
Tips and Notes
Tip: Use a sensible background color and text color combination to improve text readability.
Property Values
Color values can be set using the following methods:
| Value | Description | Example |
|---|---|---|
| Color name | The name of the color, such as red, blue, brown, lightseagreen, etc., case-insensitive. | color: red; /* Red */<br>color: black; /* Black */<br>color: gray; /* Gray */<br>color: white; /* White */<br>color: purple; /* Purple */ |
| Hexadecimal | Hexadecimal notation #RRGGBB and #RGB (e.g., #ff0000). "#" followed by 6 or 3 hexadecimal characters (0-9, A-F). | #f03<br>#F03<br>#ff0033<br>#FF0033<br>rgb(255,0,51)<br>rgb(255, 0, 51) |
| RGB, Red-Green-Blue (RGB) | Specifies colors using rgb codes, function format rgb(R,G,B), values can be 0-255 integers or percentages. | rgb(255,0,51)<br>rgb(255, 0, 51)<br>rgb(100%,0%,20%)<br>rgb(100%, 0%, 20%) |
| RGBA, Red-Green-Blue-Alpha (RGBa) | RGBa extends the RGB color model, including an alpha channel to set a color's transparency. a represents opacity: 0=transparent; 1=opaque. | rgba(255,0,0,0.1) /* 10% opaque */<br>rgba(255,0,0,0.4) /* 40% opaque */<br>rgba(255,0,0,0.7) /* 70% opaque */<br>rgba(255,0,0,1) /* Opaque, i.e., red */ |
| HSL, Hue-Saturation-Lightness | Hue represents an angle on the color wheel. Saturation and lightness are represented as percentages. 100% is full saturation, 0% is a shade of gray. 100% lightness is white, 0% is black, and 50% is "normal". | hsl(120,100%,25%) /* Dark green */<br>hsl(120,100%,50%) /* Green */<br>hsl(120,100%,75%) /* Light green */ |
| HSLA, Hue-Saturation-Lightness-Alpha (HSLa) | HSLa extends the HSL color model, including an alpha channel to set a color's transparency. a represents opacity: 0=transparent; 1=opaque. | hsla(240,100%,50%,0.05) /* 5% opaque */<br>hsla(240,100%,50%,0.4) /* 40% opaque */<br>hsla(240,100%,50%,0.7) /* 70% opaque */<br>hsla(240,100%,50%,1) /* Fully opaque */ |
More Examples
Example
Color as a hexadecimal value:
body {color: #92a8d1;}
Example
Color value as RGB:
body {color: rgb(255,0,51);}
Example
Color value as RGBA:
body {color: rgba(255,0,0,0.5);}
body {color: rgba(255,0,0,0.7);}
Example
Color value in HSL:
body {color: hsl(120,100%,25%);}
Example
Color value in HSLA:
body {color: hsla(240,100%,50%, 0.7);}
Related Articles
CSS Tutorial: CSS Text Formatting