Jan
What Color Would You Like?
by admin
I’ve had a couple of emails, asking me how do I know the hexadecimal number for the colors I used in the WordPress series of articles. Rather than answer them in an email, I figure others may have the same question, so I decided to post the answer here for all to see.
On a computer every color you see on the screen is made from a combination of three colors Red, Green and Blue or RGB. Each of these colors can have a value between 0 and 255.
Two easy colors are Black and White, Black is an absence of any color so the R,G & B would be 0,0,0. White is the opposite it is a combination of all colors (remember the Floyd’s Darkside of the Moon cover? White light hits the prism and a rainbow of colors come out the other side), so the R,G & B is 255,255,255.
Number Systems
But what’s this hexadecimal you ask? Us humans have eight fingers and two thumbs, this helped form our counting system - decimal, as in a base of 10. Computers only have two fingers, on and off or 0 and 1, so their counting system is binary. But for us humans, this is just too hard, for example 105 would be 1101001 (and you thought roman numerals were hard!).
It was decided that instead of counting in binary, we would use hexadecimal which is a base of 16. Now we only have ten numbers, 0 to 9, so for the other six numbers we use the letters a to f, with a being 10 and f is 15. So to count from 0 to 16 in hexadecimal would be 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a , b, c, d, e, f and 10.
CSS
A hexadecimal number is denoted by placing a # before the number. White is either RGB(255,255,255) in decimal or #ffffff in hexadecimal. One nice thing about hexadecimal is that if each pair of numbers are the same (ff ff ff) then you need only one of each (f f f) and that is written as #fff.
Some colors can be expressed by their name for example black or white. But remembering which colors are allowed in which browser (yes the list of named colors is different depending on the browser used!) is too much like work, life’s too short. Which would you rather type RGB(255,255,255) or #fff?
So where do I get the numbers from?
In time you will be able to figure out the numbers for a color with a little logic. For example yellow is a combination of red and green so that would be #ffff00 (#ff0) and if you wanted a pale yellow then increase the value of blue, say, #ffff88 (#ff8).
If you have PhotoShop, you can use it’s color picker, just click on the color you want and the hexadecimal value for it is at the bottom of the color picker. Most other art packages like the Gimp, PSP or even Flash have a similar option.
If you’re on a PC you can download Visual Color Picker 2.6 at no cost. It will also let grab a color from the screen.
If you want one that’s web based, there’s one at Site Pro Central. It’s not just a color picker, it shows other colors that harmonize with the color you pick. Good for deciding on color schemes.
Tags: binary, color, color picker, hexadecimal, photoshop, rgb
Category General |
Print This Post
|
One of my favorite FireFox add ons is called ColorZilla. It places a little eyedropper icon at the bottom left of the FireFox window. By clicking on that icon you can then find the hex code for any color on any website or in any picture on the web. For instance, I can tell that the box in which I am currently typing is #EFFECF. Quite the useful little tool if you do any designing for the web whatsoever.
Anyway, if you’re a FireFox user, you can download the extension here: http://www.iosart.com/firefox/colorzilla/
Just thought I’d share!
What a brilliant explanation! Of course, I have a two-year degree in electronics and so I have coded in binary (aka machine language - i rather like it actually ;).
You do say it rather well though.
And now I know how it works!
Pam Hoffman
@Aubrey: thx for that, I don’t associate art with browsers
and completely forgot about tColorzilla.
@Pam: Ah ASM sweet memories
I much prefer it to these so called higher level languages, it just seems so much more direct without all the waffle.
Colin King’s last blog post..What Color Would You Like?
Very good info! I have used Photoshop before to change the background color on my blog to match my homemade headers, but It’s not something I think people generally know.
For the GNOME desktop based Linux users there is a nice tool available called Agave. Agave is a useful color picker if you need to get the hexadecimal code for a color, but it can also be used to create a whole suite of colors for a website or theme. There are screen shots at http://home.gna.org/colorscheme/screenshots.shtml.
(The package is part of the Debian and Ubuntu Repositories so those users can install it via sudo apt-get install agave in a terminal or by searching for it in Synaptic.
Great post by the way!
@Mary: Thx for the comps
Though it is very easy, people in general freeze at the thought of “programming”.
Cool post..
(am visiting a post a day of ur’s.. damn.. ur sticking me on to this.
I use paint.net for my imaging needs(haven’t got much professional need. its small, easy and after all its free!
@Vish: Haven’t tried that as I have PhotoShop, but you could try the Gimp. It is pretty close to PhotoShop and is free.