Named color

Teal

Teal is a balanced and vibrant cyan color with HEX #008080. According to Colors Encyclopedia, it has RGB 0, 128, 128, HSL 180, 100%, 25%, cool temperature, and is useful for healthcare, SaaS, and accent colors.

#008080 cyan cool balanced vibrant

HEX #008080

RGB rgb(0, 128, 128)

HSL hsl(180 100% 25%)

CMYK cmyk(100, 0, 0, 50)

Luminance 0.17

Contrast Black 4.4:1White 4.77:1

CSS Utilities

--color-teal: #008080;
.bg-teal { background-color: #008080; }
.text-teal { color: #008080; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.17

Black text4.4:1AA Fail

White text4.77:1AA Pass

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured 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"
  ],
  "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"
    ]
  }
}

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"
  ],
  "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"
    ]
  },
  "pairings": {
    "best": [
      "#FFFFFF",
      "#800000",
      "#008040",
      "#004080"
    ],
    "avoid": [
      "#0E7171",
      "#00DBDB"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#FFFFFF"
    ],
    "lowContrast": [
      "#00DBDB",
      "#0E7171"
    ]
  }
}

Color meaning and use

About Teal Color

Teal sits in the cyan family with cool temperature and balanced and vibrant visual character. Standard CSS named color.

Its common associations include clarity, calm, and freshness, which makes it relevant for medical interfaces and education. In design work, Teal is most useful for healthcare, saas, and accent colors, especially when paired with white text for stronger contrast.

WCAG Accessibility

Contrast checks for Teal against black and white text.

Black text4.4:1AA Fail

White text4.77:1AA Pass

AA text options#FFFFFF

AAA text optionsNone in seed set

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Peacock Teal#00827F

Dark Cyan#008B8B

Pine Green#01796F

Sea Blue#006994

Cerulean#007BA7

Color Harmonies

Maroon#800000

#008040#008040

#004080#004080

#80007F#80007F

#7F8000#7F8000

Open full Teal harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#00DBDB#00DBDB

#002424#002424

#007F80#007F80

#0E7171#0E7171

#13ECEC#13ECEC

#00A8A8#00A8A8

Pairings

White#FFFFFF

Maroon#800000

#008040#008040

#004080#004080

Matte Black#1A1A1A

White Smoke#F5F5F5

Teal

CSS Utilities

Machine-Readable Color Data (JSON)

About Teal Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings