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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
| 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[edit | edit source]
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[edit | edit source]
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. */
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:
HSL value[edit | edit source]
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:
HSLA value[edit | edit source]
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. */
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:
hwb[edit | edit source]
/* 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%)
gamut[edit | edit source]
css Color Display Quality: the color-gamut feature[2]. Value: srgb | p3 | rec2020