Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Creating and Maintaining Color Palettes

Defining a color palette for use in a web site and sticking to that set of color values can be a useful tool for styling new elements on a site, providing a consistent appearance throughout a site, and making it easy to find color values when making site changes.

Design

Color theory is far outside the scope of this book and is something you could study for years; however, here are a few tips for choosing the color scheme for a web site:

  • Design applications such as Adobe Photoshop offer a detailed color picker that can be switched between RGB, HSL, and other color systems, making for easy translations into CSS units.
  • Adobe Kuler is a tool for creating, browsing, and bookmarking color swatches from your browser or your desktop. You can make swatches based on a color wheel or drawn from an uploaded image file (http://kuler.adobe.com/).

Maintenance

Maintaining consistent color usage across a large amount of CSS code can sometimes be difficult. Color units are defined in so many different declarations across so many different elements that it is easy to keep the shade of gray being used the same or know what color should be used for links. Here are some hits for making the task easier:

  • Pick one color unit type, and stick with it so searching for a color when it is time to change it is easier. Don't use #ff0000, rgb(100%,0,0) and the keyword red interchangeably.
  • Maintain a style guide that lists all the colors used on the site along with the preferred unit value to represent them, and use only these colors.
  • For complex or very large sites, consider using a CSS preprocessor like those discussed in Chapter 13 that allow you to define placeholders for color values and define a specific color value only once in your code.
  • + Share This
  • 🔖 Save To Your Account