Color family
Cyan and Teal Colors: Names, HEX Codes & Shades
The cyan and teal family sits between green and blue, at hue angles of roughly 160° to 195°. It includes bright cyan, turquoise, and deeper teal and dark cyan. The family URLs for teal, turquoise and aqua all lead to this page.
Brightness varies widely. Cyan (#00FFFF) is extremely light, with 1.25:1 contrast against white, while teal (#008080) reaches 4.77:1 and works for text and buttons. In CSS, cyan and aqua are the same color.
Cyan / Teal colors at a glance
27cyan / teal colors in the library
49%average HSL lightness
87%average HSL saturation
30%reach 4.5:1 contrast with white text
70%reach 4.5:1 contrast with black text
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Light Cyan | #E0FFFF | hsl(180, 100%, 94%) |
| Darkest | Dark Teal | #014D4E | hsl(181, 97%, 15%) |
| Most saturated | Teal | #008080 | hsl(180, 100%, 25%) |
| Least saturated | Gray Teal | #5E9B8A | hsl(163, 24%, 49%) |
Popular cyan / teal colors
Using cyan / teal colors
- Calm interface accents and links, using a teal that has good contrast on white.
- Water, travel, health and technology themes.
- A secondary color beside orange or coral, which sit opposite teal on the wheel.
- Charts that need a cool, clear accent.
Bright cyan is hard to read on white. Use a deeper teal for text, and keep bright cyan for backgrounds behind dark text or for fills on dark pages.
Teal pairs well with white, near-black and warm neutrals such as cream or sand.
All 27 cyan / teal colors
Bright Aqua#0BF9EA
Bright Cyan#41FDFE
Bright Teal#01F9C6
Bright Turquoise#0FFEF9
Cyan#00FFFF
Dark Aqua#05696B
Dark Cyan#008B8B
Dark Teal#014D4E
Dark Turquoise#00CED1
Deep Aqua#08787F
Deep Teal#00555A
Deep Turquoise#017374
Dusty Teal#4C9085
Gray Teal#5E9B8A
Ice#D6FFFA
Light Aqua#8CFFDB
Light Cyan#E0FFFF
Medium Turquoise#48D1CC
Ocean#017B92
Pale Aqua#B8FFEB
Pale Cyan#B7FFFA
Pale Turquoise#AFEEEE
Petrol#005F6A
Sea#3C9992
Teal#008080
Topaz#13BBAF
Turquoise#40E0D0