# 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:
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
Examples:

## Using English names

The following 16 values are defined:
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, the third and fourth specify the amount of green and the last two figures specify the amount of blue.
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
A decimal figure from 0% to 100%
Modern (css-color-4) rgb and rgba syntax
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.
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.
Here is the example again, with a silver background:

## 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%);
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

## 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.
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.
Here is the example again, with a silver background:

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

### 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

## 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

### 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
Luminosity (left to right) vs chroma (left to right) vs hue (top to bottom) :
| L (%) | 10 | 20 | 20 | 30 | 30 | 40 | 40 | 40 | 50 | 50 | 50 | 60 | 60 | 60 | 60 | 70 | 70 | 70 | 70 | 80 | 80 | 80 | 90 | 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 | 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 | From hue | To 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
* 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

### 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
* 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 | 20 | 30 | 30 | 40 | 40 | 40 | 50 | 50 | 50 | 60 | 60 | 60 | 60 | 70 | 70 | 70 | 70 | 80 | 80 | 80 | 90 | 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. 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 | Hue | On/involving black background/text | On/involving black background/text | On/involving black background/text | On/involving white background/text | On/involving white background/text | On/involving white background/text |
| Hue | 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

* ↑ "CSS colors".
* ↑ W3C: Media Queries Level 4