A vivid medium teal, white text passes AA
What color is teal?
The CSS named color teal is #008080, or rgb(0 128 128): a vivid medium teal in plain words. White text on it reaches 4.77:1, passing WCAG AA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | teal |
| Hex | #008080 |
| RGB | rgb(0 128 128) |
| HSL | hsl(180 100% 25%) |
| OKLCH | oklch(54.3% 0.093 194.8) |
| Nearest Tailwind color | teal-700 #00786f, 0.032 away in OKLab |
| White text | 4.77:1: AA passes, AAA fails, large text passes |
| Black text | 4.40:1: AA fails, AAA fails, large text passes |
About teal
In OKLCH terms teal has a lightness of 54.3%, a chroma of 0.093 and a hue of 194.8 degrees, a vivid medium teal to the eye. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Its HSL lightness, 25%, says little about how light teal looks; OKLCH, made to match the eye, measures 54.3%, 29 points away. Among the CSS keywords, darkcyan (#008b8b) comes closest at 0.034 in OKLab, close enough to stand in for it in a sketch.
With white text, teal passes AA at 4.77:1. Black text, at 4.40:1, does not. Its neighbors in the hue-sorted list of names are darkcyan and darkslategray.
The closest Tailwind 4.3.3 color is teal-700, 0.032 away in OKLab, so bg-teal-700 comes near; bg-[#008080] gives the color itself.
Tints and shades
- #dbe9e9
- #b7d4d3
- #93bebe
- #6ea9a9
- #469594
- #008080
- #006363
- #004848
- #002e2e
- #001616
- #000303
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #008080
- #bdfef2
- #006f72
- #88cfdb
- #002530
Locked as the first of five swatches, teal gets #bdfef2, #006f72, #88cfdb, #002530 from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.
Using teal
As a text color, teal on a white page gives the same 4.77:1.
.notice {
background-color: teal; /* #008080 */
color: white; /* 4.77:1 */
}Common questions
Does white text pass WCAG AA on teal?
Yes. White text measures 4.77:1 on teal, above the 4.5:1 that WCAG AA asks of body text.
Can teal be written in OKLCH?
Yes: oklch(54.3% 0.093 194.8), computed from #008080. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to teal?
Yes: darkcyan (#008b8b) is the nearest, 0.034 away in OKLab, then seagreen at 0.080.