CSS Color Values
There are several ways to define a color values in CSS.
Color keywords are case-insensitive identifiers which represent a specific color, e.g.
Warning: Support for color keywords varies across browsers so, to be on the safe side, it's better to use the hexadecimal or functional notation.
Check out the complete list of color keywords »
Transparent Color Keyword
The transparent keyword represents a fully transparent color.
This keyword can be considered a shorthand for transparent black,
rgba(0,0,0,0), which is also its computed value.
RGB Color Values
RGB (red-green-blue) color model is the most common way to define color values in CSS. Colors can be defined using the RGB model in two ways:
The RGB value in hexadecimal notation is specified with a
# character immediately followed by either three or six hexadecimal characters (0-9, a-f).
When six-digit notation (
#rrggbb) is used, the first pair (
rr) represents the red value, the second pair (
gg) represents the green value and the last pair (
bb) represents the blue value.
Tip: The three-digit hexadecimal notation (
#rgb) can be converted into six-digit form (
#rrggbb) by replicating digits, but not by adding zeros. For example,
#03f can be expanded to
#0033ff, but both values represent the same color.
The RGB value in functional notation is specified with:
rgb(red, green, blue). Where, each parameter (
blue) defines the intensity of the color and can be an integer value (from 0 to 255) or a percentage value (from 0% to 100%).
The integer value
255 corresponds to
100%, and to
ff in the hexadecimal notation: For example,
rgb(0,255,255) = rgb(0%,100%,100%) = #0ff, and all values represents the same color which is aqua. White spaces are allowed around the numerical values.
A value of
0% represents the absence of a particular color component, while a value of
ff represents the full presence of that color component.
Note: Values outside the valid range (
0%-100%) are automatically clipped or changed to fall within the range supported by the device.
Check out the tutorial on CSS3 color to learn about the new functional notations, like
hsla() for defining the color values.