How to Find the Best Web Host for Your Website
 
Web Design: Why Image and Monitor Resolution Matters
Web Design: How to Create Clickable Wireframes

Generate and Apply a Web Color Scheme

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.

image0.jpg

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.

image1.jpg

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.

image2.jpg

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.

image3.jpg

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.

blog comments powered by Disqus
How to Add Facebook Connect to Your Website
How to Define Goals Before Designing a Website
Web Design: Understanding Bitmaps and Vector Graphics
Web Design: Reduce Image Size by Limiting Colors
The Seven Rules of Web Site Design
Advertisement

Inside Dummies.com