19 Shades of Teal with Hex Codes
Teal sits between blue and green, ranging from deep petrol to bright turquoise. Dark teals feel sophisticated; bright aquas feel tropical and fresh.
The teal hex code is #008080
#008080 is rgb(0, 128, 128) in RGB, hsl(180, 100%, 25%) in HSL, and about cmyk(100%, 0%, 0%, 50%) in CMYK. Every other teal below has its own hex code.
#008080rgb(0, 128, 128)hsl(180, 100%, 25%)Named Teal Colors and Their Hex Codes
Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.
#003B46rgb(0, 59, 70)#005F5Frgb(0, 95, 95)#005F6Argb(0, 95, 106)#008080rgb(0, 128, 128)#008B8Brgb(0, 139, 139)#5F9EA0rgb(95, 158, 160)#20B2AArgb(32, 178, 170)#43B3AErgb(67, 179, 174)#0ABAB5rgb(10, 186, 181)#00CCCCrgb(0, 204, 204)#00CED1rgb(0, 206, 209)#48D1CCrgb(72, 209, 204)#40E0D0rgb(64, 224, 208)#ACE1AFrgb(172, 225, 175)#93E9BErgb(147, 233, 190)#AFEEEErgb(175, 238, 238)#00FFFFrgb(0, 255, 255)#7FFFD4rgb(127, 255, 212)#E0FFFFrgb(224, 255, 255)Teal Color Chart: Hex, RGB, HSL & CMYK
Every teal above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.
| Name | Hex | RGB | HSL | CMYK |
|---|---|---|---|---|
| Deep Teal | #003B46 | rgb(0, 59, 70) | hsl(189, 100%, 14%) | cmyk(100%, 16%, 0%, 73%) |
| Peacock | #005F5F | rgb(0, 95, 95) | hsl(180, 100%, 19%) | cmyk(100%, 0%, 0%, 63%) |
| Petrol | #005F6A | rgb(0, 95, 106) | hsl(186, 100%, 21%) | cmyk(100%, 10%, 0%, 58%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | cmyk(100%, 0%, 0%, 50%) |
| DarkCyan | #008B8B | rgb(0, 139, 139) | hsl(180, 100%, 27%) | cmyk(100%, 0%, 0%, 45%) |
| CadetBlue | #5F9EA0 | rgb(95, 158, 160) | hsl(182, 25%, 50%) | cmyk(41%, 1%, 0%, 37%) |
| LightSeaGreen | #20B2AA | rgb(32, 178, 170) | hsl(177, 70%, 41%) | cmyk(82%, 0%, 4%, 30%) |
| Verdigris | #43B3AE | rgb(67, 179, 174) | hsl(177, 46%, 48%) | cmyk(63%, 0%, 3%, 30%) |
| Tiffany Blue | #0ABAB5 | rgb(10, 186, 181) | hsl(178, 90%, 38%) | cmyk(95%, 0%, 3%, 27%) |
| Robin Egg Blue | #00CCCC | rgb(0, 204, 204) | hsl(180, 100%, 40%) | cmyk(100%, 0%, 0%, 20%) |
| DarkTurquoise | #00CED1 | rgb(0, 206, 209) | hsl(181, 100%, 41%) | cmyk(100%, 1%, 0%, 18%) |
| MediumTurquoise | #48D1CC | rgb(72, 209, 204) | hsl(178, 60%, 55%) | cmyk(66%, 0%, 2%, 18%) |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) | cmyk(71%, 0%, 7%, 12%) |
| Celadon | #ACE1AF | rgb(172, 225, 175) | hsl(123, 47%, 78%) | cmyk(24%, 0%, 22%, 12%) |
| Seafoam | #93E9BE | rgb(147, 233, 190) | hsl(150, 66%, 75%) | cmyk(37%, 0%, 18%, 9%) |
| PaleTurquoise | #AFEEEE | rgb(175, 238, 238) | hsl(180, 65%, 81%) | cmyk(26%, 0%, 0%, 7%) |
| Aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | cmyk(100%, 0%, 0%, 0%) |
| Aquamarine | #7FFFD4 | rgb(127, 255, 212) | hsl(160, 100%, 75%) | cmyk(50%, 0%, 17%, 0%) |
| LightCyan | #E0FFFF | rgb(224, 255, 255) | hsl(180, 100%, 94%) | cmyk(12%, 0%, 0%, 0%) |
Teal Scale from Light to Dark
A 12-step lightness scale built from the core teal hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.
Need a perceptually even ramp with semantic roles and contrast evidence? Generate teal design tokens.
What Teal Communicates
Teal is the most useful "second brand color" in software because it is distinct from the blue everyone uses without being as loud as green or orange. Deep teals hold text contrast well; bright aquas and cyans are almost purely decorative because their luminance is too high for body text on white.
Where teal works well
- Secondary brand colors that need separation from a blue primary
- Health, travel, and water-adjacent brands
- Chart series that must stay distinguishable from both blue and green
- Dark-theme accents, where teal keeps its identity better than blue
Colors that pair with teal
Copy the Teal Palette as CSS
Every shade on this page as CSS custom properties, ready to paste into a stylesheet.
:root {
--teal-deep-teal: #003B46;
--teal-peacock: #005F5F;
--teal-petrol: #005F6A;
--teal-teal: #008080;
--teal-darkcyan: #008B8B;
--teal-cadetblue: #5F9EA0;
--teal-lightseagreen: #20B2AA;
--teal-verdigris: #43B3AE;
--teal-tiffany-blue: #0ABAB5;
--teal-robin-egg-blue: #00CCCC;
--teal-darkturquoise: #00CED1;
--teal-mediumturquoise: #48D1CC;
--teal-turquoise: #40E0D0;
--teal-celadon: #ACE1AF;
--teal-seafoam: #93E9BE;
--teal-paleturquoise: #AFEEEE;
--teal-aqua: #00FFFF;
--teal-aquamarine: #7FFFD4;
--teal-lightcyan: #E0FFFF;
}Teal Color Questions
What is the hex code for teal?
The standard teal hex code is #008080, which is rgb(0, 128, 128) in RGB and hsl(180, 100%, 25%) in HSL. There is no single "correct" teal — this page lists 19 named teal shades with their own hex codes.
How many shades of teal are there?
Displays can render millions of distinct teal values, so any count is a matter of which ones have names. This page lists 19 named shades of teal, combining the CSS color keywords with widely used teal names from design and print references, plus a generated 12-step lightness scale.
Can I use teal for text on a white background?
#008080 scores 4.77:1 against white. WCAG 2.2 asks for at least 4.5:1 for normal body text and 3:1 for large text, so this shade passes for normal text. Check any specific pairing in the contrast checker.
What colors go well with teal?
orange, pink, brown all pair well with teal. For a specific shade, open its color page to see the complementary, analogous, and triadic colors calculated from its exact hue.