Code Editor
Web Browser
CSS Color

Introduction to Color

CSS supports a wide variety of colors. These include named colors, like blue, black, and LimeGreen, along with colors described by a numeric value. Using a numeric system allows us to take advantage of the whole spectrum of colors that browsers support. In this lesson, we're going to explore all the color options CSS offers.

Colors in CSS can be described in three different ways:

  • Named colors — English words that describe colors, also called keyword colors
  • RGB — numeric values that describe a mix of red, green, and blue
  • HSL — numeric values that describe a mix of hue, saturation, and lightness

We'll learn about and explore the benefits of each of these in depth. Using only named colors, you may feel like you're picking labeled crayons out of a box. By the end of this lesson, you'll feel like a painter mixing paints on a palette.


Proceed to the next exercise when you are ready to begin.

Report a Bug
If you see a bug or any other issue with this page, please report it here.