Colors

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to use CSS color formats

CSS gives you several ways to set colors. Color name is easy to read. HEX is commonly used in design systems. RGB/RGBA is handy when you also want to control opacity. In modern CSS, hsl() has become more popular too, letting you adjust color intuitively through hue, saturation, and lightness.

css

.hero-title {
  color: tomato;
}

.card {
  /* black background with 70% opacity */
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: 1px solid hsl(190, 90%, 60%);
}

You should see

The title will turn tomato-colored. The card's background will be a see-through dark color, with white text and a cyan-ish border.

Tip

If a brand website stores its colors in CSS variables, then whenever the brand color needs to change later, you only have to update it in one place.