I hope I’m not spoiling anything when I share that I often turn to photographs for color palette inspiration. Color is one of the hardest parts of design for me; there are so many colors! How to choose? How to narrow it down? Often, if I’m working on something that includes a photograph, I will look for colors that appear in the photograph to craft the palette.
Case in point, the current Kennedy Library web site.
When this was just a lowly comp and I was trying to determine the color scheme, I turned to the photograph of the magnolia tree that was getting front-and-center attention. (The tree, by the way, is in the library’s atrium and blooms February through March). I grabbed neutral colors from the cement and an orange-ish glow from the interior lights. The palette was understated and I hoped academic.I bring up this story to illustrate the coolness (and usefulness) of a new online tool, ColorSuckr.
ColorSuckr pulls (okay, sucks) out colors from any online .jpg you send its way (key point: you must send it the actual image URL, not just the page it is on). It then displays the colors, their RGB and hexidecimal values (with a nice nod to web color safe colors as an option). In addition, you can then choose any of the colors to see color palettes for that color specifically. If you click on a color within that new color palette you are taken to the long-time color-afficionado web site, colourlovers.com for more hex values and color options. Very cool. Very handy. Very clever.
Examples: Screenshots of the results for the magnolia photo
Click an image to see it larger
A better look at the color values
From ColorSuckr, I chose to view the photos which were most like the colors we use on the web site. You can see the hex values; I clicked “Show” to get the color schemes, which are to the right in the graphic.
Want to try it yourself?
- ColorSuckr web site
- Actual URL of magnolia photo from the Kennedy Library’s flickr site
- The results page I got from this photo on August 21, 2009