Explaining HTML Color Codes – Simply

I lately acquired one among my common website positioning newsletters. The subject this time was understanding HTML colour codes. Nevertheless it skipped so many areas, that I am certain many readers would have been misplaced.

So I’ve determined to strive explaining this matter as merely as potential.

I am going to break up this tutorial into 3 components:

1) understanding decimal colour codes

2) understanding hexadecimal

3) utilizing hexadecimal in colour codes


Its in all probability helpful to start out with monochrome TV / laptop screens: The display is made up of a lot of dots, in a grid sample, so that you simply get tons of of dots horizontally and vertically. Pc guys name them pixels, however for the non-technical individuals, I am going to name them dots.

Now, you may select the brightness of every dot: no brightness = black, full brightness = white, a degree in-between = a degree of gray.

To make issues straightforward, we are able to use numbers to point how vibrant to make the dot. 0 = black, 255 = white, 128 = mid-grey, and so on.

We may use a quantity vary of 0 – 99, or 1 – 100, however 0 – 255 has a particular which means to computer systems, so we have to use 0 – 255.

So how does colour work?

Effectively, think about that as a substitute of a dot, you even have 3 mini-dots. The three mini-dots are coloured: Pink, Inexperienced, Blue (RGB).

Why use these specific colours?

Its like an optical phantasm. When these 3 mini-dots are shut sufficient collectively, and at full brightness, the human eye is fooled into considering it sees white. Now, by altering the brightness of the three mini-dots, you may get nearly each colour you want.

So, to signify colours utilizing numbers, we have to use 3 numbers for every dot (ie a quantity for every mini-dot). The order is vital: the primary quantity is for purple, the second is inexperienced, the third is blue.

So, to signify black, we use: 0,0,0 (ie all mini-dots don’t have any brightness).

255,255,255 = white (every mini dot is at full brightness, and your eye is tricked into seeing white)

128,128,128 = mid gray

255,0,0 = stable purple (the purple mini-dot is at full brightness, however inexperienced and blue don’t have any brightness)


0,255,0 = stable inexperienced

0,0,255 = stable blue

Different easy colours: 128,0,0 = uninteresting purple, 64,0,0 = very darkish purple (nearly black)…

Now, mixing colours will get fascinating:

255,255,0 = yellow, 0,255,255 = cyan (mild blue), 255,0,255 = Magenta (mild purple), 255,128,0 = Orange, 128,128,0 = brown, 128,0,128 = purple, 255,200,255 = pink

Most paint packages (even microsoft paint) will allow you to experiment with these color hex map triplets. Go have some enjoyable with colours


That is in all probability essentially the most tough laptop idea to elucidate. Suppose again to your very early days at main faculty. The instructor would have instructed you that there are solely ten symbols for writing numbers: 0123456789. So whereas counting, you may solely get so far as 9, then you definitely run out of symbols.

However a really vibrant particular person, found a good way to depend past this: the tens “column” (in addition to the tons of, 1000’s, and so on columns). So the quantity within the tens column represents “teams of ten”. Thus the quantity 423 means: 4 teams of hundred, plus 2 teams of ten, plus 3.

Computer systems signify numbers very otherwise to us. They use a system referred to as binary… however we’ll use hexadecimal, as a result of it is rather easy and fast to translate between binary and hex.

Now, we are able to work together with computer systems (utilizing numbers) in 2 methods:

– We use decimal, and the pc converts decimal numbers into binary (straightforward for us, however can decelerate the pc)

– We use hex, and the pc converts to binary (tough for us, however the laptop converts hex to binary MUCH quicker than decimal to binary)

So what’s hex? Effectively, as a substitute of getting solely ten symbols to signify numbers, we use sixteen symbols: 0123456789ABCDEF.

Now, we are able to depend from 0 to “F”, and after that we begin utilizing the “tens” column (technically, it ought to in all probability be referred to as a sixteens column). Thus after F, we’ve got 10, and if we maintain counting, we get: 11, 12, 13, … 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, … 29, 2A, … 2F, 30, …3F, and so on.

One query that usually comes up is, what occurs after 9F? Why A0 in fact, adopted by: A1, A2, … A9, AA, AB, … AF, B0, B1, … BF, C0, and so on. all the way in which as much as FF.

After that, you may go to 100, 101, 102, … 10F, 110, 111, and so on.

To recover from the preliminary studying curve, many individuals use translation tables (or calculators), in order that after they see F, they’ll determine it really means fifteen.

In order that we do not get confused between decimal and hex, hex numbers often have a # image in entrance, so #10 is definitely 16 Decimal., and #FF is definitely 255.


Now we are able to mix half 1 and half 2. Colours will be represented utilizing hex values from #00 – #FF (ie 0 – 255).

To signify black, we’ve got: #000000 (ie 00, 00, 00 : we put a zero within the tens column to maintain the general size the identical)

#FFFFFF = white (255,255,255)

#808080 = mid gray (#80 = 128)

#00FF00 = stable inexperienced

So thats it. Its an extended rationalization, however nearly anybody ought to be capable to learn it and perceive it, and you’ll be in your method to creating colourful internet pages.

Leave a Reply

Your email address will not be published. Required fields are marked *