Color - Property CSS

color

Summary of characteristics of the color property

Quick description
Sets the foreground color and assigns a value to currentcolor.
Status
Standard
Usable for
HTML, SVG (1)
Predefined values
currentcolor | transparent
Percentages
Not applicable. But possible with certain functions.
Initial value
currentcolor
Inherited by default
Yes.
Animation type
Computed value: during an animation, the color property gradually changes from one value to another.
Canonical order
Single: single value (no order).
W3C Module
CSS Color Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: WD (Working Draft)
Document status: REC (Recommendation)
Document status: REC (Recommendation)
Document status: DEPR (Old specification, declared obsolete or superseded)

(1) In SVG, the color property defines the value of currentColor, but the color is applied by the properties or attributes stroke, fill, stroke-color, or fill-color.

Syntax diagram of color.

Color property - Syntax diagramSyntax diagram of the color CSS property. See stylescss.free.fr for details. currentcolor currentcolor transparent transparent #xxxxxx #xxxxxx name name color colorcolor:;color:;
Syntax diagram of the color property.
The links in the diagram provide more details about the values.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:/p>

Description of the color property.

color sets the color of the text and any decorations (underline, borders, etc.). It also defines the currentColor value, which can be used to initialize other properties. Note that decorations may have been given a different color through their respective property.

The colors defined by the color property are opaque by default, but it is entirely possible to specify a level of transparency using an 8-digit hexadecimal code or one of the rgba() , hsla() , etc., functions.

By default, CSS uses the sRGB color space, which is limited but has the advantage of being recognized by all devices (screens, printers, etc.). However, it is possible to work in a different color space using the color() directive.

Values for color.

  • color: currentcolor;

    currentcolor is the initial value, the one that, unless otherwise specified, is used to display text, borders, etc. Using this value with color is only useful for undoing a previous color change.

    CurrentColor
  • color: #807418;

    The hash character (#) is used to specify a color by its hexadecimal code. This code can be 3 or 6 digits, or even 8 if it is necessary to indicate an opacity different from 1.

    3-digit codes are rarely used: #42E is equivalent to #4422EE. It is therefore a subset of the full color set since only certain colors can be represented.

    color:#ff0000;
    (red)
    color:#00ff00;
    (green)
    color:#0000ff;
    (blue)
  • color: lavender;

    Many colors have been given a standardized name. It should be written without quotation marks or apostrophes.
    To see the list of color names, check Color chart on this site.

    color:cyan;
    color:Gray;
    color:gold;
  • color: hsl(223deg 52% 30%);

    The color can also be specified with one of the many functions recognized by CSS: rgb() or rgba(), hsl() or hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

    color:hsl(45deg 50% 30%);
    color:lab(67% -8.6912 -41.601);
  • color: color(profile 0.3104 0.7421 0.2814);

    This notation, using the function color(), allows specifying a color in a color space other than the default, which is sRGB.

    The profile, here called profile, can be a predefined color profile or a custom profile, defined with the directive @color-profile.

    More information and examples on the color() function and on the @color-profile directive.

    color:color(srgb 0.2 0.5 0.3);
    color:color(a98-rgb 0.2 0.5 0.3);
  • color: initial; (currentcolor) color: inherit; color: revert; color: revertLayer; color: unset;

    These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Examples with the color property.

Here are several syntaxes all defining the text color as blue. In the last two examples, a semi-transparency is specified.

color:blue;
The color is designated by its name. Nearly 150 colors have been given a standardized name. These names are now recognized by all browsers.
color:#0000ff.
The color is indicated here by its 6-digit hexadecimal code (2 for red, 2 for green, and 2 for blue). This notation provides access to the 16 million available colors.
color:rgb(0,0,255);
For those who hate hexadecimal, the rgb() function specifies a color using 3 decimal values (from 0 to 255).
color:#0000ff80;
An 8-digit hexadecimal code allows for the introduction of the concept of partial color transparency. The last two digits indicate this transparency:
00 for a fully transparent color (the other digits are therefore irrelevant); FF for a fully opaque color.
Any value between these two extremes indicates a partially transparent color.
color:rgba(0 0 255 / 0.5);
The transparency of the color can be specified with the rgba() function, the last parameter (introduced by the / character) being a number between 0 (fully transparent) and 1 (fully opaque).

Animation of the color property.

Since each color is associated with a numerical code, color animation is possible. When a color is defined by its name, the animation is done according to the corresponding numerical code.

Animating from one named color to another.

Animation on color brightness.

Hue animation of the color.

 

There is a small subtlety in the third example. We want the animation to go through all the colors from 0deg to 360deg (HSL notation), that is, for the entire color wheel to be traversed clockwise. However, if we only specify the starting and ending values, the system will take the shortest path, going counterclockwise.
The solution is to break down the animation into steps to force the browser to follow the desired path.
But this problem now seems resolved.

Hue animation
What we want to do
Hue animation
What the browser is likely to do
Hue animation
What needs to be done

Manipulating the color property programmatically.

Change the color with Javascript.

Here’s how to change the value of color with JavaScript for an element identified by its id.
Two syntaxes are possible.

Javascript
let el = document.getElementById('id'); el.style['color'] = '#ff485080'; // or let el = document.getElementById('id'); el.style.color = '#ff485080';

Read the color with JavaScript.

For this code to work, the property must be applied directly to the element itself and not to a class. The color is returned by its name if it is a named color, or in the form rgb(r,g,b) or rgba(r,g,b,a) if it was defined in a way other than by its name (hex code, HSL notation, etc.).

Javascript
let el = document.getElementById('id'); let value = el.style['color']; // or let el = document.getElementById('id'); let value = el.style.color;

Read the computed value of color.

Here’s how to read the calculated value of color with JavaScript. Whatever syntax is used to define it, the color is returned in the form rgb(r,g,b), or rgba(r,g,b,a) if the opacity is not full. The exception is for the functions lab(), lch() and color(), which are preserved.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('color');

Using JQuery to interact with the color property.

Here are the jQuery codes to modify the value of the property color or to read the calculated value of this property. The color is mostly returned, as in JavaScript, in the form rgb(r,g,b) or rgba(r,g,b,a), but it can also display the functions lab(), lch(), or color().

JQuery

$('#id').css('color', '#ff485080');
JQuery
let value = $('#id').css('color');

Try it yourself.

The buttons below apply the color you entered and reload the resulting calculated value.

Simulator.

color :
Result

Browsers compatibility with color.

The property color poses no compatibility issues with current browsers.

Column 1
Support for the color property to set the foreground color. Not all notations for specifying the color may be recognized.
1
color
property
Estimated overall support.
98%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the color property.

  • Cascading Style Sheets specification - Version 1

    Initial definition of the color property, accepting rgb() notation, hexadecimal codes and 16 named colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
    WD
    November 17, 1995
    Working Draft.
    PR
    November 12, 1996
    Proposed for recommendation.
    REC
    December 17, 1996
    Recommendation .
    DEPR
    September 13, 2018
    Old specification, declared obsolete.

  • Cascading Style Sheets Level 2 - Revision 1 Specification

    Adding the named color orange.
    The color property accepts the inherit value.
    WD
    November 04, 1997
    Working Draft.
    PR
    March 24, 1998
    Proposed for recommendation.
    REC
    May 11, 1998
    Recommendation .

  • CSS Color Module Level 3

    Adding transparent and currentcolor colors.
    Support of the HSL notation.
    Adding new named colors.
    WD
    June 23, 1999
    Working Draft.
    CR
    May 14, 2003
    Candidate Recommendation.
    PR
    October 28, 2010
    Proposed for recommendation.
    REC
    June 07, 2011
    Recommendation .

  • CSS Color Module Level 4

    Adding new notations for specifying a color: hwb(), hwba(), lab(), lch(), oklab(), oklch(), color().
    WD
    July 05, 2016
    Working Draft.
    CR
    July 05, 2022
    Candidate Recommendation.
    PR
    REC

  • CSS Color Module Level 5

    No modifications directly concerning the color property, but modifications concerning color management: color spaces in particular.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, regarding colors.

Color management is a branch of CSS that is becoming increasingly rich. The CSS Color Module module brings together all the definitions related to colors.

Properties:

opacity
Sets the opacity (inverse of transparency) of an element and its descendants.

Functions:

color()
Defines a color in any color space (sRGB, sRGB-linear, profoto, etc).
color-mix()
Langue française
Mix two colors in a given color space.
⚠
contrast-color()
Determine a foreground color based on the background color to maximize contrast.
⚠
device-cmyk()
Langue française
Define a color based on a device, specifying cyan, magenta, yellow, and black values.
hsl()
Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.
hsla()
Langue française
Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.
hwb()
Langue française
Defines a color based on its hue and a dose of black and white.
lab()
Defines a color in the L*a*b* system.
lch()
Defines a color in the L*C*H* system.
oklab()
Defines a color in the L*a*b* system with a perceptual correction.
oklch()
Defines a color in the L*C*H* system with a perceptual correction
rgb()
Determines a color from the values ​​of Red, Green and Blue.
rgba()
Langue française
Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile
Langue française
Specifies a color profile that can then be used by the color() function.

Descriptors :

⚠
components
Langue française
Descriptor usable with the @color-profile at-rule.
⚠
rendering-intent
Langue française
Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.