CSS Tag 5
Measurement Values
| Unit |
Description |
| % |
percentage |
| in |
inch |
| cm |
centimeter |
| mm |
millimeter |
| em |
1em is equal to the current font size. 2em means 2 times
the size of the current font. E.g., if an element is displayed with a font
of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since
it can adapt automatically to the font that the reader uses |
| ex |
one ex is the x-height of a font (x-height is usually
about half the font-size) |
| pt |
point (1 pt is the same as 1/72 inch) |
| pc |
pica (1 pc is the same as 12 points) |
| px |
pixels (a dot on the computer screen) |
Color Values
CSS colors are defined using a hexadecimal (hex) notation for the
combination of Red, Green, and Blue
color values (RGB). The lowest value that can be given to one of the
light sources is 0 (hex 00). The highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
Color Examples
| Color |
Color HEX |
Color RGB |
|
#000000 |
rgb(0,0,0) |
|
#FF0000 |
rgb(255,0,0) |
|
#00FF00 |
rgb(0,255,0) |
|
#0000FF |
rgb(0,0,255) |
|
#FFFF00 |
rgb(255,255,0) |
|
#00FFFF |
rgb(0,255,255) |
|
#FF00FF |
rgb(255,0,255) |
|
#C0C0C0 |
rgb(192,192,192) |
|
#FFFFFF |
rgb(255,255,255) |
Try it yourself »
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of
more than 16 million different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying
the red light from 0 to 255, while keeping the green and blue light at zero.
To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below.
| Red Light |
HEX |
RGB |
|
#000000 |
rgb(0,0,0) |
|
#080000 |
rgb(8,0,0) |
|
#100000 |
rgb(16,0,0) |
|
#180000 |
rgb(24,0,0) |
|
#200000 |
rgb(32,0,0) |
|
#280000 |
rgb(40,0,0) |
|
#300000 |
rgb(48,0,0) |
|
#380000 |
rgb(56,0,0) |
|
#400000 |
rgb(64,0,0) |
|
#480000 |
rgb(72,0,0) |
|
#500000 |
rgb(80,0,0) |
|
#580000 |
rgb(88,0,0) |
|
#600000 |
rgb(96,0,0) |
|
#680000 |
rgb(104,0,0) |
|
#700000 |
rgb(112,0,0) |
|
#780000 |
rgb(120,0,0) |
|
#800000 |
rgb(128,0,0) |
|
#880000 |
rgb(136,0,0) |
|
#900000 |
rgb(144,0,0) |
|
#980000 |
rgb(152,0,0) |
|
#A00000 |
rgb(160,0,0) |
|
#A80000 |
rgb(168,0,0) |
|
#B00000 |
rgb(176,0,0) |
|
#B80000 |
rgb(184,0,0) |
|
#C00000 |
rgb(192,0,0) |
|
#C80000 |
rgb(200,0,0) |
|
#D00000 |
rgb(208,0,0) |
|
#D80000 |
rgb(216,0,0) |
|
#E00000 |
rgb(224,0,0) |
|
#E80000 |
rgb(232,0,0) |
|
#F00000 |
rgb(240,0,0) |
|
#F80000 |
rgb(248,0,0) |
|
#FF0000 |
rgb(255,0,0) |
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light
sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you:
| Gray Shades |
HEX |
RGB |
|
#000000 |
rgb(0,0,0) |
|
#080808 |
rgb(8,8,8) |
|
#101010 |
rgb(16,16,16) |
|
#181818 |
rgb(24,24,24) |
|
#202020 |
rgb(32,32,32) |
|
#282828 |
rgb(40,40,40) |
|
#303030 |
rgb(48,48,48) |
|
#383838 |
rgb(56,56,56) |
|
#404040 |
rgb(64,64,64) |
|
#484848 |
rgb(72,72,72) |
|
#505050 |
rgb(80,80,80) |
|
#585858 |
rgb(88,88,88) |
|
#606060 |
rgb(96,96,96) |
|
#686868 |
rgb(104,104,104) |
|
#707070 |
rgb(112,112,112) |
|
#787878 |
rgb(120,120,120) |
|
#808080 |
rgb(128,128,128) |
|
#888888 |
rgb(136,136,136) |
|
#909090 |
rgb(144,144,144) |
|
#989898 |
rgb(152,152,152) |
|
#A0A0A0 |
rgb(160,160,160) |
|
#A8A8A8 |
rgb(168,168,168) |
|
#B0B0B0 |
rgb(176,176,176) |
|
#B8B8B8 |
rgb(184,184,184) |
|
#C0C0C0 |
rgb(192,192,192) |
|
#C8C8C8 |
rgb(200,200,200) |
|
#D0D0D0 |
rgb(208,208,208) |
|
#D8D8D8 |
rgb(216,216,216) |
|
#E0E0E0 |
rgb(224,224,224) |
|
#E8E8E8 |
rgb(232,232,232) |
|
#F0F0F0 |
rgb(240,240,240) |
|
#F8F8F8 |
rgb(248,248,248) |
|
#FFFFFF |
rgb(255,255,255) |
Web Safe Colors?
Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors"
was suggested as a Web standard, reserving 40 fixed system colors.
This is not important now, since most computers can display millions of different colors, but the choice is left to you.
The 216 cross-browser color palette was created to ensure that all
computers would display the colors correctly when running a 256 color
palette:
| 000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
| 003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
| 006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
| 009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
| 00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
| 00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
| 330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
| 333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
| 336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
| 339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
| 33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
| 33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
| 660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
| 663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
| 666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
| 669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
| 66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
| 66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
| 990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
| 993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
| 996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
| 999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
| 99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
| 99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
| CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
| CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
| CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
| CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
| CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
| CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
| FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
| FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
| FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
| FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
| FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
| FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
CSS Colors
Colors in CSS can be specified by the following methods:
- Hexadecimal colors
- RGB colors
- RGBA colors
- HSL colors
- HSLA colors
- Predefined/Cross-browser color names
Hexadecimal Colors
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red),
GG (green) and BB (blue) hexadecimal integers specify the components of
the color.
All values must be between 0 and FF.
For example, the #0000ff value is rendered as blue, because the blue
component is set to its highest value (ff) and the others are set to 0.
Example
Define different HEX colors:
#p1 {background-color: #ff0000;} / * red */
#p2 {background-color: #00ff00;}
/ * green */
#p3 {background-color: #0000ff;} / * blue */
Try it yourself »
RGB Colors
RGB color values are supported in all major browsers.
An RGB color
value is specified with: rgb(red, green, blue). Each parameter (red, green, and
blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
For example, the rgb(0,0,255) value is rendered as blue,
because the blue parameter is set to its highest value (255) and the others are
set to 0.
Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).
Example
Define different RGB colors:
#p1 {background-color: rgb(255,0,0);} / * red */
#p2 {background-color: rgb(0,255,0);}
/ * green */
#p3 {background-color: rgb(0,0,255);} / * blue */
Try it yourself »
RGBA Colors
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).
Example
Define different RGB colors with opacity:
#p1 {background-color: rgba(255,0,0,0.3);} / * red
with opacity */
#p2 {background-color: rgba(0,255,0,0.3);}
/ * green with opacity */
#p3 {background-color: rgba(0,0,255,0.3);} / * blue
with opacity */
Try it yourself »
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera
10+.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.
An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120
is green, 240 is blue. Saturation is a percentage value; 0% means a shade of
gray and 100% is the full color. Lightness is also a percentage; 0% is black,
100% is white.
Example
Define different HSL colors:
#p1 {background-color: hsl(120,100%,50%);} / * green */
#p2 {background-color: hsl(120,100%,75%);}
/ * light green */
#p3 {background-color: hsl(120,100%,25%);} / * dark
green */
#p4 {background-color: hsl(120,60%,70%);} / * pastel green */
Try it yourself »
HSLA Colors
HSLA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in
Opera 10+.
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
Define different HSL colors with opacity:
#p1 {background-color: hsla(120,100%,50%,0.3);} / * green with opacity */
#p2 {background-color: hsla(120,100%,75%,0.3);}
/ * light green with opacity */
#p3 {background-color: hsla(120,100%,25%,0.3);} / * dark
green with opacity */
#p4 {background-color: hsla(120,60%,70%,0.3);} / * pastel green
with opacity */
Try it yourself »
Predefined/Cross-browser Color Names
140 color names are predefined in the HTML and CSS color specification. Look at our table of
predefined color names.
Color Names Supported by All Browsers
140 color names are defined in the HTML and CSS color specification (17 standard colors plus 123 more).
The table below lists them all, along with their hexadecimal values.
 |
Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. |
Sorted by Color Name
Colors sorted by HEX values
Click on a color name (or a hex value) to view the color as the background-color along with different text colors:
Sorted by HEX Value
Colors sorted by Color name
