W3cubDocs

/CSS

CSS Colors

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

<color>

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 compatibilityUpdate compatibility data on GitHub Update compatibility data on GitHub Update compatibility data on GitHub

`color` property

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	Yes	Yes	Yes
Keyword color values	1	12	1	3 3 Internet Explorer 8 and later support gray color keywords spelled with an e (`grey`, `darkgrey`, `darkslategrey`, `dimgrey`, `lightgrey`, and `lightslategrey`). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (`gray`, `darkgray`, `darkslategray`, `dimgray`, `lightgray`, and `lightslategray`).	3.5	1
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	1	12	1	3	3.5	1
RGB functional notation (`rgb()`)	1	12	1	4	3.5	1
HSL color values (`hsl()`)	1	12	1	9	9.5	3.1
Alpha color values (`rgba()`, `hsla()`)	1	12	3	9	10	3.1
`currentcolor`	1	?	1.5	9	9.5	4
`transparent`	1	?	3	9	10	3.1
`rebeccapurple`	38	?	33	11	25	Yes
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	62 62 52 Disabled Disabled From version 52: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	No	49	?	39 Disabled 39 Disabled Disabled From version 39: this feature is behind the `Enable experimental Web Platform features` preference.	9.1
Space-separated functional color notations	65	?	52	?	52	?
Allow floats in `rgb()` and `rgba()`	66	?	52	?	53	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	1	18	12	4	Yes	Yes	Yes
Keyword color values	Yes	Yes	Yes	Yes	Yes	Yes	Yes
RGB hexadecimal notation (`#RRGGBB`, `#RGB`)	Yes	Yes	Yes	Yes	Yes	Yes	Yes
RGB functional notation (`rgb()`)	Yes	Yes	Yes	Yes	Yes	Yes	Yes
HSL color values (`hsl()`)	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Alpha color values (`rgba()`, `hsla()`)	Yes	Yes	Yes	4	Yes	Yes	Yes
`currentcolor`	?	?	?	?	?	?	?
`transparent`	?	?	?	?	?	?	?
`rebeccapurple`	Yes	?	?	33	?	8	?
RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)	?	?	No	?	No	?	?
Space-separated functional color notations	65	65	?	52	52	?	?
Allow floats in `rgb()` and `rgba()`	66	66	?	52	53	?	?

`color-adjust` property

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	49 Prefixed 49 Prefixed Prefixed Requires the vendor prefix: -webkit-	No	48	No	15 Prefixed 15 Prefixed Prefixed Requires the vendor prefix: -webkit-	6 Prefixed 6 Prefixed Prefixed Requires the vendor prefix: -webkit-

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	?	?	No	48	?	?	?

`opacity` property

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1 1 1 — 3.5 Prefixed Prefixed Requires the vendor prefix: -moz-	9	9	1.2

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	1	Yes	Yes	4	9	3.2	Yes

Legend

Full support
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.