How To Create A Color Palette From An Image Using Kuler

Tweet

kuler-logo

If you find it difficult to come up with color schemes, Kuler is a fantastic tool, both for getting other people’s color schemes and also for creating your own. Kuler is owned by Adobe and free to use. One feature that I really enjoy using, and use quite a bit, is the ability to create a color theme from an image.

Let’s say you’re working on a website or design project and you have a particular image that you want to use in the header or as a major part of the overall look and feel. By using colors from that photograph you will be able to create a nice, cohesive color scheme that works well. Here’s how to do it.

  1. If you’re not already a Kuler member, sign up for a free account. If you are a member, sign in.
  2. On the home page of Kuler, you’ll see color themes created by yourself if you’ve saved some, or color themes created by the huge Kuler community.

    KulerHomePage 

  3. Click on the Create button and then choose From An Image.

    Create-FromAnImage

  4. A default image of a flower will appear, showing a number of points on the image from which the color palette is created. Click on the Upload button to choose your own image.
  5. Once your image is uploaded, Kuler will choose five points to form a palette. In the screen grab below you can see that I uploaded the famous painting Nighthawks by Edward Hopper.

    nighthawks

    Kuler has chosen five colors for me, but I don’t really like this scheme.

  6. To change the selected colors, you can simply click and drag the points around on the image.

    changingcolours

    As you drag each point, the color palette changes. The thing I really love about this is that often there are colors in images that you don’t even realize are there and you can put together some really lovely color schemes.

    finalpalette

  7. When you’re happy with your palette, give it a title and some descriptive keywords and save it. You can share your palettes with other people if you want to.
  8. To download your swatch as an Adobe Swatch Exchange file, click on the download icon and save to your computer. ASE files can be opened by any of the Adobe products from CS2 onwards, (It might actually be CS), where you can import the file in and see the palette as a swatch.

    downloadSwatch

    Do you use Kuler for creating color palettes? What other methods do you use to create palettes for web design?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.