Css - (Colors|Colours)

1 - Description

Color in css.

A string is a valid simple color if it is exactly seven characters long, and the first character is a “#” (U+0023) character, and the remaining six characters are all ASCII hex digits, with the first two digits representing the red component, the middle two digits representing the green component, and the last two digits representing the blue component, in hexadecimal.

A colour is either :

  • a keyword
  • or a numerical RGB specification.

3 - Example

The list of colour is:

Keyword 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

Example(s):

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

4 - RGB color

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

Example(s):

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.

4.1 - Three-digit RGB notation (functional/short)

The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

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

4.2 - The integer 255

The integer value 255 corresponds to :

  • 100%,
  • F or FF in the hexadecimal notation
rgb(255,255,255) = rgb(100%,100%,100%) = #FFF

Whitespace characters are allowed around the numerical values.

5 - 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.

6 - Transparent black

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

7 - Dynamic Colorization

8 - Documentation / Specification

markup/css/color.txt · Last modified: 2017/09/13 16:02 by gerardnico