|
Every good web designer knows that one of the key elements in design is colour. For online media, each colour is given a special number or code. For example, something faily common, such as "white" would be written as "#FFFFFF." These codes, however, can have more than just letters, they can have numbers too. Take "#af6d13" for instance - which happens to be a nice shade of orange. As you can see, they can become quite complicated!
To find them, we use a grahic program of some sort. For the purpose of this tutorial, I'm going to use Paint Shop Pro (PSP) V.9
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Going Longhand
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Open up the image you want to sample a colour from. It can be any picture, even a black & white one :)
2. From the menu on the left-hand side of the screen, select the (eye) dropper tool 
3. Hover over the image until you find the colour you are looking for, and then click on it.
4. On the right-hand side of your screen you should see a swatch filled with the selected colour. Double click on this swatch.
5. A large box should pop up that tells you all about the selected colour. In the bottom right corner, there is a little area that is labled: "HTML." In the following text area is your code. Simply copy and paste ;)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
A Quick Shortcut
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Of course, there is a faster way to get things done, but you have to set it up first :) To do this, open the "General Program Preferences" window. (File > Preferences > General Program Preferences)
2. On the tab that reads "Patterns", check the boxes that say:
A) Display colors in RGB format (a.k.a Red, Green, Blue format)
B) Hexadecimal display (this tells PSP to put the code in HTML)
3. What we've just done is adjust the way that PSP presents the information about the selected colour. Hover over the image and look at the little tan box that pops up.
M'kay, time for a little "Before and After," shall we? In the example above, I want to find out the colour of this dogz' nose, a lovely shade of pink >^^<
When I hover with the dropper tool on the nose, a little box pops up in HSL format. Hm... nice, but not what I want. But after following steps 1 & 2:
Look at the tan box now -- it has all the information we need. All that is left to do is put the puzzle pieces together. Simply take the code from the "R,G, & B" (ignore the "O") catagories and write it out. In this case, our final HTML code would be #D59390
| 
