13 Shades of Turquoise with Hex Codes

Named Turquoise Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

TurquoiseColor Chart: Hex, RGB, HSL & CMYK

Every turquoise above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Turquoise Scale from Light to Dark

A 12-step lightness scale built from the core turquoise hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate turquoise design tokens.

What Turquoise Communicates

Turquoise sits at a luminance high enough that it almost never passes text contrast on white, which makes it a decoration and accent color rather than a working one. Its strength is that it stays vivid on dark backgrounds where most bright colors wash out, so it is a natural dark-theme accent.

Where turquoise works well

• Travel, swimwear, and tropical brands
• Dark-theme accents and highlights
• Gradient stops between blue and green
• Illustration and marketing surfaces rather than body text

Colors that pair with turquoise

Copy the Turquoise Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --turquoise-blue-lagoon: #4C9C9C;
  --turquoise-persian-green: #00A693;
  --turquoise-tiffany-blue: #0ABAB5;
  --turquoise-maximum-blue-green: #30BFBF;
  --turquoise-robin-egg-blue: #00CCCC;
  --turquoise-darkturquoise: #00CED1;
  --turquoise-mediumturquoise: #48D1CC;
  --turquoise-turquoise: #40E0D0;
  --turquoise-paleturquoise: #AFEEEE;
  --turquoise-aqua: #00FFFF;
  --turquoise-aquamarine: #7FFFD4;
  --turquoise-celeste: #B2FFFF;
  --turquoise-lightcyan: #E0FFFF;
}

Turquoise Color Questions