05 - CSS Colors

In this chapter we will learn how to set colors and back grounds for various HTML Elements using CSS.

You shouldn’t doubt, when we say that the effective and efficient way to add Colors and backgrounds to your web pages is through CSS.

Before going into some more detail please have a look at the following CSS file,

/* style.css -- A simple style sheet */
body
{
    background-color : yellow;
}
h2
{
    text-align:center;
    background-color:green;
}
p
{
    color : blue;
    font-size :20px;
}

CSS Colors

Colors in CSS are used at either foreground (text etc) or at background. Colors in CSS can be expressed in the following ways,

  1. Using Hexadecimal Triplet( hex codes)

Example: 

           <p style="color: #80BFFF">

  1. Specifying the name of the color like green, blue , black etc

Example:

<p style="color: blue">

  1. Specifying the RGB triplet

Example:

<p style="color: rgb(0,255,255)">

  1. Specifying Short Hex code

Example:

<p style="color: #5A8">

  1. Specifying RGB in percentages

Example:

<p style="color: rgb(25%,15%,60%)">

We have a wide range of predefined names of colors to choose from and we also have an option of adding respective hex decimal code of the color instead of color names.

But color names are easy to remember and use, so we advise you to stick to them.

Colors in HEX codes

Hex color code is defined using hexa-decimal representation starting with pound ‘#’ sign. Each code is a combination of letters (A-F) and numbers (0-9).

  • The first two letters represent the intensity of Color Red (starting from 00 to FF, 00 being the lighter version of red and FF is the most intense)
  • The second two letters represent the intensity of the color Green (starting from 00 to FF, 00 being the lighter version of Green and FF is the most intense)
  • The last two letters represent the intensity of the color Blue. (Starting from 00 to FF, 00 being the lighter version of Blue and FF is the most intense)

CSS Colors in Hex codes

CSS colors in Short Hex codes

Short hand hex code is the short form of the 6 digit RRGGBB notation. The 6 digit notation is replaced with the equivalent 3 digit notation.  This representation is used for optimizing style sheets.

RGB triplets can be converted to short hand if each of the Red, green and blue pairs are identical. Instead of two same characters we use only one character.

For example:

Red is represented as FF0000 in RGB triplet form but in short hand notation it is represented as the following,

     <p style="color: #F00">

Short hand notation saves three bytes for each abbreviated color.

Short Hand hex code for few colors

CSS Colors using RGB Values

In CSS we use rgb() property to specify a color. The RGB value ranges from 0 to 255 or we can either specify them in percentage form. RGB values are not fully supported across all browsers, so be a little cautious while using them.

Web Safe Colors

In the past, the designers were encouraged to use the 216 web safe colors determined by the W3C standards as these are displayed same across all the display units which run on 256 color palettes. These colors vary from 000000 to FFFFFF.

The hex codes of these colors are simple and easy to remember.

With the advent of advanced display units this concept is of no use now.

The following are the web safe colors:-

Like us on Facebook