HTML Colors

Understand the topic

Common CSS color notations include named colors, hexadecimal RGB, rgb(), and hsl(). The same notation can be used with color, background-color, border-color, and other color-accepting properties. Alpha adds transparency, so the effective contrast depends on what is behind the color. A palette reference helps consistency but does not replace contrast testing.

Worked example

<table><caption>Equivalent color notation examples</caption><tr><th scope="col">Notation</th><th scope="col">Example</th></tr><tr><td>Named</td><td>red</td></tr><tr><td>Hex</td><td>#ff0000</td></tr><tr><td>RGB</td><td>rgb(255 0 0)</td></tr><tr><td>HSL</td><td>hsl(0 100% 50%)</td></tr><tr><td>Transparent RGB</td><td>rgb(255 0 0 / 0.5)</td></tr></table>

The first four examples represent red. The final example is half-opaque red, which blends with its background.

Practice

Write a reusable CSS custom property for a dark green text color.

:root { --notice-text: #14532d; }
.notice { color: var(--notice-text); }

Common mistake

A color reference is not a guarantee of readable combinations. Check actual foreground and background pairs.

HTML documentation