Colors EncyclopediaUse this color
Create with Teal
Open a professional color tool with #008080 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Teal and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-teal: #008080;
.bg-teal { background-color: #008080; }
.text-teal { color: #008080; }Color history, meaning and use · Editorially reviewed
About Teal Color
The color name Teal developed from the name of the small waterfowl rather than from a manufactured pigment. Merriam-Webster traces the bird name to Middle English tele and records its use from the fourteenth century; the modern color term preserves the link with the blue-green markings associated with teal ducks.
Teal occupies the working space between blue and green, so it can borrow the visual calm of blue while retaining some of green’s organic character. That dual reading helps explain its frequent use in interfaces, healthcare communication, hospitality, and interiors where a cooler alternative to conventional green is needed.
Teal is a variable color category. The HEX value on this page is one stable digital reference within that broader blue-green range.
WCAG Accessibility
Contrast checks for Teal against black and white text.
Black text4.4:1AA Fail
White text4.77:1AA Pass
Downloadable color reference infographic
Teal Color Reference Infographic
Save a high-resolution infographic of Teal, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.17
Black text4.4:1AA Fail
White text4.77:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#008080",
"rgb": [
0,
128,
128
],
"hsl": [
180,
100,
25
],
"cmyk": [
100,
0,
0,
50
],
"luminance": 0.17,
"contrast": {
"black": 4.4,
"white": 4.77
}
}WCAG
{
"AA": [
"#FFFFFF"
],
"AAA": []
}Harmonies
{
"complementary": "#800000",
"analogous": [
"#008040",
"#004080"
],
"triadic": [
"#80007F",
"#7F8000"
],
"tetradic": [
"#400080",
"#800000",
"#408000"
],
"splitComplementary": [
"#800040",
"#804000"
],
"monochromatic": [
"#00DBDB",
"#008080",
"#002424"
]
}Variants
{
"light": "#00DBDB",
"dark": "#002424",
"saturated": "#007F80",
"desaturated": "#0E7171",
"pastel": "#13ECEC",
"neon": "#00A8A8"
}Pairings
{
"best": [
"#FFFFFF",
"#800000",
"#008040",
"#004080"
],
"avoid": [
"#0E7171",
"#00DBDB"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#00DBDB",
"#0E7171"
]
}Knowledge graph
{
"nearestColors": [
"peacock-teal",
"dark-cyan",
"pine-green",
"sea-blue",
"cerulean"
],
"generatedPalettes": [
"teal"
],
"generatedComparisons": [
"dark-cyan-vs-teal",
"peacock-teal-vs-teal",
"pine-green-vs-teal",
"teal-vs-turquoise"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/balanced",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/teal",
"/wcag/teal",
"/css/colors/teal",
"/hex/008080",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/balanced",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/teal"
],
"related": [
"/colors/peacock-teal",
"/colors/dark-cyan",
"/colors/pine-green",
"/colors/sea-blue",
"/colors/cerulean",
"/compare/dark-cyan-vs-teal",
"/compare/peacock-teal-vs-teal",
"/compare/pine-green-vs-teal",
"/compare/teal-vs-turquoise",
"/harmonies/teal",
"/wcag/teal",
"/css/colors/teal",
"/hex/008080",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "teal",
"name": "Teal",
"hex": "#008080",
"family": "cyan",
"temperature": "cool",
"tone": [
"balanced",
"vibrant"
],
"uses": [
"healthcare",
"SaaS",
"accent colors"
],
"psychology": {
"associations": [
"clarity",
"calm",
"freshness"
],
"contexts": [
"medical interfaces",
"education",
"technology"
],
"avoidIn": [
"heritage luxury palettes"
]
},
"aliases": [],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"tags": [
"cyan",
"cool",
"balanced",
"vibrant",
"healthcare",
"saas",
"accent-colors",
"clarity",
"calm",
"freshness"
],
"popularity": 65,
"rgb": [
0,
128,
128
],
"hsl": [
180,
100,
25
],
"cmyk": [
100,
0,
0,
50
],
"luminance": 0.17,
"contrast": {
"black": 4.4,
"white": 4.77
},
"harmonies": {
"complementary": "#800000",
"analogous": [
"#008040",
"#004080"
],
"triadic": [
"#80007F",
"#7F8000"
],
"tetradic": [
"#400080",
"#800000",
"#408000"
],
"splitComplementary": [
"#800040",
"#804000"
],
"monochromatic": [
"#00DBDB",
"#008080",
"#002424"
]
},
"variants": {
"light": "#00DBDB",
"dark": "#002424",
"saturated": "#007F80",
"desaturated": "#0E7171",
"pastel": "#13ECEC",
"neon": "#00A8A8"
},
"wcag": {
"AA": [
"#FFFFFF"
],
"AAA": []
},
"css": {
"variable": "--color-teal: #008080;",
"utility": ".bg-teal { background-color: #008080; }",
"textUtility": ".text-teal { color: #008080; }"
},
"nearestColors": [
"peacock-teal",
"dark-cyan",
"pine-green",
"sea-blue",
"cerulean"
],
"generatedPalettes": [
"teal"
],
"generatedComparisons": [
"dark-cyan-vs-teal",
"peacock-teal-vs-teal",
"pine-green-vs-teal",
"teal-vs-turquoise"
],
"relatedFamilies": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/balanced",
"/colors/by-tone/vibrant"
],
"relatedTools": [
"/harmonies/teal",
"/wcag/teal",
"/css/colors/teal",
"/hex/008080",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/cyan",
"/colors/by-temperature/cool",
"/colors/by-tone/balanced",
"/colors/by-tone/vibrant"
],
"narrower": [
"/palettes/teal"
],
"related": [
"/colors/peacock-teal",
"/colors/dark-cyan",
"/colors/pine-green",
"/colors/sea-blue",
"/colors/cerulean",
"/compare/dark-cyan-vs-teal",
"/compare/peacock-teal-vs-teal",
"/compare/pine-green-vs-teal",
"/compare/teal-vs-turquoise",
"/harmonies/teal",
"/wcag/teal",
"/css/colors/teal",
"/hex/008080",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#800000",
"#008040",
"#004080"
],
"avoid": [
"#0E7171",
"#00DBDB"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#00DBDB",
"#0E7171"
]
}
}