HTML Color Codes, color charts and color tools

If you are a blogger fussy with appearance of your blog, or you get involved in activities like Blending colors of your advertisements with the colors of your website or Blending color of your search box with the colors of your website or Change main background color of Rounders template blog, you will have to be familiar with hexadecimal HTML color codes. HTML color codes are codes with a # in front of either 3 or 6 alphabets or numbers or combination of them. An example is #FFFFFF which is the HTML color code for white. It can also be written as #FFF. Of course those with 6 alphabets or numbers or combinations will have a greater range of colors than those with only 3. There are various ways of getting the HTML color code you want.

HTML Color code chart
One of ways is to refer to HTML color charts of which there are many on the web. The URLs of the websites given below are not active (clickable). You will have to copy the URL and paste it into the web browser address bar. The best is to use a web browser like FireFox with tabbed browsing. Then while you are doing whatever you are doing, you can open a new tab and paste the URL into address bar in the new tab. After you get the HTML color code you want, just go back to the original tab and do whatever is needed:

HTML color charts with the # already added in front of the hexadecimal codes:

HTML color charts without the # in front of the hexadecimal codes. You will have to add the # yourself:

HTML color code by clicking on a chart
These works slightly differently from a color chart displayed on the web page. Some of them are:

To illustrate, let me show you a screenshot of how the first one works:

HTML color code by clicking on a color chart

The red arrow shows where I clicked on a color on a color bar. The HTML color code is highlighted by a red ellipse #815D19. Not that the large square display slight variations of that range of color (all various shades of brown) and the tiny circle which is the shade of brown you selected. The actual color represented by the HTML color code #815D19 is shown in the small square on the left.

Now if you want a different shade of brown, what you can do is to click on a different area of the large square to the left. To illustrate, I will show below another screenshot:

get HTML color code of a different shade of a range of colors

Note that this time I clicked on a different area of the large square on the left indicated by a tiny circle plus the arrow representing the mouse cursor and further highlighted by a red ellipse. The HTML color code is now #595143 (highlighted by another red ellipse and again the actual color chosen is displayed in the small square on the left.

There are still more choices for you. Suppose you don’t want any shade of brown, by you want blue instead. What you can do is to click on the blue section of the color bar in the middle, again I will illustrade with a screenshot below:

Note that I have clicked on the lower (blue) section of the color bar (cursor shown as a white arrow highlighted by a red arrow. This time the HTML color code is #434558 and the shade of blue is shown by a tiny circle in the large rectangle on the left and the actual color displayed again in the small square to the right.

Just as above, if you are not happy with this shade of blue, just click on the appropriate point in the large rectangle on the left and you will get a different shade of blue, and so on.

Using color tools
Instead of selecting a HTML color code from a color chart, there are also tools to help you pick the HTML color code from a website which might be your own or others. Some of them are:

http://www.adesdesign.net/php/products_color_picker.php
USD 9.90 at time of publishing

Leave a Comment

Your email address will not be published.