CSS Color is a CSS module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content. Not all CSS properties that take a <color> as a value are part of this module, but they do depend upon it.
Reference
Properties
Data types
Guides
- Applying color to HTML elements using CSS
- A guide to using CSS to apply color to a variety of types of content. All color-related CSS properties are touched upon.
Tools
- Color picker tool
- This tool makes it easy to create, adjust, and experiment with custom colors.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Color Module Level 4 | Working Draft | |
| CSS Color Module Level 3 | Recommendation | |
| CSS Level 2 (Revision 1) | Recommendation | |
| CSS Level 1 | Recommendation | Initial definition |
Browser compatibility
color property
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
color | 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 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
color-adjust property
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
color-adjust | Chrome
Full support
49
| Edge
Full support
79
| Firefox Full support 48 | IE No support No | Opera
Full support
15
| Safari
Full support
6
| WebView Android
Full support
49
| Chrome Android
Full support
49
| Firefox Android Full support 48 | Opera Android
Full support
36
| Safari iOS
Full support
6
| Samsung Internet Android
Full support
5.0
|
Legend
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.
- Uses a non-standard name.
opacity property
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
opacity | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 9 | Opera Full support 9 | Safari
Full support
2
| WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
| Support for percentage opacity values | Chrome Full support 78 | Edge Full support 79 | Firefox Full support 70 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 78 | Chrome Android Full support 78 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Color-related properties that are part of other specifications:
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, andcolumn-rule-color - In CSS, gradients aren't colors but images.
