HTML Color Codes Chart – How To Find Hexadecimal Color Code

I have always advocated the use of Notepad for people willing to learn HTML properly and recently one of my cousins who have just started learning HTML and is diligently sticking to the notepads, avoiding the lure of easy WYSIWYG editors came back to me with a problem.”How can I find the proper HTML color code when coding in notepad”

Instead of giving him a short answer I thought I would make a post here on HTML color codes so that it can be of help to so many other people who are also stuck with issues and doubts about these strange looking hexadecimal color codes.

Though I mentioned them as “strange looking hexadecimal codes” they are not really strange and are rather pretty logically formed. In HTML, at times we use names of colors like, red, blue, green etc but more often than not we use Hexadecimal color codes to add more precise colors on the web pages.Let’s look at what is the logic behind Hexadecimal HTML color codes..

HTML color codes are formed basically of three primary colors – Red , Green and Blue, otherwise referred to as RGB. In all the hexa decimal color codes you will typically see six characters, for example #ff6633 – in this case the first two character defines value for red, the next two for Green and the last two for blue. If you would go through a HTML color code chart you will notice that lower numbers and letters display darker colors ( Black: #000000 ). So if we would like to have a bright red color we would have the code as #FF0000 – which would mean to the browser maximum Red ( FF) No Blue (00), No green (00). If you can keep a few basic color codes in mind you can probably do some permutation and combination based on the above mentioned facts to get other color variations. It is important that we append the # before the color code.

How to get the exact HTML color codes

a) When you are creating a webpage from a design, open it in Photoshop and use the color picker tool to click on the color of your choice, it will show you the HTML color code for that. A color picker tool is available on all graphic design applications and this is the easiest way to do this.

b) HTML color code charts – Yes, readymade HTML color code charts are available on the web. A small Google search and you can find a lot of them. Some of them list almost all possible colors and variations along with their hexadecimal code for HTML. So a simple search and then a copy paste job can resolve the issue. Check this HTML color code chart for reference: http://www.webmonkey.com/reference/Color_Charts