Css - (Colors|Colours)


Color in css.

A valid colour is either :

Value Type


The list of colour is:

Color Name numerical RGB
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
maroon #800000
navy #000080
olive #808000
orange #ffA500
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
white (white ;-)) #ffffff
yellow #ffff00


body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

RGB color

The RGB color model is used in numerical color specifications. These examples all specify the same color:


em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) } 

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters.

Rgb hexadecimal String

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'.

A numerical RGB is a valid color if:

  • it is exactly seven characters long,
  • the first character is a # (U+0023) character,
  • the remaining six characters are all ASCII hex digits,
  • with a RGB coordinates where:
    • the first two digits represents the red component,
    • the middle two digits represents the green component,
    • and the last two digits represents the blue component, in hexadecimal.

Short notation with three digit:

  • #rgb expands to #rrggbb For example, #fb0 expands to #ffbb00.
  • white #ffffff can be specified #fff

Rgb function

The integer value 255 corresponds to :

  • 100%,
  • F or FF in the hexadecimal notation

Ie white can be specified so:

rgb(255,255,255) = rgb(100%,100%,100%) = #FFF

Whitespace characters are allowed around the numerical values.

Values outside

Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device.

For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:

em { color: rgb(255,0,0) }       /* integer range 0 - 255 */
em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

Other devices, such as printers, have different gamuts than sRGB; some colors outside the 0..255 sRGB range will be representable (inside the device gamut), while other colors inside the 0..255 sRGB range will be outside the device gamut and will thus be mapped.

Transparent black

The term “transparent black” refers to the color with red, green, blue, and alpha channels all set to zero.

Dynamic Colorization

With Custom Value

  • Set custom properties on the root (Ref)
:root {
  --blue: #075ebb;
  --info: #17a2b8;

#box {
   margin: 0 auto;
   text-align: center;
   padding: 2rem
  • Use them with the var function.
<div id="box" style="background-color:var(--info)">
A box with the info color variable

Transparency / Opacity

Documentation / Specification

Powered by ComboStrap