HomeDevTeal color codes
Color tools

Teal color codes

Teal color codes for #008080 — HEX, RGB, HSL, HSV, shades, named teals, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for teal, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named teal shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS teal#008080 = rgb(0, 128, 128) = hsl(180°, 100%, 25%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (warm coral/orange)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base teal

CSS keyword

color: teal;
#008080 · rgb(0, 128, 128)
ϟ

Related shade

Family neighbor

darkcyan
#008B8B
ϟ

UI accent

Background use

background-color: #008080;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward warm coral/orange

Teal color family specification

Version 1.0.0

Definition
Teal in CSS centers on the keyword teal (#008080 / rgb(0, 128, 128) / hsl(180°, 100%, 25%)). Designers use teal families for professional yet vibrant on screens.
What it calculates
Teal family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Teal is a popular brand color—balanced between blue trust and green freshness.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --teal: #008080;
  --teal-soft: #20b2aa;
  --teal-deep: #004d4d;
}

.banner {
  background-color: var(--teal);
  color: #ffffff;
}
Popular CSS teals
NameHEXRGBFeel
teal#0080800, 128, 128Base keyword
darkcyan#008B8B0, 139, 139Dark shade
cyan#00FFFF0, 255, 255Named shade
turquoise#40E0D064, 224, 208Named shade
cadetblue#5F9EA095, 158, 160Named shade
lightseagreen#20B2AA32, 178, 170Light tint
aquamarine#7FFFD4127, 255, 212Named shade
aqua#00FFFF0, 255, 255Named shade
darkturquoise#00CED10, 206, 209Dark shade
lightcyan#E0FFFF224, 255, 255Light tint
mediumaquamarine#66CDAA102, 205, 170Mid tone
mediumturquoise#48D1CC72, 209, 204Mid tone
i Related hues may appear in Named shades when useful for teal-adjacent palettes.
Assumptions
  • Base keyword teal = #008080 in sRGB.
  • Named list uses CSS Color Module keywords in/near the teal family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
teal → #008080; complementary toward warm coral/orange
Validation cases
  • teal → #008080
  • cyan → #00FFFF
  • shade of teal → same hue, lower lightness
  • tint of teal → same hue, higher lightness
Sources
  • CSS Color Module named colors (teal family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Cyan color codes › ◉ Turquoise color codes › ◉ Green color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for teal?

The CSS named color teal is #008080, equal to rgb(0, 128, 128) and hsl(180°, 100%, 25%).

What is the difference between teal and cyan?

Teal is dark and muted. Cyan is bright and fully saturated.

What colors go with teal?

White, sand, and soft peach pair well. Gold accents can feel premium. Always check text contrast.

Is teal good for body text?

Teal on white usually works for headings; verify AA for small text and light-on-teal combinations.

How do I use teal in CSS?

Use color: teal;, color: #008080;, or color: rgb(0, 128, 128); on any property that accepts a <color> value, including background-color and border-color.