Color guide

Teal Color

#14B8A6

teal color codes

HEX

#14B8A6

RGB

rgb(20, 184, 166)

HSL

hsl(173, 80%, 40%)

OKLCH

oklch(82% 0.04 236)

What teal means

Teal balances the calm of blue with the renewal of green. It feels balanced, clean and quietly confident.

How to use it in design

Excellent for healthcare, fintech and communication apps seeking a fresh but trustworthy look.

Color combinations with teal

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

Complementary

Maximum contrast: #14B8A6 + #B81427

Open in editor

Analogous

Harmony at ±30°: #14B853 · #14B8A6 · #1479B8

Triadic

Even 120° spacing: #14B8A6 · #A514B8 · #B8A514

teal color shades (50–900 scale)

Ready-to-use tailwind-style scale generated from #14B8A6.

50 #000000

100 #000000

200 #020908

300 #0A2F2B

400 #12685E

500 #14B8A5

600 #40DFCC

700 #7DE2D6

800 #A5E8E0

900 #BCECE7

Colors that go well with teal

FAQ about the teal color

What is the HEX code of teal?

A widely used hex value for teal is #14B8A6, which equals rgb(20, 184, 166). Depending on the shade you want, you can adjust saturation and lightness while keeping the same hue (173°).

What colors go well with teal?

teal pairs beautifully with coral, white, charcoal, gold. Its complementary color is #B81427, and a classic triadic scheme adds #A514B8 and #B8A514.

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

Create your own teal palette

Generate harmonious combinations from #14B8A6 in seconds.

Open the palette generator