Shades of Red

Reds sit at the start of the hue wheel, from about 345° through 0° to 10° in HSL. What separates a red from its neighbors is lightness and saturation: raise the lightness far enough and a red turns pink, lower both lightness and saturation and it becomes brown or maroon. Pure red, #FF0000, is the most saturated red an sRGB screen can show; in OKLCH it is oklch(62.8% 0.2577 29.23), a high chroma of 0.2577. In RGB terms, a strong red keeps the red channel high and the other two low, as in firebrick's rgb(178, 34, 34).

The CSS named reds run from bright to deep. Crimson (#DC143C) leans slightly toward pink at 348°. Firebrick (#B22222) and darkred (#8B0000) keep the pure 0° hue while dropping lightness, and indianred (#CD5C5C) is a softer, less saturated red that works well in muted palettes.

9 red CSS color names

Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.

Using red in design

Red is the default signal for errors, destructive actions and alerts, and it adds urgency to sale badges and notification counts. That association cuts both ways: if your brand color is red, define a separate error red that looks clearly different, or every primary button will read like a delete action. Deep reds such as firebrick and darkred also work as rich accents in food, sports and luxury branding.

Accessibility tip: pure #FF0000 on white measures 3.99:1, under the 4.5:1 WCAG AA minimum for body text. For error messages, use a darker red such as firebrick (6.67:1 on white), and pair the color with an icon or label.

Other color families

Related tools