HTML Color Chart Codes: What Do the Codes Really Mean?

HTML Color Chart Codes: What Do the Codes Really Mean?
Page content

HTML Color Codes: An Introduction

HTML color chart codes are hexadecimal codes that start with a # followed by six alpha numeric characters. The browser reads this code and renders the color to the element for which the color is used. While using a color on an HTML page, you can also use the name of the color in the stylesheet. For example - p{color:red;} will render all the font inside the

block elements as red in color.

Since there are millions of colors, it is difficult to name all the colors and most of the colors will never be used. In such cases, color picker tools are used that will give you the exact hexadecimal code for the color that you want.

Deciphering HTML Color Chart Codes

Basically, all colors are a mix of the three primary colors—namely red, green and blue. In the hexadecimal representation of HTML color codes, the first two alpha-numeric characters are used for different shades of red. They range from 00(lowest value) to FF(highest value). The same goes for the next two alpha-numeric characters which are the third and fourth characters, respectively. They represent the color green and range from 00 to FF. The same goes for the last two alpha-numeric characters that represent blue and range from 00 to FF.

In general, the color code is of the format #RRGGBB. Thus, if the color has to be red, #FF0000 is used, which is pure red. Similarly the #00FF00 HTML color code stands for green and #0000FF stands for blue.

A mix of these colors let you use 256*256*256 = 16,777,216 colors. Now you understand why the names of colors are not used and instead HTML color codes are used. It is not wrong to use the name of the colors while designing a web page but whether you are going to remember the names of so many colors (and not all the colors have names!) is the real question.

How to Make Your Set of Colors Using HTML Color Codes

Now that you have a good understanding of how HTML color codes work, it is time to start experimenting with them.

HTML Color Codes

In the image on the left, the additive color combination shows the mixing of the three primary color combinations namely red, green and blue to get the secondary colors. The subtractive color combination shows the mixing of the secondary colors to get the primary colors.

While using HTML color codes, 00 refers to the absence of the primary color. Increasing the value all the way to FF darkens the shade of the primary color and gives the resulting primary color.

This explains why the HTML color code #000000 is black and #FFFFFF is white. Note that white is a mix of all the colors and black is the absence of any color.

Let’s now use HTML color codes to mix and create new colors. From the image (the Additive part), we see that red and green mix to give yellow. To obtain a yellow color using the HTML color code, the first two alpha-numeric characters that give red should be FF and the next two alpha-numeric characters that give the green color should be FF too. The rest is 00. This results in #FFFF00 that will give yellow. Similarly, you get magenta by mixing red and blue. The resulting color code will be #FF00FF.

Use various alpha-numeric values to increase and reduce the darkness and combine them to get the colors of your choice or use some of the tools given below to choose the color of your and get its respective HTML code.

Image Credit: Lukascrech.com

Some Commonly Used HTML Color Codes

Here is a list of some of the commonly used colors on a web page. They will help you understand how HTMLcolors codes are used to get a mix of the various colors present in the color palette.

  • #FF0000 - Red
  • #00FF00 - Green
  • #0000FF - Blue
  • #FFFF00 - Yellow. It is a mix of red(#FF0000) and green (#00FF00) that results in yellow(#FFFF00)
  • #FFFFFF - White (Mixture of all colors)
  • #000000 - Black (No color)
  • #C0C0C0 - Gray

Tools to Get HTML Color Codes

Now that you know how HTML color codes are used, the next step is to use tools that will help you find the code for the color of your choice. Here are some tools that will help you in this process.

  1. Colorzilla add-on for Firefox,
  1. To get the HTML color codes for the colors present in a given image: https://www.degraeve.com/color-palette/