Red HEX Code
The HEX code for pure red is #FF0000. Red is one of the three primary colors in the RGB color model and represents maximum intensity in the red channel with no green or blue.
Red Color Values
| Format | Value |
|---|---|
| HEX | #FF0000 |
| RGB | rgb(255, 0, 0) |
| HSL | hsl(0, 100%, 50%) |
| CMYK | C:0 M:100 Y:100 K:0 |
Red Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Red | #FF6666 | Pastel red |
| Red | #FF0000 | Pure red |
| Dark Red | #8B0000 | Darkred |
| Crimson | #DC143C | Blue-tinted red |
| Maroon | #800000 | Dark brownish red |
| Scarlet | #FF2400 | Orange-tinted red |
| Cherry | #DE3163 | Pink-tinted red |
Red in Design
Red evokes:
- Urgency: Alerts, errors, warnings
- Energy: Sports, action, excitement
- Love: Valentine's Day, romance
- Danger: Stop signs, emergencies
CSS Usage
``css
.error {
color: #FF0000;
/* Or using the name */
color: red;
}
`
Brand Reds
| Brand | HEX |
|---|---|
| YouTube | #FF0000 |
| Netflix | #E50914 |
| Coca-Cola | #F40009 |
| Target | #CC0000 |
Red in Every Format
| Format | Value |
|---|---|
| HEX | #FF0000 |
| RGB | rgb(255, 0, 0) |
| HSL | hsl(0, 100%, 50%) |
| CMYK | cmyk(0%, 100%, 100%, 0%) |
| Nearest Tailwind | red-600 (#DC2626) |
About This Colour
Red is the CSS keyword for pure #FF0000 — full red, no green, no blue. It carries error and stop semantics in almost every interface convention, which is why using it decoratively fights your own users.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Red text on white | 4.00:1 | AA large text only |
| Red text on black | 5.25:1 | AA |
| White text on red | 4.00:1 | AA large text only |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Red passes on black, so reserve it for dark backgrounds.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #ff6666 |
| Base | #FF0000 |
| Darker (−20%) | #990000 |
| Complementary | #00ffff |
| Triadic | #00ff00, #0000ff |
Tints (toward white): #ff4040, #ff8080, #ffbfbfShades (toward black): #bf0000, #800000, #400000
Using It
`css
:root {
--red: #ff0000;
--red-light: #ff6666;
--red-dark: #990000;
}
.badge {
background: var(--red);
color: #fff;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.