When I teach a workshop on Adobe Dreamweaver or Fireworks, I’m always amazed by a question that participants don’t ask. (No, not: “Why can’t you and the laser pointer get along?” That question, I’m afraid, has no answer.)
The question that’s never asked is: “How do you come up with these colors?“ And by “these colors”, I’m referring to the 6-digit hexadecimal codes that we use throughout the Dreamweaver and Fireworks workshops to designate specific colors for display on the web:
What In The Heck are Hexadecimal Values?
Hexadecimal values are a way of encoding color information for the computer. Each hexadecimal value corresponds to an RGB value. RGB is an acronym for Red/Green/Blue, and is the model by which monitors and screens display color; in fact, the first two digits of a hexadecimal value correspond to the amount of red in the color, the second two digits correspond to the amount of green, and the last two digits the amount of blue.
Most of the time in our workshops, however, we don’t utilize a nice-looking hexadecimal like #008000 for plain green; rather, we might type in a value like #A8CD12 for a specific shade of lime green. And then we’ll type in a different hexadecimal value to get a dark green that will look good next to the lime green. Well, how do we find a set of colors that will work well together?
Understanding how color works (and how colors work together) is a field of study into itself, and it’s also big business. (For examples, see the Pantone Fashion Color Report or the Benjamin Moore Colors For Your Home 2009.) What if you don’t have a giant budget to hire color nerds or the time to engage in learning color theory?
Four Tools to Find a Pleasing Color Palette
Here are four free tools to help you find a color palette both for onscreen work as well as for desktop publishing projects:
- Color Scheme Designer (http://colorschemedesigner.com/): The Color Scheme Designer allows you to play on a color wheel, and the designer will keep your color choices on track within a particular color grouping (monochromatic, complementary, analogic, etc.) and show you a preview of a suggested color scheme. As a bonus, this is the only tool that allows you to adjust the color scheme to see what it will look like to people who have color blindness or other color vision deficiencies.
- Color Palette Generator (http://www.degraeve.com/color-palette/): Here, the idea is that you’ll provide the URL of an image you like, and the Color Palette Generator will assemble a color palette for you based on the colors in the image, complete with hexadecimal values.
- Kuler – available via: kuler.adobe.com, Photoshop CS4 (In the File Menu, go to Window –> Extensions –> Kuler), or Fireworks CS4 (in the File Menu, go to Window –> Extensions –> Kuler): A cross between a social networking tool and a color palette generator, Kuler allows users to create and submit color palettes for rating by other users. It is possible to browse and search user-submitted palettes, and, once you find one you like, to edit it and create something new. While the user interface is not quite as simple as that of the Color Scheme Designer, it also allows you to limit colors within groups (monochromatic, complementary, etc.) and adjust the brightness easily.
- Colour Lovers (http://www.colourlovers.com/): A site dedicated not only to color palettes, but also individual colors and patterns suitable for web page backgrounds. Like Kuler, it supports browsing or searching, and once you find a palette you like, you can download it in various file formats (once you complete the free site registration, that is). Also a nice resource for color inspiration.