Key Concepts

Review core concepts you need to learn to master this subject

Color Name Keywords

CSS Color Alpha Values

CSS Hexadecimal Colors

CSS HSL Colors

CSS rgb() Colors

Color Name Keywords

h1 {
  color: aqua;
}

li {
  color: khaki;
}

Color name keywords can be used to set color property values for elements in CSS.

CSS Color
Lesson 1 of 1
  1. 1
    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 advant…
    Start
  2. 2
    Foreground vs Background
    Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects: 1. The foreground color 2. The background color Foreg…
    Start
  3. 3
    Hexadecimal
    One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by…
    Start
  4. 4
    RGB Colors
    There is another syntax for representing RGB values that uses decimal numbers. It looks like this: h1 { color: rgb(23, 45, 23); } Here, each of the three values represents a color component, an…
    Start
  5. 5
    Hex and RGB
    The hexadecimal and RGB color system can represent many more colors than the small set of CSS named colors. We can use this new set of colors to refine our web page’s style. In both hex and decima…
    Start
  6. 6
    Hue, Saturation, and Lightness
    The RGB color scheme is convenient because it’s very close to how computers represent colors internally. There’s another equally powerful system in CSS called the hue-saturation-lightness color sch…
    Start
  7. 7
    Opacity and Alpha
    All of the colors we’ve seen so far have been opaque, or non-transparent. When we overlap two opaque elements, nothing from the bottom element shows through the top element. In this exercise, we’ll…
    Start
  8. 8
    Color Review
    We’ve completed our extensive tour of the colors in CSS! Let’s review the key information we’ve learned. There are four ways to represent color in CSS: * Named colors — there are 147 named…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo