CSS Tutorial - CSS Colors








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.

The following table has some of the predefined names for colors and their decimal and hex equivalents.

Color NameHexDecimal
black#0000000,0,0
green#0080000,128,0
silver#C0C0C0192,192,192
lime#00FF000,255,0
gray#808080128,128,128
olive#808000128,128,0
white#FFFFFF255,255,255
yellow#FFFF00255,255,0
maroon#800000128,0,0
navy#0000800,0,128
red#FF0000255,0,0
blue#0000FF0,0,255
purple#800080128,0,128
teal#0080800,128,128
aqua#00FFFF0,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 NameHexDecimal
darkgray#a9a9a9169,169,169
darkslategray#2f4f4f47,79,79
dimgray#696969105,105,105
gray#808080128,128,128
lightgray#d3d3d3211,211,211
lightslategray#778899119,136,153
slategray#708090112,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 {<!--from   www.j  a  v a 2s. 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>

Click to view the demo





Color Function

Color names and simple hex values aren't the only way you can specify colors.

There are a number of functions that allow you to select a color.

  • rgb(r, g, b) specifies a color using the RGB model.
    Example: rgb(112, 128, 144)
  • rgba(r, g, b, a) specifies a color using the RGB model, with the addition of an alpha value to specify opacity. A value of 0 is fully transparent; a value of 1 is fully opaque.
    Example: rgba(112, 128, 144, 0.4)
  • hsl(h, s, l) specifies a color using the hue, saturation, and lightness (HSL) model.
    Example: hsl(120, 100%, 22%)
  • hsla(h, s, l, a) uses an alpha value to specify opacity.
    Example: hsla(120, 100%, 22%, 0.4)

rgb(rrr.rr%,ggg.gg%,bbb.bb%) uses RGB values in the range 0% to 100%, with decimal values allowed (e.g., 75.5%). The value for black would thus be rgb(0%,0%,0%), whereas blue would be rgb(0%,0%,100%).

In rgb(rrr,ggg,bbb) the accepted range of values is 0-255. The range is the decimal equivalent of 00-FF in hexadecimal. In this format, green would be rgb(0,255,0), and white would be represented as rgb(255,255,255).

The following table lists the color name, hex color values and rgb color values.

COLOR HEXCOLOR RGB COLOR
Black#000000rgb(0,0,0)
Red#FF0000 rgb(255,0,0)
Green#00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Cyan #00FFFF rgb(0,255,255)
Magenta#FF00FF rgb(255,0,255)
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFFrgb(255,255,255)

The following code shows how to use color function.

<!DOCTYPE HTML> 
<html> 
<body> 
    <p style="background-color:#C0C0C0"> 
    Color set by using hex value <!--from   w  w  w .  j a v a 2  s.  c o  m-->
    </p> 
    <p style="background-color:rgb(192,192,192)"> 
    Color set by using rgb value 
    </p> 
    <p style="background-color:gray"> 
    Color set by using color name 
    </p> 
</body> 
</html>

Click to view the demo

In the code above we use color value in various forms to set the background color of a paragraph.

Extended Color Keywords in CSS3

Color Name Hexadecimal RGB
  aliceblue #f0f8ff 240, 248, 255
  antiquewhite #faebd7 250, 235, 215
  aqua #00ffff 0, 255, 255
  aquamarine #7fffd4 127, 255, 212
  azure #f0ffff 240, 255, 255
  beige #f5f5dc 245, 245, 220
  bisque #ffe4c4 255, 228, 196
  black #000000 0, 0, 0
  blanchedalmond #ffebcd 255, 235, 205
  blue #0000ff 0, 0, 255
  blueviolet #8a2be2 138, 43, 226
  brown #a52a2a 165, 42, 42
  burlywood #deb887 222, 184, 135
  cadetblue #5f9ea0 95, 158, 160
  chartreuse #7fff00 127, 255, 0
  chocolate #d2691e 210, 105, 30
  coral #ff7f50 255, 127, 80
  cornflowerblue #6495ed 100, 149, 237
  cornsilk #fff8dc 255, 248, 220
  crimson #dc143c 220, 20, 60
  cyan #00ffff 0, 255, 255
  darkblue #00008b 0, 0, 139
  darkcyan #008b8b 0, 139, 139
  darkgoldenrod #b8860b 184, 134, 11
  darkgray #a9a9a9 169, 169, 169
  darkgreen #006400 0, 100, 0
  darkgrey #a9a9a9 169, 169, 169
  darkkhaki #bdb76b 189, 183, 107
  darkmagenta #8b008b 139, 0, 139
  darkolivegreen #556b2f 85, 107, 47
  darkorange #ff8c00 255, 140, 0
  darkorchid #9932cc 153, 50, 204
  darkred #8b0000 139, 0, 0
  darksalmon #e9967a 233, 150, 122
  darkseagreen #8fbc8f 143, 188, 143
  darkslateblue #483d8b 72, 61, 139
  darkslategray #2f4f4f 47, 79, 79
  darkslategrey #2f4f4f 47, 79, 79
  darkturquoise #00ced1 0, 206, 209
  darkviolet #9400d3 148, 0, 211
  deeppink #ff1493 255, 20, 147
  deepskyblue #00bfff 0, 191, 255
  dimgray #696969 105, 105, 105
  dimgrey #696969 105, 105, 105
  dodgerblue #1e90ff 30, 144, 255
  firebrick #b22222 178, 34, 34
  floralwhite #fffaf0 255, 250, 240
  forestgreen #228b22 34, 139, 34
  fuchsia #ff00ff 255, 0, 255
  gainsboro #dcdcdc 220, 220, 220
  ghostwhite #f8f8ff 248, 248, 255
  gold #ffd700 255, 215, 0
  goldenrod #daa520 218, 165, 32
  gray #808080 128, 128, 128
  green #008000 0, 128, 0
  greenyellow #adff2f 173, 255, 47
  grey #808080 128, 128, 128
  honeydew #f0fff0 240, 255, 240
  hotpink #ff69b4 255, 105, 180
  indianred #cd5c5c 205, 92, 92
  indigo #4b0082 75, 0, 130
  ivory #fffff0 255, 255, 240
  khaki #f0e68c 240, 230, 140
  lavender #e6e6fa 230, 230, 250
  lavenderblush #fff0f5 255, 240, 245
  lawngreen #7cfc00 124, 252, 0
  lemonchiffon #fffacd 255, 250, 205
  lightblue #add8e6 173, 216, 230
  lightcoral #f08080 240, 128, 128
  lightcyan #e0ffff 224, 255, 255
  lightgoldenrodyellow #fafad2 250, 250, 210
  lightgray #d3d3d3 211, 211, 211
  lightgreen #90ee90 144, 238, 144
  lightgrey #d3d3d3 211, 211, 211
  lightpink #ffb6c1 255, 182, 193
  lightsalmon #ffa07a 255, 160, 122
  lightseagreen #20b2aa 32, 178, 170
  lightskyblue #87cefa 135, 206, 250
  lightslategray #778899 119, 136, 153
  lightslategrey #778899 119, 136, 153
  lightsteelblue #b0c4de 176, 196, 222
  lightyellow #ffffe0 255, 255, 224
  lime #00ff00 0, 255, 0
  limegreen #32cd32 50, 205, 50
  linen #faf0e6 250, 240, 230
  magenta #ff00ff 255, 0, 255
  maroon #800000 128, 0, 0
  mediumaquamarine #66cdaa 102, 205, 170
  mediumblue #0000cd 0, 0, 205
  mediumorchid #ba55d3 186, 85, 211
  mediumpurple #9370db 147, 112, 219
  mediumseagreen #3cb371 60, 179, 113
  mediumslateblue #7b68ee 123, 104, 238
  mediumspringgreen #00fa9a 0, 250, 154
  mediumturquoise #48d1cc 72, 209, 204
  mediumvioletred #c71585 199, 21, 133
  midnightblue #191970 25, 25, 112
  mintcream #f5fffa 245, 255, 250
  mistyrose #ffe4e1 255, 228, 225
  moccasin #ffe4b5 255, 228, 181
  navajowhite #ffdead 255, 222, 173
  navy #000080 0, 0, 128
  oldlace #fdf5e6 253, 245, 230
  olive #808000 128, 128, 0
  olivedrab #6b8e23 107, 142, 35
  orange #ffa500 255, 165, 0
  orangered #ff4500 255, 69, 0
  orchid #da70d6 218, 112, 214
  palegoldenrod #eee8aa 238, 232, 170
  palegreen #98fb98 152, 251, 152
  paleturquoise #afeeee 175, 238, 238
  palevioletred #db7093 219, 112, 147
  papayawhip #ffefd5 255, 239, 213
  peachpuff #ffdab9 255, 218, 185
  peru #cd853f 205, 133, 63
  pink #ffc0cb 255, 192, 203
  plum #dda0dd 221, 160, 221
  powderblue #b0e0e6 176, 224, 230
  purple #800080 128, 0, 128
  red #ff0000 255, 0, 0
  rosybrown #bc8f8f 188, 143, 143
  royalblue #4169e1 65, 105, 225
  saddlebrown #8b4513 139, 69, 19
  salmon #fa8072 250, 128, 114
  sandybrown #f4a460 244, 164, 96
  seagreen #2e8b57 46, 139, 87
  seashell #fff5ee 255, 245, 238
  sienna #a0522d 160, 82, 45
  silver #c0c0c0 192, 192, 192
  skyblue #87ceeb 135, 206, 235
  slateblue #6a5acd 106, 90, 205
  slategray #708090 112, 128, 144
  slategrey #708090 112, 128, 144
  snow #fffafa 255, 250, 250
  springgreen #00ff7f 0, 255, 127
  steelblue #4682b4 70, 130, 180
  tan #d2b48c 210, 180, 140
  teal #008080 0, 128, 128
  thistle #d8bfd8 216, 191, 216
  tomato #ff6347 255, 99, 71
  turquoise #40e0d0 64, 224, 208
  violet #ee82ee 238, 130, 238
  wheat #f5deb3 245, 222, 179
  white #ffffff 255, 255, 255
  whitesmoke #f5f5f5 245, 245, 245
  yellow #ffff00 255, 255, 0
  yellowgreen #9acd32 154, 205, 50

Example

The following code shows how to use the color names and their corresponding RGB value and hex equivalents.


<!DOCTYPE HTML>
<html>
<head>
<title>Named colors in CSS</title>
<style type="text/css">
table {<!--from  www  .j av a 2 s . c  om-->
  border-spacing: 2em 1em;
  margin:25px auto;
}
caption {
  font-family:Tahoma, Geneva, sans-serif;
  font-weight:bold;
  font-size:20px;
}
td {
  border: #000 solid 1px;
  text-align:center;
  padding:10px;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#FFF;
  width:7em;
  white-space: pre;
}
#aqua {
  background-color:aqua;
}
#black {
  background-color:black;
}
#blue {
  background-color:blue;
}
#fuchsia {
  background-color:fuchsia;
}
#gray {
  background-color:gray;
}
#green {
  background-color:green;
}
#lime {
  background-color:lime;
}
#maroon {
  background-color:maroon;
}
#navy {
  background-color:navy;
}
#olive {
  background-color:olive;
}
#purple {
  background-color:purple;
}
#red {
  background-color:red;
}
#silver {
  background-color:silver;
}
#teal {
  background-color:teal;
}
#white {
  background-color:white;
}
#yellow {
  background-color:yellow;
}
#aqua, #fuchsia, #lime, #red, #silver, #white, #yellow {
  color:black;
}
</style>
</head>

<body>
<table>
    <caption>
    Basic Color Keywords
    </caption>
    <tr>
        <td id="aqua">aqua
#00FFFF
0, 255, 255</td>
        <td id="black">black
#000000
0, 0, 0</td>
        <td id="blue">blue
#0000FF
0, 0, 255</td>
        <td id="fuchsia">fuchsia
#FF00FF
255, 0, 255</td>
    </tr>
    <tr>
        <td id="gray">gray
#808080
128, 128, 128</td>
        <td id="green">green
#008000
0, 128, 0</td>
        <td id="lime">lime
#00FF00
0, 255, 0</td>
        <td id="maroon">maroon
#800000
128, 0, 0</td>
    </tr>
    <tr>
        <td id="navy">navy
#000080
0, 0, 128</td>
        <td id="olive">olive
#808000
128, 128, 0</td>
        <td id="purple">purple
#800080
128, 0, 128</td>
        <td id="red">red
#FF0000
255, 0, 0</td>
    </tr>
    <tr>
        <td id="silver">silver
#C0C0C0
192, 192, 192</td>
        <td id="teal">teal
#008080
0, 128, 128</td>
        <td id="white">white
#FFFFFF
255, 255, 255</td>
        <td id="yellow">yellow
#FFFF00
255, 255, 0</td>
    </tr>
</table>
</body>
</html>

The code above is rendered as follows: