CSS Colors

Lesson 1 of 16 Beginner Interactive

CSS provides several ways to define colors. Choosing the right color format depends on your project needs.

Color Formats

Named Colors — predefined names like red, blue, tomato
Hex Colors — 6-digit hexadecimal: #ff6347
RGB — red, green, blue values: rgb(255, 99, 71)
RGBA — RGB with alpha (opacity): rgba(255, 99, 71, 0.5)
HSL — hue, saturation, lightness: hsl(9, 100%, 64%)
HSLA — HSL with alpha: hsla(9, 100%, 64%, 0.5)

CSS Properties That Use Colors

color — text color
background-color — element background
border-color — border color
box-shadow — shadow color

Syntax

CSS

/* Named Color */
p { color: tomato; }

/* Hex Color */
h1 { color: #1e3a8a; }

/* RGB */
.box { background-color: rgb(37, 99, 235); }

/* RGBA with transparency */
.overlay { background-color: rgba(0, 0, 0, 0.5); }

/* HSL */
.badge { background-color: hsl(220, 80%, 50%); }

/* HSLA */
.shade { background-color: hsla(220, 80%, 50%, 0.3); }

CSS Color Formats

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Color Formats</title>
    <style>
        .named { color: tomato; }
        .hex   { color: #333333; background-color: #f0f0f0; }
        .rgb   { background-color: rgb(255, 200, 0); }
        .rgba  { background-color: rgba(0, 0, 0, 0.5); color: white; }
        .hsl   { color: hsl(210, 80%, 50%); }
    </style>
</head>
<body>
    <h1>CSS Color Formats</h1>
    <p class="named">Named color: color: tomato;</p>
    <p class="hex">Hex color: color: #333333 on background-color: #f0f0f0.</p>
    <p class="rgb">RGB: background-color: rgb(255, 200, 0).</p>
    <p class="rgba">RGBA: background-color: rgba(0, 0, 0, 0.5).</p>
    <p class="hsl">HSL: color: hsl(210, 80%, 50%).</p>
</body>
</html>

Try It Yourself

Practice

Exercise

Set the text color of all headings to a dark blue using hex color.

Answer

h1, h2, h3 {
    color: #1e3a8a;
}

Exercise

Create a semi-transparent red overlay using RGBA.

Answer

.overlay {
    background-color: rgba(255, 0, 0, 0.3);
}

Quick Quiz

What does the "a" in RGBA stand for?

alpha (opacity)

area

accent

alignment

The "a" stands for alpha, which controls the opacity/transparency of the color.

Which color format uses hue, saturation, and lightness?

RGB

Hex

HSL

CMYK

HSL stands for Hue, Saturation, Lightness.

Interview Questions

HSL is more intuitive for designers because you can easily adjust lightness and saturation. For example, making a color lighter means increasing the L value. HSL is also great for generating color palettes programmatically by varying hue while keeping saturation and lightness constant.

Opacity affects the entire element including all children, while RGBA only affects the specific color it is applied to. For example, rgba(0,0,0,0.5) on background-color makes only the background transparent, while opacity: 0.5 on the element makes the element and all its children transparent.

Next Lesson

Backgrounds