Front photograph of a male peacock with spread tail

Sometimes the hue muse fails to strike; sometimes all you’re provided for the look and feel of a site is a web page the client likes, or a photograph, perhaps just a painting.

Moments like that make it difficult to come up with one of the defining characteristics of a site design: a strong, cohesive color theme. Using PhotoShop’s Eyedropper tool to extract image colors isn’t always helpful, as attempts to pick pixels are often stymied by artifacts and shading effects (although there are a few tricks that can help, discussed below). In such situations, a color extraction tool can open up many creative possibilities:

  • The DeGraeve color palette generator is the simplest and most straightforward of these: provided with an image URL, it generates pairs of extracted colors in hexadecimal, divided into “dull” and “vibrant” hues. colr.org works in a similar fashion, but pulls sampled colors one at a time from an image.
  • The CSS Drive Color Palette generator is another, more fully featured option: it can work from either a URL or an uploaded image, generates a wider range of extracted colors grouped in different ways, and can save the results as a CSS stylesheet or a PhotoShop swatches file.
  • Screenshot of an Adobe Color CC sampleIf you’re an Adobe subscriber, Adobe Color CC (previously known as Kuler) offers a similar feature, extracting colors from images based on “mood”; click on the camera icon at the top right of the Create screen to start the process.

Movies can be deeply inspirational for color, although the inexperienced eye often has a harder time spotting frame palettes (with the possible exception of the infamous “orange and teal” trend of the last few years). Thankfully there are some sites that make the work easier for you:

Ryan McGuire has drawn color inspiration from the world’s greatest artists for the excellent ColorLisa, which extracts web palettes from famous paintings.

You might also want to run a color extraction service locally, or as part of your own site. In that case, Vibrant.js and Color Palette Toolkit are your friends: while the former extracts colors from images withJavaScript, the Tooklit can also pull colors from ACO files, generates human names for them (a trend I’m a fan of) and creates lighter and darker shades if required. Live demos of both Color Palette Tookit and Vibrant.js are available.

Finally, ColorHunt is a curated collection of beautiful colors, updated daily… and because there probably isn’t enough Queen Bey in everyone’s life, a Tumblr of Beyoncé palettes.

Peacock photograph by Wilson Severino, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.