Cascading Style Sheets/Color

Colors can be specified for various objects. These include text ("color: white"), background ("background-color: white"), and borders ("border-color: gray").

An example CSS rule that sets all h1 elements to have white text on a red background:

h1 { color: white; background-color: red; }

Methods of specification of colors, an overview:

English name, such as color: white
The CSS color name transparent creates a completely transparent color = rgba(0, 0, 0, 0)
Hexadecimal RGB value, such as color: #ff0000
Soft colours in hexadecimal RGB value like color: #f00
Decimal RGB value, such as color: rgb(255, 0, 0)
Decimal RGBA value, such as color: rgba(255, 0, 0, 0.2)
HSL value, such as color: hsl(120, 100%, 50%)
HSLA value, such as color: hsla(0, 100%, 50%, 0.5)

Specification of colors is detailed in the following sections.

If you set any colors in your web page, you should set both the background and text color for the body element of the page. Imagine if you set the text color to black and did not set the background color. A user has their preferred colors set to yellow text on a black background, a fairly common combination for users with low vision. The page is rendered with your black text on their black background and is unusable.

color values syntax

Formal syntax

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         

<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent                

<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>  

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Examples:

/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

Using English names

The following 16 values are defined:

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

yellow

white

CSS does not define the exact shade that should be used for the named colours. Use RGB-values if the exact shade is important.

Hexadecimal RGB value

Hex	Bin	Dec
0	0000	0
1	0001	1
2	0010	2
3	0011	3
4	0100	4
5	0101	5
6	0110	6
7	0111	7
8	1000	8
9	1001	9
A	1010	10
B	1011	11
C	1100	12
D	1101	13
E	1110	14
F	1111	15

The mixture ratio of a color to be displayed is specified in hexadecimal notation. That is, they are written in base-16 as opposed to the more familiar base 10. A reference table is included, courtesy Wikipedia.

The two first hexadecimal digits specify the amount of red in the color^[1], the third and fourth specify the amount of green and the last two figures specify the amount of blue.

h1 { color: #ff0000; } /* All h1 headings are printed in bright red. */

A short-hand notation is permitted: #rgb is equivalent to #rrggbb, e.g. #3cf is equivalent to #33ccff.

Note that the range of values possible is hexadecimal 00 (= decimal 0) to hexadecimal ff (= decimal 255). This is the same range that is available using the rgb notation from the next section.

RGB value

RGB is a abbreviation for red, green and blue – the three colors that are mixed to create all the other colors on a computer screen.

The basic syntax is rgb(red-value, green-value, blue-value).

The different values can be set using two different approaches.

A number from 0 to 255

h1 { color: rgb(255, 0, 0); } /* All h1 headings are printed in bright red. */

A decimal figure from 0% to 100%

h1 { color: rgb(100%, 0, 0); } /* All h1 headings are printed in bright red. */

Modern (css-color-4) rgb and rgba syntax

rgb() = [ <legacy-rgb-syntax> | <modern-rgb-syntax> ] 
rgba() = [ <legacy-rgba-syntax> | <modern-rgba-syntax> ] 
<legacy-rgb-syntax> =   rgb( <percentage>#{3} , <alpha-value>? ) |
                  rgb( <number>#{3} , <alpha-value>? )
<legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) |
                  rgba( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> = rgb( 
  [ <number> | <percentage> | none]{3} 
  [ / [<alpha-value> | none] ]?  )
<modern-rgba-syntax> = rgba( 
  [ <number> | <percentage> | none]{3} 
  [ / [<alpha-value> | none] ]?  )

Percentages Allowed for r, g and b Percent reference range: For r, g and b: 0% = 0.0, 100% = 255.0 For alpha: 0% = 0.0, 100% = 1.0

RGBA value

RGBA is RGB with an added alpha channel as its 4th argument. The alpha channel is a value between 0 (fully transparent) and 1 (opaque). RGBA is part of CSS3.

div { background-color: rgba(255, 0, 0, 0.5); } /* All divs are in bright red with 50% opacity. */

background-color: rgba(255, 0, 0, 0);

background-color: rgba(255, 0, 0, 0.1);

background-color: rgba(255, 0, 0, 0.2);

background-color: rgba(255, 0, 0, 0.3);

background-color: rgba(255, 0, 0, 0.4);

background-color: rgba(255, 0, 0, 0.5);

background-color: rgba(255, 0, 0, 0.6);

background-color: rgba(255, 0, 0, 0.7);

background-color: rgba(255, 0, 0, 0.8);

background-color: rgba(255, 0, 0, 0.9);

background-color: rgba(255, 0, 0, 1);

Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below to a file or your snippet editor to see the full effect.

<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
	<div style="background-color: rgba(255, 0, 0, 0); padding: .25em;">background-color: rgba(255, 0, 0, 0);</div>
	<div style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1);</div>
	<div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2);</div>
	<div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3);</div>
	<div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4);</div>
	<div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5);</div>
	<div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6);</div>
	<div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7);</div>
	<div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8);</div>
	<div style="background-color: rgba(255, 0, 0, 0.9); padding: .25em;">background-color: rgba(255, 0, 0, 0.9);</div>
	<div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">background-color: rgba(255, 0, 0, 1);</div>
</div>

Here is the example again, with a silver background:

background-color: rgba(255, 0, 0, 0);

background-color: rgba(255, 0, 0, 0.1);

background-color: rgba(255, 0, 0, 0.2);

background-color: rgba(255, 0, 0, 0.3);

background-color: rgba(255, 0, 0, 0.4);

background-color: rgba(255, 0, 0, 0.5);

background-color: rgba(255, 0, 0, 0.6);

background-color: rgba(255, 0, 0, 0.7);

background-color: rgba(255, 0, 0, 0.8);

background-color: rgba(255, 0, 0, 0.9);

background-color: rgba(255, 0, 0, 1);, which is the: rgb(255, 0, 0)

HSL value

HSL stands for hue, saturation and lightness. It is the color value system used by many cathode-ray tube devices. HSL is part of CSS3.

hsl(color-angle, saturation%, lightness%);

div.red   { background-color: hsl(0, 100%, 50%); } /* red in HSL */
div.green  { background-color: hsl(120, 100%, 50%); } /* green in HSL */
div.blue { background-color: hsl(240, 100%, 50%); } /* blue in HSL */

Red:

Green:

Blue:

Hue

Range: 0-360 degrees. Measured in degrees.

0 degrees = red
60 degrees = yellow
120 degrees = green
180 degrees = cyan
240 degrees = blue
300 degrees = magenta

Hue comparison at 100% saturation and 50% lightness
Hue	Hue	Hue
0	120	240
10	130	250
20	140	260
30	150	270
40	160	280
50	170	290
60	180	300
70	190	310
80	200	320
90	210	330
100	220	340
110	230	350

Saturation

Measured as percentage in a range of 0%-100%. The higher, the more saturated. 0% is pure monochrome gray.

Lightness

Measured as percentage in a range of 0%-100%. The higher, the lighter. 0% is black, and 100% is white.

Saturation (left to right) vs lightness (top to bottom) at 330 degrees hue
%	0	10	20	30	40	50	60	70	80	90	100
0
10
20
30
40
50
60
70
80
90
100

HSLA value

HSLA is the HSL color with an alpha channel. Like RGBA, the 4th argument is a value between 0 and 1. HSLA is part of CSS3.

div.red { background-color: hsla(0, 100%, 50%, 0.5); } /* red in HSL with 50% opacity*/

div { background-color: hsla(0, 100%, 50%, 0.5); } /* All divs are in bright red with 50% opacity. */

background:rgba(255,255,255,0.9);

background-color: rgba(1, 1, 1, 0.1);

background-color: hsla(0, 100%, 50%, 0.2);

background-color: hsla(0, 100%, 50%, 0.3);

background-color: hsla(0, 100%, 50%, 0.4);

background-color: hsla(0, 100%, 50%, 0.5);

background-color: hsla(0, 100%, 50%, 0.6);

background-color: hsla(0, 100%, 50%, 0.7);

background-color: hsla(0, 100%, 50%, 0.8);

background-color: hsla(0, 100%, 50%, 0.9);

background-color: hsla(0, 100%, 50%, 1);

Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below a file or your snippet editor to see the full effect.

<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
	<div style="background-color: hsla(0, 100%, 50%, 0); padding: .25em;">background-color: hsla(0, 100%, 50%, 0);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.1);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9);</div>
	<div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">background-color: hsla(0, 100%, 50%, 1);</div>
</div>

Here is the example again, with a silver background:

background-color: hsla(0, 100%, 50%, 0);

background-color: hsla(0, 100%, 50%, 0.1);

background-color: hsla(0, 100%, 50%, 0.2);

background-color: hsla(0, 100%, 50%, 0.3);

background-color: hsla(0, 100%, 50%, 0.4);

background-color: hsla(0, 100%, 50%, 0.5);

background-color: hsla(0, 100%, 50%, 0.6);

background-color: hsla(0, 100%, 50%, 0.7);

background-color: hsla(0, 100%, 50%, 0.8);

background-color: hsla(0, 100%, 50%, 0.9);

background-color: hsla(0, 100%, 50%, 1);, which is the: hsl(0, 100%, 50%)

HWB value

This section applies to version 101 and newer of Chrome.

This section applies to version 96 and newer of Firefox.

This section applies to version 101 and newer of Edge.

This section applies to version 15 and newer of Safari.

This section applies to version 87 and newer of Opera.

HWB is a fairly new color standard, introduced in browsers in 2022 (Chrome and Edge versions 101, Firefox 96, Opera 87 and Safari 15).

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Hue

Range: 0-360 degrees. Measured in degrees.

0 degrees = red
60 degrees = yellow
120 degrees = green
180 degrees = cyan
240 degrees = blue
300 degrees = magenta

Hue comparison at 0% whiteness and 0% blackness
Hue	Hue	Hue
0	120	240
10	130	250
20	140	260
30	150	270
40	160	280
50	170	290
60	180	300
70	190	310
80	200	320
90	210	330
100	220	340
110	230	350

Whiteness

Measured in percentage from 0% to 100%. 100% means pure white.

Blackness

Measured in percentage from 0% to 100%. 100% means pure black.

Combining whiteness and blackness

If the whiteness and blackness are below 100% combined, the colors are desaturated.

If both values are over 100% combined, they are automatically converted to 100% combined values. For example, if HWB value is hwb(45, 90%, 60%), which both values total 150%, they are converted to 100% (hwb(45, 60%, 40%)).

Whiteness (left to right) vs blackness (top to bottom) at 330 degrees hue
%	0	10	20	30	40	50	60	70	80	90	100
0
10
20
30
40
50
60
70
80
90
100

New color functions

LAB value

This section applies to version 111 and newer of Chrome.

This section applies to version 113 and newer of Firefox.

This section applies to version 111 and newer of Edge.

This section applies to version 15 and newer of Safari.

This section applies to version 97 and newer of Opera.

Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LAB values represent the range of colors that human sees.

Syntax: lab(l a b)

Luminosity - brightness of color - 0% to 100%. Higher is lighter.
A-axis - any value. Higher is more pink, lower is more green.
B-axis - any value. Higher is more yellow, lower is more blue.

A and B can be any value, but in practice it cannot exceed ±150.

Comparison of A-axis (top to bottom) and B-axis (left to right) at 60% luminosity
	-120	-100	-80	-60	-40	-20	0	20	40	60	80	100	120
120
100
80
60
40
20
0
-20
-40
-60
-80
-100
-120

LCH value

This section applies to version 111 and newer of Chrome.

This section applies to version 113 and newer of Firefox.

This section applies to version 111 and newer of Edge.

This section applies to version 15 and newer of Safari.

This section applies to version 97 and newer of Opera.

Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LCH values represent the range of colors that human sees.

Syntax: lch(l c h)

Luminosity - brightness of color - 0% to 100%. Higher is lighter.
Chroma - any positive value. This indicates the saturation of colors. Higher is more saturated.
Hue - hue of color - values from 0 to 360.

Chroma can be any value, but in practice it cannot exceed 200.

Luminosity (left to right) vs chroma (top to bottom) at 160 degrees hue
%	0	10	20	30	40	50	60	70	80	90	100
0
10
20
30
40
50
60
70
80
90
100

Luminosity (left to right) vs chroma (left to right) vs hue (top to bottom)
L (%)	10	20		30		40			50			60				70				80			90
C	20	20	40	20	40	20	40	60	20	40	60	20	40	60	80	20	40	60	80	20	40	60	20	40
0
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
160
170
180
190
200
210
220
230
240
250
260
270
280
290
300
310
320
330
340
350

HSL vs LCH

HSL values were available for browsers in the late 2000s and early 2010s.

However, there are a couple of problems with HSL values. hsl(60, 100%, 50%) appears much lighter than hsl(240, 100%, 50%), despite having the same lightness.

Effect on perceived lightness on colors at 100% saturation and 50% lightness
Hue	Color	Perceived lightness
0		Second darkest
60		Lightest of all six
120		Lightest of primary colors; third lightest
180		Second lightest
240		Darkest of all six
300		Third darkest, darkest of two primary colors combined

This is text with HSL hue of 60 degrees and 50% lightness. It is unreadable, but is readable in dark mode.
This is text with HSL hue of 240 degrees and the same lightness as yellow. It is readable, but is unreadable in dark mode.

Another problem in HSL involves sometimes when we increase hue by 10 the difference is substantial, other times it isn't.

Effect on perceived color at different hues
From hue		To hue		Perceived difference
50		60		Very noticeable
240		250		Not very noticeable

Another problem is with saturation. If you increase saturation on lighter hues (eg. yellow or blue), the color turns lighter.

LCH is designed to fix the problems caused by HSL.

This is text with LCH hue of 90 degrees and 50% luminosity. It is readable.
This is text with LCH hue of 290 degrees and 50% luminosity. It is also readable.

Inherent problems with LAB/LCH

Consider the following colors of LCH at 290 degrees hue and 40% luminosity:

Chroma	LCH	HSL equ
0
10
20
30
40
50
60
70
80
90
100

As you can see, at lower chroma values, the hue is more of a purple color, but as you increase, this turns blue.

HSL doesn't have this problem.

OKLAB value

This section applies to version 111 and newer of Chrome.

This section applies to version 113 and newer of Firefox.

This section applies to version 111 and newer of Edge.

This section applies to version 15 and newer of Safari.

This section applies to version 97 and newer of Opera.

Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), OKLAB values represent the range of colors that human sees. It fixes the inherent problems caused by normal LAB.

Syntax: oklab(l a b)

Luminosity - brightness of color - 0% to 100%. Higher is lighter.
A-axis - any value. Higher is more pink, lower is more green.
B-axis - any value. Higher is more yellow, lower is more blue.

A and B can be any value, but in practice it cannot exceed ±0.6.

Comparison of A-axis (top to bottom) and B-axis (left to right) at 60% luminosity
	-0.5	-0.4	-0.3	-0.2	-0.1	0	0.1	0.2	0.3	0.4	0.5
0.5
0.4
0.3
0.2
0.1
0
-0.1
-0.2
-0.3
-0.4
-0.5

OKLCH value

This section applies to version 111 and newer of Chrome.

This section applies to version 113 and newer of Firefox.

This section applies to version 111 and newer of Edge.

This section applies to version 15 and newer of Safari.

This section applies to version 97 and newer of Opera.

Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LCH values represent the range of colors that human sees. It fixes the inherent problems caused by normal LCH.

Syntax: oklch(l c h)

Luminosity - brightness of color - 0% to 100%. Higher is lighter.
Chroma - any positive value. This indicates the saturation of colors. Higher is more saturated.
Hue - hue of color - values from 0 to 360.

Chroma can be any value, but in practice it cannot exceed 0.7.

Luminosity (left to right) vs chroma (top to bottom) at 160 degrees hue
%	0	10	20	30	40	50	60	70	80	90	100
0
0.05
0.1
0.15
0.2
0.25
0.3
0.35
0.4

Luminosity (left to right) vs chroma (left to right) vs hue (top to bottom)
L (%)	10	20		30		40			50			60				70				80			90
C	.1	.1	.2	.1	.2	.1	.2	.3	.1	.2	.3	.1	.2	.3	.4	.1	.2	.3	.4	.1	.2	.3	.1	.2
0
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
160
170
180
190
200
210
220
230
240
250
260
270
280
290
300
310
320
330
340
350

Relative colors

Another way to define colors is by using relative colors. It is a powerful tool to create palettes. It is introduced in Chrome/Edge 119, Safari 16.4, Firefox 128 and Opera 106.

gamut

css Color Display Quality: the color-gamut feature^[2]. Value: srgb | p3 | rec2020

Considerations

Not all colors are readable by everyone. This yellow text only has a contrast ratio of 1.07 to 1, which is practically hard to read as it doesn't meet WCAG AA standards, while this blue text has a contrast ratio of 8.59:1, which meets WCAG AAA standards. Also, some colors like red and green can look identical in some people with color blindness.

Contrast ratio

WCAG defines two standards:

AA: 3:1 for text 14pt+ bold or 18pt+ normal, 4.5:1 for others
AAA: 4.5:1 for text 14pt+ bold or 18pt+ normal, 7:1 for others

Table of minimum contrast ratio of colors

Hue		On/involving black background/text			On/involving white background/text
Hue		AA for larger text (3:1)	AAA for larger text; AA (4.5:1)	AAA for normal text (7:1)	AA for larger text (3:1)	AAA for larger text; AA (4.5:1)	AAA for normal text (7:1)
	0° (Red)	#b70000	#eb0000 #eb0000	#ff5e5e	#ff5d5d	#ee0000 #ee0000	#b60000
	0° (Red)	#b70000	#eb0000 #eb0000	#ff5e5e	#ff5d5d	#ee0000 #ee0000	#b60000
	60° (Yellow)	#5d5d00	#797900 #797900	#9b9b00	#9a9a00	#7a7a00 #7a7a00	#5c5c00
	60° (Yellow)	#5d5d00	#797900 #797900	#9b9b00	#9a9a00	#7a7a00 #7a7a00	#5c5c00
	120° (Green)	#006900	#008800 #008800	#00ae00	#00ad00	#008a00 #008a00	#006800
	120° (Green)	#006900	#008800 #008800	#00ae00	#00ad00	#008a00 #008a00	#006800
	180° (Cyan)	#006464	#008282 #008282	#00a6a6	#00a5a5	#008484 #008484	#006363
	180° (Cyan)	#006464	#008282 #008282	#00a6a6	#00a5a5	#008484 #008484	#006363
	240° (Blue)	#3131ff	#5e5eff #5e5eff	#8888ff	#8787ff	#6161ff #6161ff	#3030ff
	240° (Blue)	#3131ff	#5e5eff #5e5eff	#8888ff	#8787ff	#6161ff #6161ff	#3030ff
	300° (Magenta)	#a000a0	#ce00ce #ce00ce	#ff29ff	#ff28ff	#d100d1 #d100d1	#9f009f
	300° (Magenta)	#a000a0	#ce00ce #ce00ce	#ff29ff	#ff28ff	#d100d1 #d100d1	#9f009f
	— (Gray)	#5a5a5a	#757575 #757575	#959595	#949494	#767676 #767676	#595959
	— (Gray)	#5a5a5a	#757575 #757575	#959595	#949494	#767676 #767676	#595959

References

[1] "CSS colors".

[2] W3C: Media Queries Level 4

[1]

[2]