CSS named color

Turquoise #40E0D0

Turquoise is cyan. Below: every color format, WCAG contrast against black and white, its tints, shades and tones, and the harmonies that pair with it.

Color values

Contrast & accessibility

WCAG contrast ratio of Turquoise used as a foreground on white and black backgrounds.

Aa The quick brown fox
1.64:1

On white

AA ✕ AAA ✕ AA Large ✕
Aa The quick brown fox
12.79:1

On black

AA ✓ AAA ✓ AA Large ✓

Tints, shades & tones

Systematic variations of Turquoise — click any swatch to copy its hex.

Tintsmixed toward white
Shadesmixed toward black
Tonesmixed toward gray

Color harmonies

Palettes built from Turquoise by rotating its hue. Each swatch links to its closest named color.

Complementary

#40E0D0 ≈ Medium Turquoise #E03E4E ≈ Indian Red

Analogous

#3EE07F ≈ Medium Sea Green #40E0D0 ≈ Medium Turquoise #3E9FE0 ≈ Cornflower Blue

Triadic

#40E0D0 ≈ Medium Turquoise #CF3EE0 ≈ Medium Orchid #E0CF3E ≈ Goldenrod

Split-complementary

#40E0D0 ≈ Medium Turquoise #E03E9F ≈ Medium Violet Red #E07F3E ≈ Peru

Tetradic

#40E0D0 ≈ Medium Turquoise #7F3EE0 ≈ Blue Violet #E03E4E ≈ Indian Red #9FE03E ≈ Yellow Green

Use Turquoise in your stack

Tailwind (arbitrary value)

Works for any property: text-[#40e0d0], border-[#40e0d0].

CSS custom property

Reference it anywhere with var(--color).

Build a full theme

Turn Turquoise into a complete shadcn/ui palette — light & dark, contrast-checked, one-command install.

Extract a theme →

Similar named colors

Medium Turquoise #48D1CC Medium Aquamarine #66CDAA Dark Turquoise #00CED1 Aquamarine #7FFFD4 Light Sea Green #20B2AA Sky Blue #87CEEB

← All CSS named colors