Color guide

Emerald Color

#10B981

emerald color codes

HEX

#10B981

RGB

rgb(16, 185, 129)

HSL

hsl(160, 84%, 39%)

OKLCH

oklch(80% 0.04 197)

What emerald means

Emerald is deep, jewel-toned growth. Richer than basic green, it feels established and secure.

How to use it in design

Strong for finance success states, eco-premium brands and elegant dark themes.

Color combinations with emerald

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

Complementary

Maximum contrast: #10B981 + #B71048

Open in editor

Analogous

Harmony at ±30°: #10B72C · #10B981 · #109BB7

Triadic

Even 120° spacing: #10B981 · #7F10B7 · #B77F10

emerald color shades (50–900 scale)

Ready-to-use tailwind-style scale generated from #10B981.

50 #000000

100 #000000

200 #010504

300 #082C20

400 #0F6649

500 #10B77F

600 #37E2A9

700 #75E5C0

800 #9FE9D0

900 #B6EDDB

Colors that go well with emerald

FAQ about the emerald color

What is the HEX code of emerald?

A widely used hex value for emerald is #10B981, which equals rgb(16, 185, 129). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (160°).

What colors go well with emerald?

emerald pairs beautifully with gold, cream, navy, coral. Its complementary color is #B71048, and a classic triadic scheme adds #7F10B7 and #B77F10.

Is emerald 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 emerald in text or UI elements.

Create your own emerald palette

Generate harmonious combinations from #10B981 in seconds.

Open the palette generator