Shades of teal
Teal is a dark blue-green; turquoise and aqua are its lighter, brighter relatives. Together they bridge the blue and green families. Below: 26 named shades with hex codes — tap a chip to copy it.
8 light · 12 medium · 6 dark · 7 pass AA as text on white
- Light Cyan#E0FFFF
- Celeste#B2FFFF
- Aquamarine#7FFFD4
- Pale Turquoise#AFEEEE
- Aqua#00FFFF
- Cyan#00FFFF
- Powder Blue#B0E0E6
- Turquoise#40E0D0
- Medium Turquoise#48D1CC
- Medium Aquamarine#66CDAA
- Dark Turquoise#00CED1
- Robin egg blue#00CCCC
- Tiffany blue#0ABAB5
- Verdigris#43B3AE
- Light Sea Green#20B2AA
- Keppel#3AB09E
- Cadet Blue#5F9EA0
- Persian green#00A693
- Dark Cyan#008B8B
- Viridian#40826D
- Teal#008080
- Teal blue#367588
- Skobeloff#007474
- Tropical rain forest#00755E
- Dark Slate Gray#2F4F4F
- Midnight green#004953
Teal color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Light CyanCSS | #E0FFFF | rgb(224, 255, 255) | hsl(180 100% 94%) | (12%, 0%, 0%, 0%) | 1.05:1 | 19.91:1 |
| Celeste | #B2FFFF | rgb(178, 255, 255) | hsl(180 100% 85%) | (30%, 0%, 0%, 0%) | 1.12:1 | 18.64:1 |
| AquamarineCSS | #7FFFD4 | rgb(127, 255, 212) | hsl(160 100% 75%) | (50%, 0%, 17%, 0%) | 1.22:1 | 17.15:1 |
| Pale TurquoiseCSS | #AFEEEE | rgb(175, 238, 238) | hsl(180 65% 81%) | (26%, 0%, 0%, 7%) | 1.28:1 | 16.28:1 |
| AquaCSS | #00FFFF | rgb(0, 255, 255) | hsl(180 100% 50%) | (100%, 0%, 0%, 0%) | 1.25:1 | 16.74:1 |
| CyanCSS | #00FFFF | rgb(0, 255, 255) | hsl(180 100% 50%) | (100%, 0%, 0%, 0%) | 1.25:1 | 16.74:1 |
| Powder BlueCSS | #B0E0E6 | rgb(176, 224, 230) | hsl(187 52% 80%) | (23%, 3%, 0%, 10%) | 1.43:1 | 14.65:1 |
| TurquoiseCSS | #40E0D0 | rgb(64, 224, 208) | hsl(174 72% 56%) | (71%, 0%, 7%, 12%) | 1.64:1 | 12.79:1 |
| Medium TurquoiseCSS | #48D1CC | rgb(72, 209, 204) | hsl(178 60% 55%) | (66%, 0%, 2%, 18%) | 1.86:1 | 11.26:1 |
| Medium AquamarineCSS | #66CDAA | rgb(102, 205, 170) | hsl(160 51% 60%) | (50%, 0%, 17%, 20%) | 1.93:1 | 10.87:1 |
| Dark TurquoiseCSS | #00CED1 | rgb(0, 206, 209) | hsl(181 100% 41%) | (100%, 1%, 0%, 18%) | 1.95:1 | 10.74:1 |
| Robin egg blue | #00CCCC | rgb(0, 204, 204) | hsl(180 100% 40%) | (100%, 0%, 0%, 20%) | 1.99:1 | 10.50:1 |
| Tiffany blue | #0ABAB5 | rgb(10, 186, 181) | hsl(178 90% 38%) | (95%, 0%, 3%, 27%) | 2.41:1 | 8.70:1 |
| Verdigris | #43B3AE | rgb(67, 179, 174) | hsl(177 46% 48%) | (63%, 0%, 3%, 30%) | 2.53:1 | 8.29:1 |
| Light Sea GreenCSS | #20B2AA | rgb(32, 178, 170) | hsl(177 70% 41%) | (82%, 0%, 4%, 30%) | 2.62:1 | 8.01:1 |
| Keppel | #3AB09E | rgb(58, 176, 158) | hsl(171 50% 46%) | (67%, 0%, 10%, 31%) | 2.66:1 | 7.88:1 |
| Cadet BlueCSS | #5F9EA0 | rgb(95, 158, 160) | hsl(182 25% 50%) | (41%, 1%, 0%, 37%) | 3.05:1 | 6.88:1 |
| Persian green | #00A693 | rgb(0, 166, 147) | hsl(173 100% 33%) | (100%, 0%, 11%, 35%) | 3.05:1 | 6.87:1 |
| Dark CyanCSS | #008B8B | rgb(0, 139, 139) | hsl(180 100% 27%) | (100%, 0%, 0%, 45%) | 4.14:1 | 5.06:1 |
| Viridian | #40826D | rgb(64, 130, 109) | hsl(161 34% 38%) | (51%, 0%, 16%, 49%) | 4.53:1 | 4.63:1 |
| TealCSS | #008080 | rgb(0, 128, 128) | hsl(180 100% 25%) | (100%, 0%, 0%, 50%) | 4.77:1 | 4.39:1 |
| Teal blue | #367588 | rgb(54, 117, 136) | hsl(194 43% 37%) | (60%, 14%, 0%, 47%) | 5.17:1 | 4.05:1 |
| Skobeloff | #007474 | rgb(0, 116, 116) | hsl(180 100% 23%) | (100%, 0%, 0%, 55%) | 5.59:1 | 3.75:1 |
| Tropical rain forest | #00755E | rgb(0, 117, 94) | hsl(168 100% 23%) | (100%, 0%, 20%, 54%) | 5.66:1 | 3.70:1 |
| Dark Slate GrayCSS | #2F4F4F | rgb(47, 79, 79) | hsl(180 25% 25%) | (41%, 0%, 0%, 69%) | 8.92:1 | 2.35:1 |
| Midnight green | #004953 | rgb(0, 73, 83) | hsl(187 100% 16%) | (100%, 12%, 0%, 67%) | 10.10:1 | 2.07:1 |
Make your own shades of teal
Pick any teal and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using teal in design
Teal is popular for health and tech brands because it feels calm but less corporate than blue. Dark teals pass contrast as text; light aquas need dark text.
To pair it with other hues, start from the color wheel. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of teal are there?
There is no fixed number: screens can show millions of colors and any teal hue can be made lighter, darker or more muted. This page lists 26 named shades of teal — the CSS named colors that fall in the teal family plus widely used names such as tiffany blue, robin egg blue, celeste.
What is the hex code for teal?
There is no single official teal. The CSS keyword "teal" is #008080; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of teal?
In this list the lightest is Light Cyan (#E0FFFF) and the darkest is Midnight green (#004953), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of teal are readable as text on white?
7 of the 26 shades reach the WCAG AA ratio of 4.5:1 on white, for example Tropical rain forest (#00755E), Dark Slate Gray (#2F4F4F), Midnight green (#004953). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with teal?
Its complement on the color wheel gives the strongest contrast, neighbours within about 30° give calm harmony, and tinted neutrals tie it together. Try it in the color wheel.
What is the difference between a shade, a tint and a tone of teal?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of teal" means every variation of the hue, which is how this page uses it.