- Measurements
- URLs
- Basic Colors
- Color with Alpha Transparency
- Creating and Maintaining Color Palettes
This chapter is from the book
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.