CSS Colors
Description
When using CSS you can specify colors in a range of different ways.
We can use the predefined color names. Or we can use a decimal or hexadecimal value for each of the red, green, and blue components.
Decimal values are separated by a comma, and hex values are
usually prefixed with #-such as #ffffff, which represents white.
Example
The following table has some of the predefined names for colors and their decimal and hex equivalents.
| Color Name | Hex | Decimal |
|---|---|---|
| black | #000000 | 0,0,0 |
| green | #008000 | 0,128,0 |
| silver | #C0C0C0 | 192,192,192 |
| lime | #00FF00 | 0,255,0 |
| gray | #808080 | 128,128,128 |
| olive | #808000 | 128,128,0 |
| white | #FFFFFF | 255,255,255 |
| yellow | #FFFF00 | 255,255,0 |
| maroon | #800000 | 128,0,0 |
| navy | #000080 | 0,0,128 |
| red | #FF0000 | 255,0,0 |
| blue | #0000FF | 0,0,255 |
| purple | #800080 | 128,0,128 |
| teal | #008080 | 0,128,128 |
| aqua | #00FFFF | 0,255,255 |
These are known as the basic color names.
The following table shows the extended set of gray shades that can be used.
| Color Name | Hex | Decimal |
|---|---|---|
| darkgray | #a9a9a9 | 169,169,169 |
| darkslategray | #2f4f4f | 47,79,79 |
| dimgray | #696969 | 105,105,105 |
| gray | #808080 | 128,128,128 |
| lightgray | #d3d3d3 | 211,211,211 |
| lightslategray | #778899 | 119,136,153 |
| slategray | #708090 | 112,128,144 |
RGB value short form
Use hexadecimal value for each of the red, green, and blue components.
Each pair is in hexadecimal notation in the range 00 - FF.
hex values are usually prefixed with #,
such as #ffffff, which represents white.
A "pure" blue would be written #0000FF,
"pure" red is written #FF0000.
#RGB is a shorter form of the six-digit notation described above.
In this format, each digit is replicated to get an equivalent six-digit value,
for example #F7C becomes #FF77CC.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!-- ww w . j ava 2 s.c o m-->
background-color: yellow;
}
div#one {
width: 50px;
height: 50px;
border: 1px solid rgb(128, 128, 128);
margin: 5px;
float: left;
background-color: #000;
}
</style>
</head>
<body>
<div id='one'></div>
</body>
</html>