Generate and Apply a Web Color Scheme - dummies

By David Karlins, Doug Sahlin

Many very useful resources for generating color schemes are available online. These resources allow you to define color schemes based on a color, an image, or even a mood. Adobe Kuler (pronounced cool-er, as in, “I’m cooler than you are”) is among the top online web design resources. It’s free, although you have to register with Adobe to use all the features.

ColorSchemer (a free version available for online use only) has a clean, intuitive toolset for generating colors based on a starter color.


When you go to Kuler online, you can begin to define a color scheme by entering a color name, a color value, or a word into the search box. Enter “winter” into the search box, and you are presented with a variety of winter-themed color schemes.


Clicking the Make Changes to This Theme and View Color Values button in Kuler displays the values of the colors in your generated color scheme.


After Kuler displays the hexadecimal values for the colors in your color scheme, you can simply copy and paste those values into a text file (using your word processor or text editor) and then copy and paste them into a CSS.

If you’re working entirely within the Adobe Creative Suite system, you can generate an ASE (Adobe Swatch Exchange) file. These ASE files can be loaded into the Swatches panel in Illustrator and other CS6 applications (although not Dreamweaver) and used to create artwork.

The following figure shows a Kuler-generated color scheme imported into the Illustrator CS6 Swatches panel. You can navigate to and display a saved ASE file with Illustrator’s Swatch Libraries menu.


Again, and to be clear, you don’t need any Adobe products to grab a color scheme from Kuler. The most basic technique for capturing hexadecimal values generated by Kuler (or any other color scheme tool) is to copy and paste those hexadecimal values into any document file (using Word, Notepad, TextEdit, or anything else) and then save them.

Or even scribble them on a scratch pad with a pen and later type them into an HTML file or CSS.