Color family
Red Colors: Names, HEX Codes & Shades
Red sits at the start of the color wheel, at a hue angle near 0°. In this library the red family runs from bright reds such as red and crimson to deep, dark reds such as maroon and burgundy. Lighter, softer reds are filed under pink and muted, earthy reds under brown, so every color appears in exactly one family.
Reds change a lot with lightness. Pure red (#FF0000) has a contrast ratio of 3.99:1 with white, just short of the 4.5:1 WCAG AA level for normal-size text, while the darker firebrick (#B22222) reaches 6.67:1. Open any color to see its exact contrast ratios, shades and matching colors.
Red colors at a glance
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Blush | #F29E8E | hsl(10, 79%, 75%) |
| Darkest | Dark Maroon | #3C0008 | hsl(352, 100%, 12%) |
| Most saturated | Violet Red | #A50055 | hsl(329, 100%, 32%) |
| Least saturated | Dark Rose | #B5485D | hsl(348, 43%, 50%) |
Popular red colors
Using red colors
- Calls to action, sale badges and notification dots, where red draws the eye quickly.
- Error messages and destructive actions in interfaces, a widely followed convention. Add an icon or a text label so the meaning does not depend on color alone.
- Brand colors, where a deep red and a bright red give a design a very different tone.
- Charts and maps that need one strong warm accent.
Many reds are too light for small text on white. Check the contrast ratio on each color's page and aim for 4.5:1 or higher.
Red and green can look alike to people with red-green color blindness, the most common kind. Do not use them as the only difference between two states, and test your pair in the color blindness simulator.