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:

• A tutorial on color spaces.
• The at-rule @color-profile .
• The function color() .

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: Color names Standard Luminance Perceived Luminance

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.

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.

Browser support (compatibility).

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

1

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.
  

  November 17, 1995

  Working Draft.

  

  November 12, 1996

  Proposed for recommendation.

  

  December 17, 1996

  Recommendation .

  

  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).
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  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.
  

  June 23, 1999

  Working Draft.

  

  May 14, 2003

  Candidate Recommendation.

  

  October 28, 2010

  Proposed for recommendation.

  

  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.
  

  July 05, 2016

  Working Draft.

  

  July 05, 2022

  Candidate Recommendation.

  

  

• CSS Color Module Level 5

  Possibility of defining one color relative to another.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, about color management.

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

Properties:

color

Defines the color of the foreground (mainly text).

opacity

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

Functions:

color()

Defines a color in a color space other than sRGB.

color-mix()

Mix two colors in a given color space.

⚠

device-cmyk()

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()

Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.

hwb()

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()

Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile

Specifies a color profile that can then be used by the color() function.

Descriptors :

⚠

components

Descriptor usable with the @color-profile at-rule.

⚠

rendering-intent

Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.