ways to use photoshop color picker

Photoshop color picker is a great tool for not only image manipulation, but website creation. The main ways I have used it are to pick my website colors and to create my header.

There are plenty of color picker websites that will help you find complimentary colors to use on your site, but I honestly had no idea they existed because I had always done it myself.

In Photoshop you get to the color picker by double clicking on the little block of color near the bottom left corner.

Then the color picker window will open.

You can slide the little white circle all around the square, as well as move the slider on the right up and down to change the range of colors. (I guess most people find this amount of colors overwhelming – but I like the huge variety.)

As you move the selector around, the value in the # box will change to give you your hex value. This is the color I chose for the background of my site.

I then made a blank window and used the paint bucket to fill it in this grey color.

I then used the color picker to choose a few different colors I liked and just slapped them on the grey.

Once I decided I liked the blue, I used the eyedropper tool and re-opened the color picker to grab the hex value.

I then used both of these values in my html and css, anywhere I wanted the colors.


The other way I used the color picker was to create my header, which is nothing more than an image file.

I opened a blank document, opened the color picker and this time, instead of randomly scrolling until I found a color I liked, I knew the color I wanted. I went to the bottom and typed the hex value into the # block.

From there I used the paint bucket to fill in the background which I then filled with text.

Since I know I used the same hex value in my html and my image, it will match seamlessly.

-Katrina Oscarson


~ by cupcakesupremacy on February 12, 2011.

%d bloggers like this: