Generate Color Schemes From Images in 2 Minutes

16 April 2009 ~ 12 Comments

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.

12 Responses to “Generate Color Schemes From Images in 2 Minutes”

  1. Steven Bradely 16 April 2009 at 1:26 pm Permalink

    Nice tip Raymond. I’m always grabbing colors from images to use in a color palette, but I never thought to pixelate the image first. Thanks. I will be using this.

  2. FreelancerCrowd 16 April 2009 at 2:47 pm Permalink

    Fast and smart indeed. Thank you!

  3. Louis 16 April 2009 at 9:57 pm Permalink

    Nice, simple method. I’ll definitely keep this in mind. Thanks.

  4. Max 17 April 2009 at 2:29 am Permalink

    http://colorhunter.com/ – there is an easier option. This site does all the work

  5. Josh L 17 April 2009 at 3:41 am Permalink

    Great tip! Will be using this one in the future for sure.

  6. Art2code 17 April 2009 at 3:19 pm Permalink

    very good tip! thx

  7. Raymond Selda 23 April 2009 at 10:22 am Permalink

    Thank you so much for the comment guys!

    @Steven: Yeah, the tip was so simple and amazing!

    @Max: Thanks for suggesting Color Hunter

  8. Andrew Clark 6 May 2009 at 4:52 pm Permalink

    Hi,

    If you haven’t tried http://kuler.adobe.com then you definitely should. You can upload a photo and really mess with the colours.

  9. Lauren 11 September 2009 at 12:28 am Permalink

    I’ve enjoyed your blog articles! Thanks for this quick and easy tip.

  10. Schoschie 14 January 2010 at 12:40 am Permalink

    Or use http://pictaculous.com/ – a nice service that does exactly this.
    [Not affiliated with them]

  11. Logon 27 February 2010 at 6:41 pm Permalink

    Nice tip! Very simple and very useful!


Leave a Reply