Cascading Style Sheets/Color

Colors can be specified for various objects. These include text (" "), background (" "), and borders (" ").

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

Methods of specification of colors, an overview:
 * English name, such as
 * The CSS color name transparent creates a completely transparent color = rgba(0, 0, 0, 0)
 * Hexadecimal RGB value, such as
 * Soft colours in hexadecimal RGB value like
 * Decimal RGB value, such as
 * Decimal RGBA value, such as
 * HSL value, such as
 * HSLA value, such as

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

=    | currentcolor          | 

 =                |  |              | transparent

 =    |   |    |   |    |    |    |  |  | <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( [ | none ] [ | | none ] [ | | none ] [ / [ <alpha-value> | none ] ]? )

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

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

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

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

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

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

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

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

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

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

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

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

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

=   |

<alpha-value> = |

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

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

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

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

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

Examples:

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
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:  is equivalent to , e.g.   is equivalent to.

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.

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.

<div style="background-color: silver; background-image: 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 style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1); <div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2); <div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3); <div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4); <div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5); <div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6); <div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7); <div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8); <div style="background-color: rgba(255, 0, 0, 10); padding: .25em;">background-color: rgba(255, 0, 0, 0.9); <div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">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.

Here is the example again, with a silver background:

<div style="background-color: rgba(255, 0, 0, 0); padding: .25em;">background-color: rgba(255, 0, 0, 0); <div style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1); <div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2); <div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3); <div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4); <div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5); <div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6); <div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7); <div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8); <div style="background-color: rgba(255, 0, 0, 0.9); padding: .25em;">background-color: rgba(255, 0, 0, 0.9); <div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">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%);

Red: <div style="background-color: hsl(0, 100%, 50%); height: 1em; width: 18em;"> Green: <div style="background-color: hsl(120, 100%, 50%); height: 1em; width: 18em;"> Blue: <div style="background-color: hsl(240, 100%, 50%); height: 1em; width: 18em;">

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 style="background-color: silver; background-image: 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:rgba(255,255,255,0.9); <div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: rgba(1, 1, 1, 0.1); <div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2); <div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3); <div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4); <div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5); <div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6); <div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7); <div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8); <div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9); <div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">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.

Here is the example again, with a silver background:

<div style="background-color: hsla(0, 100%, 50%, 0); padding: .25em;">background-color: hsla(0, 100%, 50%, 0); <div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.1); <div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2); <div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3); <div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4); <div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5); <div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6); <div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7); <div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8); <div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9); <div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">background-color: hsla(0, 100%, 50%, 1);, which is the: hsl(0, 100%, 50%)

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