17 Adding a Splash of Color to Your Web Designs

 

This chapter covers

  • Learning some color basics
  • Understanding how CSS uses color
  • Applying a color to an element
  • Adding background colors
  • Creating color gradients

CSS offers all the tools you need to add a dash of color to your headings, text, links, and backgrounds. You learn how to use those tools in this chapter, as well as how to wield a few special CSS tools for building color gradients that will raise the “wow” factor on your pages.

Understanding Colors

The good news about understanding colors for use in your web designs is that you don’t need to understand much. Yes, entire books have been written on color theory, but you don’t need to be versed in the physics of optics to create beautiful, eye-catching web pages. You need to know only two things: how to combine colors harmoniously and how colors are created. For the former, see “Choosing Harmonious Colors” later in this chapter; for the latter, read on.

    Color is free on the web. While there's nothing wrong with black text on white, using different colors not only adds a bit of drama to the page, but also creates hierarchies for the content. —Erik Spiekermann

Adding Colors with CSS

Lesson 17.1: Specifying Red, Green, and Blue with the rgb() Function

Lesson 17.2: Specifying Hue, Saturation, and Lightness with the hsl() Function

Lesson 17.3: Using RGB Hex Codes

Choosing Harmonious Colors

Using the Color Scheme Calculator

Applying a Color Gradient

Lesson 17.4: Creating a Linear Gradient

Lesson 17.5: Creating a Radial Gradient

Summary