Smashing Html5 : Working with Color Values - Creating a Color Scheme

If you’re a designer, you may be thinking, “How on earth am I ever going to get the colors I want with all these numbers?” If you’re a developer, you may wonder, “How can I know if the colors I use go together?” Both of these questions have the same answer: Kuler. Kuler is a site where you can enter a key color (base color) and, using different algorithms, Kuler works out which colors are compatible and presents the information for decimal and hexadecimal color values. Designers can put in any colors they want to use in creating their own color schemes and Kuler generates all the math; developers can put in the math, and Kuler generates color schemes.

You can find Kuler at http://kuler.adobe.com. It requires a Flash plug-in (which is already built into most browsers), but if your browser doesn’t have one you can get it for free at www.adobe.com/products/flashplayer. You can also download a Kuler widget that works on your desktop.

From a base color

To create a color scheme with Kuler, you begin with a base color and try it out with different algorithms to generate color schemes. Then you select an algorithm to show different ways that colors look good together. Based on color theory, you choose from analogous, monochromatic, triad, complementary, compound, shades, or custom. The custom category is for designers who use their artistic skills to generate a palette. (Developers are well served by one of the automatic algorithms.) Figure 1 shows a typical example of a color scheme centered on a base color using the triad algorithm.

From an image

In addition to creating a color palette from a base color, you also can load an image, and Kuler automatically generates a color scheme based on the image’s color. For example, Figure 1 shows two different images — a logo and a painting — with their respective color palettes.

Figure 1: A color scheme with base color.

Figure 2: Color schemes based on imported images.

Bad color combinations

In order to see the difference between using a good color scheme and a bad one, we’ll look at an example.The following figure shows what two identical Web pages shown in a mobile device look like with a color scheme based on a photo and one using an example of bad color from Cabarga’s book.

Good and bad color.

The figure on the left uses colors picked up from the photo, and the one on the right does not — plus, it’s just a bad combination.

When using an image, you can further modify the color scheme by selecting from several moods — colorful, bright, muted, deep, and dark. All color schemes can be saved and when loaded, they maintain all the information you need for entering color data into an HTML5 Web page.