Hexadecimal and Colors

This week will be more related to the Front End side of web development. So I thought about colors which are used everywhere. The web is one of the technologies that uses all the human senses, it evolved to become an everyday tool and entertainment.
Today I will teach you how to calculate hexadecimal numbers and how they can be related to numbers.

Hexa-decimal: Hexa comes from the Greek word héx which means six. The decimal I’m sure that you already now.
Decimal numbers run from 0-9.

81 (decimal):
multiply the left by 10, (8x10)
multiply the right by 1, (1x1)
We get 81 decimal.
81 (hexadecimal):
multiply the left by 16, (8x16)
multiply the right by 16, (1x1)
By adding them we get 129 hexadecimal!

When we work with colors particularly RGB, the minimum value is 0 and maximum is 255.
With hexadecimal numbers we work with 3 pairs of Red, Green and Blue, hence RGB.
_ _  _ _  _ _
R     G     B

The minimum pair is 00 and maximum FF. Oh! Letters? Yes, I will show you in a bit how this works. As I said above the decimal numbers are limited to 0-9, so a few engineers had to figure out a way to solve the problem. To get things working they assigned the following values:

A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Few examples:

#FF0000
Red: (15x16) + (15x1) = 255
Green: (0x16) + (0x1) = 0
Blue: (0x16) + (0x1) = 0
Yes, you got it right, the color is full red! My favorite color.

#83d900
Red: (8x16) + (3x1) = 131
Green: (13x16) + (9x1) = 217
Blue: (0x16) + (0x1) = 0

#efcc3a
Red: (14x16) + (15x1) = 239
Green: (11x16) + (11x1) = 187
Blue: (3x16) + (10x1) = 58

And that’s it! You know how to calculate hexadecimal number and how they are related to numbers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s