Cyan

#00ffff

Clean teal-cyan midtone for calm yet legible UI

Save
Share

About Cyan

Cyan is the one that sits dead center in the spectrum, not as cold as Aggressive , not as soft as . It's the version that actually reads like a choice rather than a compromise. Put it on a dark background and it lands with presence. Put it next to and you'll see the restraint. This is cyan at its most useful.

You reach for it in dashboards, data visualization, and health platforms where you need the signal without the aggression. Trading interfaces, real-time monitoring, app accents where felt too raw and felt too polite. It's the cyan that works in fintech without looking cheap, in medical UIs without feeling cold. Works as a primary button state, a status indicator, a hover effect that actually reads.

The thing: it's hungry for contrast. Pair it with actual dark backgrounds or let it live alone. Middle gray will kill it. On certain displays it can drift toward teal if the panel skews warm, so test it on what your users actually own before you ship 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
1.25:1Fail

On Gray 100 #f5f5f5

Aa
1.15:1Fail

On Gray 900 #18181b

Aa
14.13:1AAA

On Black #000000

Aa
16.75: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.

Create a gradient with Cyan

Open the generator with this color pre-loaded.

Start creating