Css - (Colors|Colours)


Color in css.

A valid color 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

See http://codepen.io/noahblon/pen/ZbjmbK

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

See CSS - How to set an opacity (on any element, background image included)

Documentation / Specification

Discover More
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - How to set an opacity (on any element, background image included)

This article shows you what are the two options to set an opacity on HTML element. Namely, the opacity property and the alpha of a generated image.
CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document. Properties are written in a css rule after the element selection definition. Properties are attached...
Monet Femme Ombrelle 1886 Logo
Color - Name

The name of a color is known as the hue.
Color - RGB (Red Green Blue Additive Model)

Red Green Blue (RGB) is a color space (model) that specify a color by setting the amount of each of its three primary colors Red, Green, Blue (RGB). Red Green Blue is an additive model where primary...
How to add/remove CSS inline-style with the DOM

This page talks on how to manipulate the HTML style attribute on the DOM. CSS To set an inline style, you use: the qualified method: element.style.setProperty method of an element or the shortcut...

Share this page:
Follow us:
Task Runner