CSS Value: Color
Color values used with properties such as color and background-color.
A color value can take one of several forms:
| Value | Description | Example |
|---|---|---|
# |
Hexadecimal red-green-blue. Can be six or three hexadecimal digits (0 to F). Using six digits, the first two specify the amount of red, second two the amount of green, and third two the amount of blue. The three-digit form is a shortened notation with the first digit red, second green, and thrid blue. |
p { color: #ff0000 } |
rgb() |
Functional red-green-blue. Contains three comma-separated values, each from 0 to 255 or 0% to 100%. The first specifies the amount of red, second amount of green, and thrid amount of blue. |
body { background: rgb(0,127,0) } |
rgba() |
Functional red-green-blue with alpha. As Functional RGB, with an additional value, from 0 to 1, which specifies transparency. 0 is full transparency, 1 is solid, 0.3 is 30% solid, etc. |
h1 { background: rgba(0,0,0,0.8) } |
hsl() |
Hue-saturation-lightness. Contains three comma-separated values. The first value, hue, is from 0 to 360, or 0% to 100%, and represents an angle on the color circle. 0 (or 360) is red, 120 is green, 240 is blue, etc.The second value, saturation, is from 0% (full desaturation) to 100% (full saturation).The third value, lightness, is from 0% (black) to 100% (white). |
p { color: hsl(240,100%,75%) } |
hsla() |
Hue-saturation-lightness with alpha. As Hue-saturation-lightness, with an additional value, from 0 to 1, which specifies transparency. 0 is full transparency, 1 is solid, 0.7 is 70% solid, etc. |
h1 { background: hsla(0,0%,100%,0.1) } |
transparent |
Transparent. | .alt { backround: transparent } |
black |
Black keyword. Equivalent of #000000 / rgb(0,0,0) |
p { color: black } |
silver |
Silver keyword. Equivalent of #c0c0c0 / rgb(192,192,192) |
p { color: silver } |
gray |
Gray keyword. Equivalent of #808080 / rgb(128,128,128) |
p { color: gray } |
white |
White keyword. Equivalent of #ffffff / rgb(255,255,255) |
p { color: white } |
maroon |
Maroon keyword. Equivalent of #800000 / rgb(128,0,0) |
p { color: maroon } |
red |
Red keyword. Equivalent of #ff0000 / rgb(255,0,0) |
p { color: red } |
purple |
Purple keyword. Equivalent of #800080 / rgb(128,0,128) |
p { color: purple } |
fuchsia |
Fuchsia keyword. Equivalent of #ff00ff / rgb(255,0,255) |
p { color: fuchsia } |
green |
Green keyword. Equivalent of #008000 / rgb(0,128,0) |
p { color: green } |
lime |
Lime keyword. Equivalent of #00ff00 / rgb(0,255,0) |
p { color: lime } |
olive |
Olive keyword. Equivalent of #808000 / rgb(128,128,0) |
p { color: olive } |
yellow |
Yellow keyword. Equivalent of #ffff00 / rgb(255,255,0) |
p { color: yellow } |
navy |
Navy keyword. Equivalent of #000080 / rgb(0,0,128) |
p { color: navy } |
blue |
Blue keyword. Equivalent of #0000ff / rgb(0,0,255) |
p { color: blue } |
teal |
Teal keyword. Equivalent of #008080 / rgb(0,128,128) |
p { color: teal } |
aqua |
Aqua keyword. Equivalent of #00ffff / rgb(0,255,255) |
p { color: aqua } |