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.
- If 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:
- Film Palettes extracts colors from still frames of popular movies for your viewing pleasure.
- Designer Hyo Taek Kim made an awesome palette study of Studio Miyazaki, Disney and Pixar films; they’re also available as prints from society6
- There’s a Tumblr specifically devoted to palettes from Wes Anderson movies, because of course there is.
- Design firm Stuff and Nonsense have a lovely breakdown of how they extracted colors from the Martin Scorsese film “Hugo” using Adobe Color CC to come up with the palette for a project.
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.