In this tutorial, I will attempt to explain how hex colours work.
Firstly, what is HEX?
Hex, or Hexadecimal, is basically a number system with a different base to our "Decimal" system.
The number system Hex is based on a base of 16 (0,1,2...8,9,A,B,C...E,F) (as opposed to the Decimal system which has a base of 10 - from 0~9)
Here is a little example....
| Dec |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
| Hex |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
Ok...now that I've explained what Hex is...it isn't hard to guess why #FF9919 or #D390E1 are called "Hex Colours".
Firstly, the method your monitor displays the light is by 3 beams of light at the back of the monitor hitting the screen. So the colours are mixed with the concept of light, and not paints. Note: Mixing Light Beams and Paint is DIFFERENT.
| |
LIGHT |
PAINT |
| White |
ALL colours |
NO colours |
| Black |
NO Colours |
All Colours |
Hex colours are written with six characters...# FF FF FF, and each group of two represents a beam of colour. The strogest beam you can get is 'FF' and the weakest '00'.
So...in order of strength (weakest to strongest):
00, 01, 02, ... 0A, 0B, 0C ... 0F, 10, 11, 12, 13 ... 1F , 20, 21, 22 ... etc till F9, FA, FB, FC, FD, FE, FF.
The three beams of light are RED, GREEN and BLUE. Each beam of light is also given in the order RED, GREEN, BLUE - or RGB. So when you write #FF0000 you are telling the computer - full blast on the RED beam, and nothing for the GREEN and BLUE beam, so you will get RED! ...can you guess what #00FF00, #0000FF, #000000 and #FFFFFF are?
Obviously, not all colours are just plain red, green, blue, black or white - there are lots of colours in between, and to achieve this you just simply alther the value of the hex.
So if you want say, yellow, you need to mix Red and Green - so in other words, you want the computer to 'shoot' both Red and Green beams of light while leaving out blue...so you will enter #FFFF00
So...lets get creative...if we chose #F842D1 as our colour (that was completely random) we could say...
RED we have F8, that is rather strong
GREEN we have 42 pretty weak
BLUE we have D1...not the strongest...but nearly there.
Most of the colours are rather strong, so we could presume it is a light colour.
So, we could predict that the colour would be...reddish pink (purple is red and blue, and pink in my opinion is a lighter shade of purple)..and maybe a invisible (or really really light) tinge of green...lets see if i'm correct...HELLO WORLD ... sort of there...what do you think?
lets try...#F8CFD1 - same as above except I've made green alot stronger...lets see what it looks like HELLO WORLD - note, how the colour shade has changed and it it is much paler colour - tending towards white (#FFFFFF).
I hope I've been making sense...now to the last little bit. Lets say, we want navy blue. we know that blue is the last group of 2....and navy blue is rather dark, so lets stay away from the letters...lets try using 22, 66 and 99...
#000022
#000066
#000099
You see how as the numbers increase the lighter the colour gets?
Ok..i hope that this tutorial has allowed you to understand more of how the colour works, and let you remember colours slightly with more ease. You can also try and create your own colours and you will know what to do if you got the perfect orange, but need it a bit lighter or darker or something of the like. Have fun making up colours, but don't get carried away!
