Generate Color Schemes From Images in 2 Minutes

Today I’m going to share with you a quick 2-minute tip on how to generate color schemes from images using Photoshop. I learned this tip from Tessa Blakeley Silver’s WordPress Theme Design book which is a very wonderful resource on learning how to develop WordPress themes and I would suggest you check it out.

Step One: Pick Your Image

Let’s imagine that we’re designing a website for a beach resort. Just pick an image that is most appealing to you or an image that you would use on your website banner. In my case I used a stock image of a small ship in a beach from Stock.xchng. Take note not to pick an image with a watermark because it will affect the output of our palette.

small ship in beach

Step Two: Pixelate Your Image

Open up your image in Photoshop, then go to the Filter menu, select Pixelate then Mosaic.

Photoshop Filter | Pixelate | Mosaic command

The Mosaic command will turn your image into huge pixels. The larger the cell size, the fewer colors you have to deal with but the colors become more muted. A cell size of 50 to 100 for a 72 dpi web image is enough. You might need to make your cell size larger for images with higher resolutions.

Image turned into huge pixels

Step Three: Pick your colors!

Once you have applied the Mosaic filter, you can now select your favorite colors. You can do this is by double-clicking the foreground palette in the toolbar. This will open up the color picker dialog box in which you can get the hex number of a color.

Color Picker Dialog Box

Below is the color palette I’ve chosen. You can just list down the hex value of each color so you can use it in your CSS file.

Beach Resort Color Palette

I hope this little tip will be helpful in creating your color palettes. Do you have any other methods that you would like to share? I would love to hear them in the comments. Thank you.

11 thoughts on “Generate Color Schemes From Images in 2 Minutes

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>