Color guide

Red Color

#EF4444

red color codes

HEX
#EF4444
RGB
rgb(239, 68, 68)
HSL
hsl(0, 84%, 60%)
OKLCH
oklch(75% 0.04 68)

What red means

Red is the color of energy, passion and urgency. It raises attention levels and stimulates quick decision-making, which is why it dominates sale banners and call-to-action buttons.

How to use it in design

Use red sparingly as an accent: primary CTAs, badges and error states. Avoid large background areas in reading interfaces.

Color combinations with red

Harmonies calculated with color theory for the base hue 0°.

Complementary

Maximum contrast: #EF4444 + #43EFEF

Open in editor

Analogous

Harmony at ±30°: #EF4399 · #EF4444 · #EF9943

Triadic

Even 120° spacing: #EF4444 · #43EF43 · #4343EF

red color shades (50–900 scale)

Ready-to-use tailwind-style scale generated from #EF4444.

50 #3F1010
100 #451111
200 #5C1515
300 #861919
400 #C31C1C
500 #EF4343
600 #F09595
700 #F6CFCF
800 #FDF6F6
900 #FFFFFF

FAQ about the red color

What is the HEX code of red?

A widely used hex value for red is #EF4444, which equals rgb(239, 68, 68). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (0°).

What colors go well with red?

red pairs beautifully with white, charcoal, gold, navy. Its complementary color is #43EFEF, and a classic triadic scheme adds #43EF43 and #4343EF.

Is red accessible for text and backgrounds?

It depends on the contrast ratio against the other color. Use NanoPalettes's contrast checker to verify WCAG AA (4.5:1) and AAA (7:1) compliance before shipping red in text or UI elements.

Create your own red palette

Generate harmonious combinations from #EF4444 in seconds.

Open the palette generator