Turquoise

#06c2ac

More saturated teal-turquoise for punchy blue accents

Save
Share

About Turquoise

Turquoise is what I see when a teal chip looks "hydrated" but still disciplined: lighter than the deeper tone, and less green-leaning than . It holds a clean blue-green balance, with a softer, airy saturation that won't feel clinical on glassy UI surfaces.

I reach for it when the goal is accent layers, hover states, and soft interactive moments in health apps and fintech interfaces. It works especially well on chips, focus rings, and secondary highlights where you want the feedback to pop without tipping into the brighter, warmer behavior of , or the more settled, deeper reading of . Compared to , it keeps a touch more body and direction, so selection borders and progress accents look intentional instead of washed.

One quirk: on very cool dark themes, it can drift slightly more blue than you expect, so sanity-check it next to your greys and your cyan-adjacent links before you standardize it.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
2.25:1Fail

On Gray 100 #f5f5f5

Aa
2.07:1Fail

On Gray 900 #18181b

Aa
7.86:1AAA

On Black #000000

Aa
9.32:1AAA

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Turquoise

Open the generator with this color pre-loaded.

Start creating