Cool! Thanks for sharing.
This is a discussion on tut hex colors. within the Graphic Design forums, part of the Web Designing & Development category; In this tutorial, I will attempt to explain how hex colours work. Firstly, what is HEX? Hex, or Hexadecimal, is ...
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 I won’t go further into hex as this isn’t the main focus of the tutorial, but there is another tutorial all about Number Systems by Jester, if you wish to understand more about Hex.
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 [COLOR=#FF0000]RED[/COLOR], [COLOR=#00FF00]GREEN[/COLOR] and [COLOR=#0000FF]BLUE[/COLOR]. 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 [COLOR=#FF0000]RED[/COLOR]! ...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, [COLOR=#FFFF00]yellow[/COLOR], you need to mix [COLOR=#FF0000]Red[/COLOR] and [COLOR=#00FF00]Green[/COLOR] – 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…
[COLOR=#FF0000]RED[/COLOR] we have F8, that is rather strong
[COLOR=#00FF00]GREEN[/COLOR] we have 42 pretty weak
[COLOR=#0000FF]BLUE[/COLOR] 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… [COLOR=#F842D1]HELLO WORLD[/COLOR] ... 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 [COLOR=#F8CFD1]HELLO WORLD[/COLOR] – 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…
- [COLOR=#000022]000022[/COLOR]
- [COLOR=#000066]000066[/COLOR]
- [COLOR=#000099]000099[/COLOR]
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 awayhi
Cool! Thanks for sharing.
Buy / Sell / Trade Products and Services at our Webmaster Marketplace
61 Ways To Drive Targeted Traffic To Your Website
Page color is achieved using the BODY HTML element and coding the BGCOLOR attribute like this: <BODY BGCOLOR="thistle">
or else by coding a specific RGB Hexadecimal Color value like this: <BODY BGCOLOR="#D8BFD8">
Notice that the "#" pound sign (correctly called an octothorp) preceeds the hexadecimal number. Instead of saying hexadecimal, many people shorten the name to "hex value" or "rgb hex" and it means hexadecimal value. If you are using only the name of a color be sure to use quotes and do not allow spaces. Even if the name normally has a space, when used in HTML code there is no space in a named color. Light Blue becomes "lightblue".
Note: Code the background color of a page, even if you are using an image for the background. When the image cannot be viewed on a user's computer for any reason, the background color will show instead. If you do not specify your background Web page color, the color shown will be the default color setting in the user's browser.
Yes its awesome... Thanks for the information...
that's a big lesson in hexadecimals wow thanks
Bookmarks