You have your HTML ready to go; now you need a CSS to specify the colors for its background, sidebar, headlines, etc. How can we specify them?  There are three common ways to specify web colors: by hexadecimal code, by percentages, or by color name. In this tutorial we are going to learn all about these three different ways and how to implement them.

First at all, learn that any of the three specifications will tell the browser the amount of Red, Green and Blue (RGB) that goes into a web color.

NOTE: The HTML and CSS files with the different ways of specifying color are available for download at the end of this tutorial.

Specifying Color by Hexadecimal (Hex) Code:

  • Hex codes are the most common, convenient, and upright way of specifying web colors.
  • When we use hex codes we are able to specify millions of different colors.
  • Hex code always starts with the number symbol: # followed with six digits or letters.
  • Hex code is based on ten digits: 0 to 9 and six letters: A to F.
  • The six characters are divided into sections of two characters. Two digits or letters for each RGB component; Red, Green, and Blue.

Example:
Hex Code Example

How can we find the hex code for the colors that we would like to use? Easy, the most particular way is to use a program, like Photoshop, to get the exact hex code for any color of our choice. Also, we can use color charts available online. There are also a lot of good websites that offer color palettes and color converters.

Now, let’s use a hex code to add a background-color to our HTML body:

NOTE: If each pair shares the same character; for example, #FFFFFF, we can use shorthand to simplify it to #FFF. Here is another example, #4488AA to #48A.

Specifying Color by RGB Percentages:

  • RGB percentages are rarely used, but they are somehow common. Keep in mind hex codes are the most widely used method.
  • When we specify color with RGB percentages, we are specifying the right amount of red, green, and blue the color should be composed of.
  • RGB percentages starts with rgb followed with percentages for red, green, and blue within parenthesis.

Example:
RGB Percentage Example

Also, we can specify the colors using just the numeric values without the percent symbol:
Numeric Values Example

How can we obtain the percentages and numeric values? Remember that RGB is composed of numeric values of 0 to 255; consequently, 25% of 255 is 64, 53% of 255 is 136, and 80% of 255 is 204.

Now, let’s use a RGB percentage to add a background-color to our HTML sidebar:

To see how RGB numeric values specification works, let’s use a RGB numeric value to add a background-color to our HTML footer:

Specifying Color by Name:

  • CSS only defines the name of 17 web colors; thus, is an old and quickly method to specify web colors for our websites.
  • To specify a color by its name we only need to write the color name. For example, I want to specify the color gray as the background-color for my content box, here is how we can specify it:

Here is a list of the 17 different colors available for color name specification: Black, Gray, Silver, White, Aqua, Blue, Navy, Teal, Lime, Green, Olive, Yellow, Maroon, Orange, Red, Fuchsia, and Purple. (All of these colors are predefined amounts of Red, Green, and Blue.)

Now that you know how correctly specify color in CSS, it’s time to add some color to your HTML files. Remember to choose colors that work well together! As Gaudi once said, “Color in certain places has the great value of making the outlines and structural planes seem more energetic.”

Download Source Files

 
Did you find this interesting? Check out more tutorials in Basic or Declarations.