Color Directory
Teal
An even blend of blue and green, cool and balanced.
#008080
- HEX
- #008080
- RGB
- rgb(0, 128, 128)
- HSL
- hsl(180, 100%, 25%)
Check Teal
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #008080 in the sRGB colour space.
About this entry
What it is
An even blend of blue and green, cool and balanced.
Health tech, data visualisation and contrast against warm oranges.
Copy & use
How to copy and use teal
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Health tech, data visualisation and contrast against warm oranges.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from teal
Each step is mixed toward white or black from #008080 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#99CCCC
rgb(153, 204, 204)
Lighter 30%
#4DA6A6
rgb(77, 166, 166)
- Base
Base
#008080
rgb(0, 128, 128)
Darker 30%
#005A5A
rgb(0, 90, 90)
Darker 60%
#003333
rgb(0, 51, 51)
Name & pairing
Where teal comes from
Named after the duck, which has a band of this colour on its head. It sits between blue and green, and small shifts either way change it from corporate to tropical.
What to put beside it
Reliable with cream and coral. Because it is close to the middle of the spectrum it needs a genuinely warm accent to feel balanced rather than clinical.
Common questions
Using teal
What is teal?
An even blend of blue and green, cool and balanced. Health tech, data visualisation and contrast against warm oranges.
What are the colour values for Teal?
Teal is HEX #008080, RGB rgb(0, 128, 128), HSL hsl(180, 100%, 25%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will teal work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise teal after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing