Colors in CSS

General.

CSS colors are the same as those of HTML but the syntax for designating a color is more diverse: CSS recognizes hexadecimal codes, the RGB decomposition, the HSL decomposition and especially the named colors.

Color space.

By default, CSS uses the sRGB space, which is the easiest to render, even on older hardware. However, it is possible to choose another space for colors with the @color-profile directive.
Refer to the following pages to learn more about color spaces:

Color coding.

Hexadecimal notation.

In the RGB system, colors are defined by three parameters, which are the amount of red, green, and blue. A fourth parameter can be added if you want to specify a partial opacity of the color. Each of these values can be translated into a hexadecimal number between 00 and ff, or between 0 and 255 in classical decimal.

  • #rrggbb

    The hexadecimal code of the color is written here on 6 digits, preceded by a sharp ( # ). The first two digits (rr) represent the value of red, the next two represent green (gg) and the last two represent blue (bb).
    These three values can change from 00 to ff. This hexadecimal notation is perfectly recognized by all browsers. Unfortunately, the codes are not very easy to read. To make things easier, you can refer to the color chart below, or our color synthesizer tool.

  • #rgb

    The hexadecimal code of the color can be written on 3 digits only, always preceded by a sharp ( # ). This notation is a simplified version of the previous one, but it offers fewer color shades since each color is assigned a single digit.
    #f00 is equivalent to #ff0000.
    #0a0 is equivalent to #00aa00.

  • #rrggbbαα

    The hexadecimal code of the color is written on 8 digits. The last two digits (αα) reflect the opacity of the color, 00 corresponding to a totally transparent (therefore invisible) color and ff to a totally opaque color.
    #ff0000ff is totally opaque (non-transparent) red.
    #0000ff80 is semi-transparent blue.

  • #rgbα

    A variant of the previous notation but assigning only one digit to each of the components.
    0f0f is a totally opaque green.
    00F8 is a semi-transparent blue.

Named Colors.

Many colors (about 140) have been given a name, which is now recognized by all browsers. Using these names improves the readability of the codes. Indeed, lavender is more telling than #e6e6fa.

  • currentcolor

    currentcolor refers to the common color, text color, and decorative accessories such as borders, underscores, etc.
    This value can be useful for setting the color of something other than text (e.g. a border) when the border has been changed beforehand and that we want to return to the same color as the text.

  • transparent

    The colour is totally transparent, therefore invisible. transparent is equivalent to #0000, in other words black that is completely transparent.

  • lightblue

    The name of a color. There are 132 W3C standardized color names (see color chart below). The name must not be in quotation marks, nor in apostrophes; It is not case sensitive. These names are now recognized by all browsers.

Color Functions.

CSS recognizes a large number of functions for specifying a color in a given color system.

  • rgb(r g b) rgba(r g b / α) hsl(h s l) hsla(h s l / α) hwb(h w b) hwba(h w b / α) lab(l a b / α) lch(l c h / α) oklab(l a b / α) oklch(l c h / α) color() ⚠

    All these functions define a color from 3 components, and possibly, from a fourth which is opacity, but each in a different frame of reference. Feel free to click on the links for more details on the syntax of these functions.

    • rgb() and rgba() use the well-known reference system in computer science: red, green, blue. The three parameters correspond to the dosages of the base colors red, green and blue.
    • hsl() and hsla() allow you to specify a color in the HSL system: Hue, Brightness, Saturation.
    • hwb() and hwba() build a color from a hue, and by adding a dose of white (W) and black (b).
    • lab(), lch(), oklab() and oklch() work in the L*a*b* and L*C*H* systems.
    • color() Allows you to set a color in a color space other than sRGB. For more details, refer to the tutorial on color spaces.
  • ...from... ⚠

    Most of the functions mentioned above accept to calculate a color in relation to a reference color. At least, this possibility is provided for in the specification, this is not always the case on current browsers.

    For example, the syntax below requires a color that is the same as mediumBlue but with 10% more saturation.

    hsl(from mediumBlue h calc(s * 1.1) l)

Color chart: all named colors.

Sort Colors by:

 

Remarks and anecdotes.

  • The color rebeccaPurple was named in honor of Eric Meyer's daughter, who died at the age of 6 from a brain tumor. Eric Meyer, little known to the general public, is an American consultant who has done a lot for the implementation of standards on the Internet, and particularly for CSS.

  • Note: several names sometimes exist for the same color:

    Fuchsia
     
    Magenta
     
    Gray
    And all derivatives
    Grey
    And all derivatives
    Aqua
     
    Cyan
     
  • The transparent color name corresponds to the hexadecimal code 00000000, in other words it is a transparent black. Why black? This is of little importance because, in the case of a completely transparent color, the first 6 digits of the code have no effect.

Outdated or poorly recognized names. ✗

#D19275
Feldspar
#8470FF
LightSlateBlue

System Colors. ✗

These color names were initially available to make it easier to integrate a page into the operating system charter. This feature is now deprecated: avoid using it.

ActiveBorder
ActiveCaption
AppWorkspace
Background
ButtonFace
ButtonHighlight
ButtonShadow
ButtonText
CaptionText
GrayText
Highlight
HighlightText
InactiveBorder
InactiveCaption
InactiveCaptionText
InfoBackground
InfoText
Menu
MenuText
Scrollbar
ThreeDDarkShadow
ThreeDFace
ThreeDHighlight
ThreeDLightShadow
ThreedShadow
Window
WindowFrame
WindowText

Browser support (compatibility).

Column 1
Support for rgb() and rgba() functions to set a color in the RGB color space.
Column 2
Support for the hsl() function allowing you to define a color with its three parameters: hue, brightness and saturation.
Column 3
Support for the hwb() function allowing you to define a color from its Hue and a dose of White and Black.
Column 4
Support for lab() and lch() functions defining a color in the CIE color space, closer to human perception.
Column 5
Support for oklab() and oklch() functions.
Column 6
Support for relative colors to define one color in relation to another (from clause).

Notes:

(1) Does not recognize the word currentColor after the word from.

1
RGB
colors
2
HSL
colors
3
HWB
colors
4
Lab or Lch
colors
5
OkLab
OkLch
6
Relative
colors
Estimated overall support.
97%
97%
95%
93%
93%
82%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

1

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

1

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse
Caniuse
Caniuse
Caniuse

History of color management in CSS.

  • Cascading Style Sheets specification - Version 1

    In this first version of the CSS language, colors can be defined:
    - By the rgb() function: values of red, green and blue,
    - By a hexadecimal code (example: #804575),
    - Or by their name for the 16 named colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and 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

    The color named orange is added, bringing the number of named colors to 17.
    The transparent keyword is also introduced.
    System colors are added (example: ActiveBorder).
    WD
    November 04, 1997
    Working Draft.
    PR
    March 24, 1998
    Proposed for recommendation.
    REC
    May 11, 1998
    Recommendation .

  • CSS Color Module Level 3

    Ability to add transparency to colors, definition of the rgba() function.
    Support for HSL notation, definition of hsl() and hsla() functions.
    Definition of the keyword currentcolor.
    System colors are discontinued.
    But introduction of named colors of the X11 nomenclature.
    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

    Ability to choose a color space other than sRGB and definition of the color() function.
    Support for HWB notation (Hue, White, Black), and definition of hwb() and hwba() functions.
    Support for LCIE colors and definition of lab(), lch(), oklab() and oklch() functions.
    WD
    July 05, 2016
    Working Draft.
    CR
    July 05, 2022
    Candidate Recommendation.
    PR
    REC

  • CSS Color Module Level 5

    Possibility of defining one color relative to another.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, about color management.

The CSS specifications published by the W3C are organized into modules. Everything about colors is described in the module. This includes the following definitions: