Colors & Units

Color formats

#rrggbb hex, rgb(r, g, b), rgba(r, g, b, a) with transparency, and hsl(hue, sat%, light%) — hsl is often the most intuitive for tweaking shades.

Colors side by side

All four describe the same shade of blue.

.a { color: #264de4; }
.b { color: rgb(38, 77, 228); }
.c { color: rgba(38, 77, 228, 0.8); }
.d { color: hsl(226, 79%, 52%); }

Absolute vs relative units

px is absolute — fixed size. em is relative to the parent's font size (compounds when nested). rem is relative to the root font size (predictable). %, vw, vh are relative to the container or viewport.

Prefer rem for text

rem sizes scale correctly when a user changes their browser's default font size — better accessibility than fixed px.