What colors go with red?

Red pairs well with neutrals (white, black, gray, cream) and with its complementary color, green. For softer combinations, use analogous hues like orange and burgundy, or split-complementary palettes with teal and violet.

Red Colors — HEX, RGB, HSL, Shades & Complementary

Q: What is the purest red hex code?

The purest red in the sRGB color space is #FF0000 — RGB (255, 0, 0). It sits at hue 0° on the color wheel with 100% saturation and 50% lightness in HSL.

Q: What is the complementary color of red?

The complementary color of red is green, because it sits directly opposite red (0°) on the color wheel at approximately 180°. Split-complementary partners are yellow-green and blue-green, at 150° and 210°.

Q: Is red accessible for text?

Red is tricky for text because it has relatively low luminance. On white, a mid red like #DC2626 reaches only about 4.8:1 — barely passing AA. For body copy on light backgrounds, use a darker red such as #991B1B or #7F1D1D. Never rely on red alone to signal error state.

Red 200 · Soft

#FECACA rgb 254, 202, 202

HSL 0°, 96%, 89%

Red 500 · Base

#EF4444 rgb 239, 68, 68

HSL 0°, 84%, 60%

Red 800 · Deep

#991B1B rgb 153, 27, 27

HSL 0°, 70%, 35%

Red color reference

Common reds used across design, along with their hex, RGB and HSL values. Click any row to copy the hex value.

Name	HEX	RGB	HSL
Red 100	`#FECACA`	254, 202, 202	0°, 96%, 89%
Red 200	`#FCA5A5`	252, 165, 165	0°, 94%, 82%
Red 300	`#F87171`	248, 113, 113	0°, 91%, 71%
Red 400	`#EF4444`	239, 68, 68	0°, 84%, 60%
Red 500	`#DC2626`	220, 38, 38	0°, 72%, 51%
Red 600	`#B91C1C`	185, 28, 28	0°, 74%, 42%
Red 700	`#991B1B`	153, 27, 27	0°, 70%, 35%
Red 800	`#7F1D1D`	127, 29, 29	0°, 63%, 31%
Red 900	`#450A0A`	69, 10, 10	0°, 75%, 15%

Named reds

Commonly used named reds from CSS and design practice.

Red (pure) #FF0000

Crimson #DC143C

Firebrick #B22222

Maroon #800000

Dark red #8B0000

Indian red #CD5C5C

Dark salmon #E9967A

Tomato #FF6347

Orange red #FF4500

Brown (named) #A52A2A

Complementary and harmonious colors

Red sits at 0° on the color wheel. Here are the relationships that pair well with red for accessible, professional designs.

Relationship	Angle	Example hue
Complementary	180°	Green
Split-complementary	150° / 210°	Lime green / Blue-green
Triadic	120° / 240°	Yellow / Blue
Analogous	−30° / +30°	Magenta / Orange

#450A0A

#991B1B

#DC2626

#EF4444

#FCA5A5

#FECACA

Red in design and accessibility

Red is one of the most emotionally powerful colors on the spectrum. It draws attention quickly and is often associated with urgency, energy and appetite. In UI work it is the default color for error states and destructive actions, but its use must be handled carefully because it is the most common color vision deficiency.

Common uses in interfaces

Error and validation messages — the classic application.
Destructive actions — delete, remove, cancel account.
Notifications and badges — drawing attention to unread items.
Brand accents — food, sports, entertainment, sale prices.

Accessibility notes

Red text on white backgrounds rarely reaches AAA contrast. For body copy, use a darker red (#991B1B or darker). Never use red alone to convey an error — pair it with an icon, a label or a pattern, because red-green color vision deficiency affects roughly 8% of men.

Contrast tip

Check every foreground/background pair before shipping. Use our contrast checker to test in seconds.

Frequently asked questions

What is the purest red hex code?

The purest red in sRGB is #FF0000 — RGB (255, 0, 0). It sits at hue 0° on the color wheel with 100% saturation and 50% lightness. In practice, most professional designs avoid pure red because it can feel harsh; softer reds like #DC2626 or #EF4444 feel more refined.

What colors go well with red?

Neutrals — white, cream, black, gray — form a universally safe backdrop. For a controlled accent, pair red with its complementary color (green), or use analogous colors like orange and burgundy for warmth. Split-complementary palettes with teal and violet produce a more modern feel.

What is the complementary color of red?

Green. Red sits at 0° and green sits at 180° on the RYB and HSL color wheels, making them opposites. In practice most designers soften the pair — for example deep red with muted sage green — because full-saturation complementary pairs vibrate visually.

Is red accessible for text?

Red is difficult for text because it has relatively low luminance. On white, mid-reds like #EF4444 only reach about 3.8:1, which fails AA for body copy. Use a darker red such as #991B1B for text, and reserve bright reds for accents and icons.

How do I generate a full red scale?

Use our shades generator. Enter any red as the base color and it produces an 11-step 50–950 scale, ready to paste into CSS variables or a Tailwind config.