Tutorial: How to extract a colour scheme from a photograph

Today I picked up on a neat little trick on how to extract a colour palette from a photograph. Imagine you stumble upon a gorgeous photo (or piece of digital art) which has this special colour scheme. You could use the eyedropper tool to extract each colour individually but there’s a slicker way of doing it. This tutorial teaches you how to convert a photo into a fully functional colour swatch palette using photoshop and illustrator.

intial photo
this is the photograph I got from flickr with nice warm colours which I want to use in a vector design. The first step is to open it in Photoshop.

mosaic 1
For CS3 users only: make a duplicate and convert the picture into a smart object. This way you can edit the mosaic effect without messing up the original photo.

mosaic 2
Go to filters > Pixelate > Mosaic and vary the cell size until you’re happy with the result. In my case 113 did the job. This is it for the Photoshop part.

import to Illustrator
The next step is to import our mosaic grid into Illustrator. If you’ve got an Ai file (preferably with the same, or larger dimensions) open you can simply drag an drop the layer from Photoshop.

live trace
This is were the magic happens. Making sure you have the content selected hit “Live Trace”.

option and expand
Choose the “Photo High Fidelity” Preset from the Live Trace options. The default setting of 64 for Max Colours should be enough. Change it if you used a smaller cell size for the Mosaic filter. Now hit Expand.

add colours
With the expanded mosaic still selected open the Swatches palette and from the option menu choose “Add Selected Colors”. That’s it. Now you’ve imported the colours from your intial photograph into the swatches gallery in Illustrator. Save it so you can use it for different projects.

Written by Franz Jeitz

Franz Jeitz is a freelance designer and owner of Fudgegraphics. Originally from Luxembourg he now lives in London. Franz loves design, music and is a tea enthusiast. Follow him on Twitter.

Join the Discussion:

16 Awesome Responses so far
  1. Nice tut, sometimes i just skip the applying the mosaic filter in photoshop by making the image really small in illustrator and rasterizing it :P

  2. Tina Frissora August 13th, 2009

    The steps in CS3 Illustrator were a bit different, but easy enough to figure out. I wanted to use the swatches created from the photo in PhotoShop, so I saved them from Illustrator and dragged the .ase file into the open PhotoShop window and they appeared in my swatches! Very cool! Thanks!

  3. This is a brilliant way of doing it. Much better than color picking.. regards, LaDonna.
    .-= Design Wannabe┬┤s last blog post: Toxel =-.

  4. Carrie schrepfer December 8th, 2009

    Have you used the Adobe Kuler? It does the same thing, but a bit more specific (i.e. do you want warm tones, cool tones, vibrant tones, etc.)

    I love it.

  5. Brilliant! …I had a “duh” moment reading this!

  6. many thanks for this handy & excellent tut

    :)

  7. Thanks Franz! Really wanted to know how to do this (:

  8. Owh… that’s work…. thank you so much..

  9. Sometimes it can be just this simple. As we use images a lot for inspiration on colors this is really an easy trick to extract the colors by hand. When you are in a hurry you can also try a online tool like; http://www.degraeve.com/color-palette/ its far from perfect but can help you out.

  10. Did you find a way to extract top colors from an image automatically without manual intervention? Let’s say we have a pattern of three colors with some haze in the image because of poor quality. It automatically gives me those top three used color in an image. Let me know if you are aware of something like this.

  11. Nice tip! Very easy & useful. Thanks

These Sites link here:

  1. Heads Up Seven Up Blogroll - June 16 | GrandmasterB dot com
  2. Hytrin.
  3. Color Palettes of Game Advertisements in German Video Game Entertainment Magazins | MINDsPAGE
  4. You are now listed on FAQPAL
  5. How to extract a colour scheme from a photograph | Digi-exposure.com

Comments are closed on this post.