16 Different Shades of Teal (+ HEX codes)

Explore all shades of teal, from lighter to darker shades. See HEX codes, shade names, and teal color palettes. Click any shade to copy its HEX code.

Teal sits exactly between blue and green, which is why it feels considered rather than obvious — the colour a brand picks when blue is taken.

It is dark enough to carry white text and calm enough to use across a whole interface.

dew
#ebffff
oyster bay
#d1ffff
onahau
#b7ffff
anakiwa
#9dffff
aquamarine
#6affff
cyan / aqua
#36ffff
bright turquoise
#00e8e8
robin's egg blue
#00cece
pacific blue
#00b4b4
persian green
#009b9b
teal
#008181
blue stone
#006767
sherpa blue
#004d4d
deep teal
#003434
swamp
#001a1a
black
#000000

Teal: HEX & RGB Codes

teal has the following primary color codes:

HEX: #ebffff
RGB: (235, 255, 255).

Explore a wide range of teal shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!

Explore tints of teal

Dew
#ebffff
Dew
#ebffff
Twilight Blue
#f0ffff
Twilight Blue
#f0ffff
Twilight Blue
#f5ffff
Twilight Blue
#f5ffff
Twilight Blue
#f5ffff
Twilight Blue
#faffff
Twilight Blue
#faffff
White
#ffffff

Explore shades of teal

Bottle Green
#093434
Elephant
#154c4c
Casal
#256565
Ming
#3b8181
Breaker Bay
#559b9b
Neptune
#74b4b4
Half Baked
#94cccc
Jagged Ice
#bde5e5

teal in HEX, RGB, HSL and CMYK

HEX	#008080
RGB	rgb(0, 128, 128)
HSL	hsl(180, 100%, 25%)
CMYK	cmyk(100%, 0%, 0%, 50%)

Tints and shades of teal

Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.

Tints (lighter)

#00bcbc
#00f8f8
#36ffff
#72ffff
#aeffff
#ebffff

Shades (darker)

#006e6e
#005c5c
#004a4a
#003838
#002626
#001414

Colours that work with teal

Complementary

#008080 #800000

Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.

Analogous

#008040 #008080 #004080

Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.

Triadic

#008080 #80007f #7f8000

Three colours evenly spaced. Lively and balanced; let one dominate.

Text on teal

Example Primary text

White text on teal4.77:1AA

Example Primary text

Near-black text on teal3.72:1Large text only

Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker

teal shade chart

Shade chart showing five steps of teal, from light tint to deep shade

Right-click to save the chart, or copy the individual codes above.