Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
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 ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 2 | Samsung Internet Android Full support Yes |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) | Chrome
Full support
62
| Edge No support No | Firefox Full support 49 | IE No support No | Opera
Full support
49
| Safari Full support 9.1 | WebView Android
Full support
62
| Chrome Android
Full support
62
| Firefox Android Full support 49 | Opera Android
Full support
47
| Safari iOS Full support 9.3 | Samsung Internet Android ? |
currentcolor | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 4 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 3.2 | Samsung Internet Android ? |
Allow floats in rgb() and rgba() | Chrome Full support 66 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 53 | Safari Full support 12.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 52 | Opera Android Full support 47 | Safari iOS Full support 12.2 | Samsung Internet Android ? |
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 ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 2 | Samsung Internet Android Full support Yes |
hsl() can accept alpha values | Chrome Full support 65 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 52 | Safari Full support 12.1 | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android Full support 52 | Opera Android Full support 47 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 9.0 |
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 ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | Samsung Internet Android Full support Yes |
rebeccapurple | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 33 | IE Full support 11 | Opera Full support 25 | Safari Full support 9 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 33 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 |
rgb() can accept alpha values | Chrome Full support 65 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 52 | Safari Full support 12.1 | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android Full support 52 | Opera Android Full support 47 | Safari iOS Full support 12.2 | Samsung Internet Android Full support 9.0 |
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 ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | 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 ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 1 | Samsung Internet Android Full support Yes |
Space-separated functional color notations | Chrome Full support 65 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 52 | Safari Full support 12.1 | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android Full support 52 | Opera Android Full support 47 | Safari iOS Full support 12.2 | Samsung Internet Android ? |
transparent | 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 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 2 | 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.
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color-adjust | Chrome
Full support
49
| Edge No support No | 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 ? | Safari iOS
Full support
6
| Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
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.
Update compatibility data on GitHub
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 Yes |
Support for percentage opacity values | Chrome Full support 78 | Edge No support No | 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.