#80C8BA

Accessibility

AAA

10.89:1

Vs white / black

1.93:1 · 10.89:1

Sources

Library color

Codes

Formats

HEX

#80c8ba

RGB

rgb(128, 200, 186)

RGBA

rgba(128, 200, 186, 1)

HSL

hsl(168, 40%, 64%)

HSLA

hsla(168, 40%, 64%, 1)

HSV

hsv(168, 36%, 78%)

LAB

lab(75.72% -25.68 -0.13)

LCH

lch(75.72% 25.68 180.29)

OKLAB

oklab(0.7813 -0.0753 -0.0008)

OKLCH

oklch(0.7813 0.0753 180.61)

XYZ

xyz(38.42, 49.44, 53.96)

CMYK

cmyk(36%, 0%, 7%, 22%)

CSS

color: #80c8ba;

CSS variable

--color-80c8ba: #80c8ba;

SCSS

$color-80c8ba: #80c8ba;

JavaScript

const color = "#80c8ba";

TypeScript

const color: string = "#80c8ba";

React

style={{ backgroundColor: "#80c8ba" }}

JSON

{ "hex": "#80c8ba", "rgb": { "r": 128, "g": 200, "b": 186 }, "oklch": "oklch(0.7813 0.0753 180.61)" }

Export

Developer code

css

:root {
  --#80c8ba-1: #80c8ba;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

teal-400

Very different · ΔE 7.75 · #2DD4BF

Nearest CSS named color

MediumTurquoise

Very different · ΔE 7 · #48D1CC

Nearest Material color

teal-200

Noticeably different · ΔE 2.83 · #80CBC4

Nearest Bootstrap color

info

Very different · ΔE 17.84 · #0DCAF0

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50d5fff7 100c5f3e9 200abe1d6 3008dccc0 4006ab1a4 5004d9588 6003f7d72 70030645b 800214d45 900133630 95002201b

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f4faf9 eaf6f4 dff1ee d5ede8 cae8e2 c0e4dd b5dfd7 aadad1 a0d6cb 95d1c6 8bcdc0 80c8ba 75b7ab 6ba79b 60968c 55857c 4b756c 40645d 35534e 2b433e 20322f 15211f 0b1110

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f4faf9 eaf6f4 dff1ee d5ede8 cae8e2 c0e4dd b5dfd7 aadad1 a0d6cb 95d1c6 8bcdc0

Palette

Shades

Mixed toward black — depth, text, and emphasis

75b7ab 6ba79b 60968c 55857c 4b756c 40645d 35534e 2b433e 20322f 15211f 0b1110

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

80c2b5 80bcb0 80b6ac 80b0a7 80aaa2 80a49d 809e98 809893 80928f 808c8a 808685

Harmony

Complementary

Opposite on the color wheel for contrast

#80C8BAStop 1 #C87E8DStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#7EC895Stop 1 #80C8BAStop 2 #7EB2C8Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#80C8BAStop 1 #B97EC8Stop 2 #C8B97EStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#80C8BAStop 1 #C87EB2Stop 2 #C8957EStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#1F473FStop 1 #367D6FStop 2 #4DB39EStop 3 #82C9BBStop 4 #B8E0D8Stop 5

Using this color

Where #80c8ba works

#80C8BA (#80c8ba) sits in the teal family at about 168° hue, 40% saturation, and 64% lightness. Contrast is 1.93:1 on white and 10.89:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: teal-400 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on charcoal / dark mode

Do not use #80c8ba as small body text on white — 1.93:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Balance, healing, and sophistication. Popular in wellness and modern dashboards. Common uses still include buttons, charts, and accents in the Teal range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #81C5B5#81C5B5 Material Teal 200#80CBC4 Spectrum #80CBB5#80CBB5 Spectrum #65C8BA#65C8BA Spectrum #7ED3C9#7ED3C9 Spectrum #7DD8C6#7DD8C6 Spectrum #68C0BA#68C0BA Spectrum #83CECB#83CECB Spectrum #6BB8A5#6BB8A5 Spectrum #60CDB5#60CDB5 Spectrum #96CFB4#96CFB4 Chakra teal 400#4FD1C5