CSS colorProperty
Example
Set text-color for different elements:
body {
color:red;
}
h1 {
color:#0080FF;
}
p {
color:rgb(0,0,255);
}
Try it Yourself »
Attribute definition and usage instructions
The Color property specifies the text color.
| Default Value: | not specified |
|---|---|
| Inherited: | Yes |
| version: | CSS1 |
| JavaScript Syntax: | object.style.color="#FF0000" |
Browser Support
The number in the table indicates the first browser version that supports the property.
The number preceding -webkit-, -ms-, or -moz- indicates 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:Please use reasonable background and text color combinations to improve text readability.
Property value
Color values can be set in the following ways:
| Value | Description | Example |
|---|---|---|
| Color names. | The name of the color, such as red, blue, brown, lightseagreen, etc., is case-insensitive. |
color:red; /* 红色 */ color:black; /* 黑色 */ color:gray; /* 灰色 */ color:white; /* 白色 */ color:purple; /* 紫色 */ |
| Hexadecimal | Hexadecimal notation #RRGGBB and #RGB (for example, #ff0000). "#" is followed by 6 or 3 hexadecimal characters (0-9, A-F). |
#f03 #F03 #FF0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51) |
| RGB, red-green-blue (red-green-blue (RGB)) | Specifies the color as an rgb color code. The function format is rgb(R,G,B), and values can be integers from 0-255 or percentages. |
rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%) |
| RGBA, Red-Green-Blue-Alpha (RGBa) | RGBa extends the RGB color model by including an alpha channel, allowing the transparency of a color to be specified. a represents transparency: 0=transparent; 1=opaque. |
rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明，即红色 */ |
| HSL, hue-saturation-lightness (Hue-saturation-lightness) | Hue represents an angle on the color wheel (a circle representing a rainbow). Saturation and lightness are represented by percentages. 100% is full saturation, while 0% is a shade of gray. 100% lightness is white, 0% lightness is black, and 50% lightness is "normal". |
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */ |
| HSLA, Hue-Saturation-Lightness-Alpha (HSLa) | HSLa extends the HSL color model by including an alpha channel, allowing the transparency of a color to be specified. a represents transparency: 0=transparent; 1=opaque. |
hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */ |
More Examples
Related Articles
CSS Tutorial:CSS Text Formatting
other extensions