LESSON 6

Colors

Learning objective: Set colors using names, hex, RGB, and HSL.

Understand

CSS offers several ways to express color.

You can use color names (red), hex codes (#ff5733), rgb(), and hsl(). Hex and rgb are the most common; hsl is handy for adjusting lightness. Use color for text and background-color for backgrounds.

Analogy: Color formats are like different ways to name the same paint: by label or by exact mix.

See It in Action

The same idea in several formats:

h1 { color: #6c63ff; }
p  { color: rgb(200, 60, 60); }
a  { color: hsl(210, 90%, 55%); }
How it works: Each rule sets a text color using a different notation — hex, rgb, and hsl — all valid and interchangeable.

Try It Yourself

  1. Set a heading color with a hex code.
  2. Set a paragraph color with rgb().
  3. Adjust an hsl lightness value and compare.

Quick Quiz

Which is a valid hex color?

Challenge

Create a small palette using a hex, an rgb, and an hsl color.

Success condition: Your page uses three colors written in three different formats.