#76CFD4

Accessibility

AAA

11.65:1

Vs white / black

1.8:1 · 11.65:1

Sources

Library color

Codes

Formats

HEX

#76cfd4

RGB

rgb(118, 207, 212)

RGBA

rgba(118, 207, 212, 1)

HSL

hsl(183, 52%, 65%)

HSLA

hsla(183, 52%, 65%, 1)

HSV

hsv(183, 44%, 83%)

LAB

lab(78.01% -25.39 -10.82)

LCH

lch(78.01% 27.6 203.08)

OKLAB

oklab(0.8008 -0.0806 -0.0298)

OKLCH

oklch(0.8008 0.0859 200.29)

XYZ

xyz(41.66, 53.23, 70.35)

CMYK

cmyk(44%, 2%, 0%, 17%)

CSS

color: #76cfd4;

CSS variable

--color-76cfd4: #76cfd4;

SCSS

$color-76cfd4: #76cfd4;

JavaScript

const color = "#76cfd4";

TypeScript

const color: string = "#76cfd4";

React

style={{ backgroundColor: "#76cfd4" }}

JSON

{ "hex": "#76cfd4", "rgb": { "r": 118, "g": 207, "b": 212 }, "oklch": "oklch(0.8008 0.0859 200.29)" }

Export

Developer code

css

:root {
  --#76cfd4-1: #76cfd4;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

cyan-300

Very different · ΔE 6.98 · #67E8F9

Nearest CSS named color

MediumTurquoise

Very different · ΔE 5.97 · #48D1CC

Nearest Material color

cyan-200

Noticeably different · ΔE 4.41 · #80DEEA

Nearest Bootstrap color

info

Very different · ΔE 10.15 · #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.

50cdffff 100bcf4f7 200a0e2e6 30080cdd1 40058b2b7 5003a969b 6002e7d82 700206568 800134d50 900073639 950002022

Palette

Tints & shades

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

f4fbfb e8f7f8 ddf3f4 d1eff1 c6ebed bbe7ea afe3e6 a4dfe2 98dbdf 8dd7db 81d3d8 76cfd4 6cbec2 62adb1 599b9f 4f8a8d 45797c 3b686a 315658 274547 1e3435 142223 0a1112

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f4fbfb e8f7f8 ddf3f4 d1eff1 c6ebed bbe7ea afe3e6 a4dfe2 98dbdf 8dd7db 81d3d8

Palette

Shades

Mixed toward black — depth, text, and emphasis

6cbec2 62adb1 599b9f 4f8a8d 45797c 3b686a 315658 274547 1e3435 142223 0a1112

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

77c8cd 78c2c6 79bbbf 79b5b8 7aaeb1 7ba8aa 7ca1a3 7d9a9c 7e9495 7e8d8e 7f8787

Harmony

Complementary

Opposite on the color wheel for contrast

#76CFD4Stop 1 #D47C77Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#77D4AAStop 1 #76CFD4Stop 2 #77A1D4Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#76CFD4Stop 1 #D477D0Stop 2 #D0D477Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#76CFD4Stop 1 #D477A1Stop 2 #D4AA77Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#184B4EStop 1 #2B8388Stop 2 #3DBBC2Stop 3 #77D0D4Stop 4 #B1E4E7Stop 5

Using this color

Where #76cfd4 works

#76CFD4 (#76cfd4) sits in the cyan family at about 183° hue, 52% saturation, and 65% lightness. Contrast is 1.8:1 on white and 11.65:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: cyan-300 (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 #76cfd4 as small body text on white — 1.8: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: Freshness, clarity, and innovation. Great for tech accents and clean digital products. Common uses still include buttons, charts, and accents in the Cyan 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 #66CCD1#66CCD1 Spectrum #80D5DB#80D5DB Web Safe #66CCCC#66CCCC Spectrum #83CECB#83CECB Spectrum #87C7C9#87C7C9 Spectrum #5ED8E4#5ED8E4 Spectrum #3DD1DB#3DD1DB Material Cyan 200#80DEEA Spectrum #85CAD6#85CAD6 Spectrum #7FE0EB#7FE0EB Spectrum #80E0DF#80E0DF Material Cyan 300#4DD0E1