CSS named color
Teal
#008080
HEX
#008080RGB
rgb(0, 128, 128)HSL
hsl(180, 100%, 25%)OKLCH
oklch(54.31% 0.0927 194.77)NAME
tealPalette
Complementary
180° on the color wheelAnalogous
±30° around the base hueLeft
#008040
Right
#004080
Triadic
±120° for harmonic contrastTriad 1
#80007F
Triad 2
#7F8000
Shades
Lighter and darker variantsCSS usage
By name
color: teal;
background-color: teal;By HEX
color: #008080;
background-color: #008080;By RGB
color: rgb(0, 128, 128);
background-color: rgb(0, 128, 128);By HSL
color: hsl(180, 100%, 25%);
background-color: hsl(180, 100%, 25%);WCAG contrast vs white
Aa
4.77:1
AA
WCAG contrast vs black
Aa
4.40:1
AA (large text)
Related colors
FAQ — Teal
What is the HEX code for Teal?
The HEX code for Teal is #008080. It's one of the 148 named CSS colors and can be used directly in CSS as color: teal; or color: #008080;
What is Teal in RGB?
Teal in RGB is rgb(0, 128, 128) — red 0, green 128, blue 128.
What is Teal in HSL?
Teal in HSL is hsl(180, 100%, 25%) — hue 180°, saturation 100%, lightness 25%.
What is the complementary color of Teal?
The complementary color (directly opposite Teal on the color wheel) is #800000. The two together produce maximum contrast.
Is white text readable on Teal?
The WCAG contrast ratio against white (#FFFFFF) is 4.77:1, and against black (#000000) it's 4.40:1. White text is more readable. WCAG recommends at least 4.5:1 for body text.