Using colors in HTML

Using colors in HTML is the section 14 of Beginner’s Guide to HTML.

Colors makes your website more attractive. Rather than adding colors to your website using images, you can add colors directly by HTML.

If you want to know the basic theroy behind colors, colors are displayed combining Red, Green, and Blue lights.

#FF0000 rgb(255,0,0) red
#00FF00 rgb(0,255,0) green
#0000FF rgb(0,0,255) blue

Color Values

The 2nd column of the above table is the hexadecimal(HEX) representation of the the color. If you have noticed, it was written using a # character followed by 3 double digit numbers.
The 3rd column is the RGB representation of the color.
The 4th column is the name of the color that can be also used in HTML.

In the above notations the lowest value that can be given to one of the light sources is 0 in RGB notation and 00 in HEX notation. The highest value is 255 in RGB and FF in HEX. You may get a clear understanding if you look at the notations of colors black and white.

#000000 rgb(0,0,0) black
#FFFFFF rgb(255,255,255) white

Let’s take an example of the usage of this.

Color set by using HEX value #00FFFF

Color set by using RGB value rgb(0,255,255)

Color set by using color name aqua

Look at the code of the above example.

[code language=”html”]

Color set by using HEX value #00FFFF

Color set by using RGB value rgb(0,255,255)

Color set by using color name aqua


16 Million colors

So from the above notations, did you realize how much of colors we can generate? The answer is 256 x 256 x 256. It means total of more than 16 million different colors that you can play around. Phew!! what a number!!!  So we couldn’t give each color a name, but there are few that we could identify by names. Actual number of 140 color names. Among them there are 17 standard color names.

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Shades of RGB

There will be a variety of red color, darker ones to lighter ones by changing the R value incrementally by 0 to 255. Same goes for green and blue.  Most modern monitors are capable of displaying at least 16384 different colors.

#400000 rgb(64,0,0)
#780000 rgb(120,0,0)
#D8000 rgb(216,0,0)


Shades of Gray

In the above example we looked at different shades of reds. It was easy because it only needs to change the R values. But get the shades of gray it should be a equal value to all of the R,G,B values.

#202020 rgb(32,32,32)
#606060 rgb(96,96,96)
#D8D8D8 rgb(216,216,216)


In this section we go through different ways of representing colors in HTML. You can choose any kind of notation. Choice is yours. Changing the font color and background color is the most common uses of colors. In the next section we are going through special characters usage in HTML.


Let’s findout the usages of Special Characters in HTML.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. Howdy great website! Does running a blog similar to this require a massive amount work? I’ve virtually no knowledge of computer programming but I was hoping to start my own blog soon. Anyhow, if you have any recommendations or techniques for new blog owners please share. I understand this is off subject however I just wanted to ask. Many thanks!

  2. Hello I am so grateful I found your web site, I really found you by error, while I was searching on Askjeeve for something else, Regardless I am here now and would just like to say many thanks for a tremendous post and a all round thrilling blog (I also love the theme/design), I don韙 have time to read through it all at the minute but I have saved it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the excellent job.

  3. Thanks, I have recently been searching for info about this subject for ages and yours is the best I’ve discovered so far.

  4. Hey there! This is my first visit to your blog! We are a team of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a marvellous job!

Comment Below