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.