Web/CSS/CSS Color

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

• color
• color-adjust
• opacity

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 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
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
color-adjust	Chrome Full support 49 Alternate Name' Full support 49 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Edge Full support 79 Alternate Name' Full support 79 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Firefox Full support 48	IE No support No	Opera Full support 15 Alternate Name' Full support 15 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Safari Full support 6 Alternate Name' Full support 6 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	WebView Android Full support 49 Alternate Name' Full support 49 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Chrome Android Full support 49 Alternate Name' Full support 49 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Firefox Android Full support 48	Opera Android Full support 36 Alternate Name' Full support 36 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Safari iOS Full support 6 Alternate Name' Full support 6 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust	Samsung Internet Android Full support 5.0 Alternate Name' Full support 5.0 Alternate Name' Alternate Name' Uses the non-standard name: -webkit-print-color-adjust

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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
opacity	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Full support 1 No support 1 — 3.5 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE Full support 9	Opera Full support 9	Safari Full support 2 Full support 2 No support 1.1 — 2 Prefixed' Prefixed' Implemented with the vendor prefix: -khtml-	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 Full support 12.0

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, and column-rule-color
• In CSS, gradients aren't colors but images.

CSS Color by Mozilla Contributors is licensed under CC-BY-SA 2.5.