Color code and palette
Shades of Red
Red is a high-energy family associated with action, urgency and affection. This collection moves from soft rose tints to deep burgundy shades for interfaces, campaigns and brand systems.
Red
#EF4444
Color formats
The same base color in common web formats.
Shades
| Color | Name | HEX | RGB | HSL | Copy |
|---|---|---|---|---|---|
| Rose | #FFF1F2 | 255, 241, 242 | 356, 100%, 97% | ||
| Light Pink | #FFE4E6 | 255, 228, 230 | 356, 100%, 95% | ||
| Blush | #FECDD3 | 254, 205, 211 | 353, 96%, 90% | ||
| Salmon Pink | #FDA4AF | 253, 164, 175 | 353, 96%, 82% | ||
| Coral | #FB7185 | 251, 113, 133 | 351, 95%, 71% | ||
| Rose Red | #F43F5E | 244, 63, 94 | 350, 89%, 60% | ||
| Crimson | #E11D48 | 225, 29, 72 | 347, 77%, 50% | ||
| Ruby | #BE123C | 190, 18, 60 | 345, 83%, 41% | ||
| Burgundy | #9F1239 | 159, 18, 57 | 343, 80%, 35% | ||
| Maroon | #881337 | 136, 19, 55 | 342, 75%, 30% | ||
| Cherry | #FCA5A5 | 252, 165, 165 | 0, 94%, 82% | ||
| Tomato | #F87171 | 248, 113, 113 | 0, 91%, 71% | ||
| Red | #EF4444 | 239, 68, 68 | 0, 84%, 60% | ||
| Scarlet | #DC2626 | 220, 38, 38 | 0, 72%, 51% | ||
| Fire Red | #B91C1C | 185, 28, 28 | 0, 74%, 42% | ||
| Blood Red | #991B1B | 153, 27, 27 | 0, 70%, 35% | ||
| Dark Red | #7F1D1D | 127, 29, 29 | 0, 63%, 31% | ||
| Rust | #B45309 | 180, 83, 9 | 26, 90%, 37% | ||
| Brick | #9A3412 | 154, 52, 18 | 15, 79%, 34% | ||
| Wine | #7C2D12 | 124, 45, 18 | 15, 75%, 28% |
CSS keyword: red
In CSS you can write it as the keyword red.
Text contrast
These ratios use the WCAG relative luminance formula.
Aa White text 3.76:1
AA · Large text
Aa Black text 5.58:1
AA
Ways to use Red
Primary calls to action and alerts
Food, sports and entertainment branding
Warm accents against neutral backgrounds
Colors that go with Red
Color-wheel harmonies built from #EF4444. Click a swatch to copy it or open the set in the color wheel.
Split complementary
Open in color wheelA base plus the two neighbors of its complement — contrast with less tension.