Cyan

Meet Cyan (#00FFFF), a color that commands attention with its pure, electric quality. This vibrant hue, sitting at the intersection of green and blue, has a distinct digital-native feel, making it a powerful choice for modern interfaces and visual identities.

Cyan
#00FFFF
Copy
Copied
Access our full UI & UX library today.
Join for free

What color is Cyan?

Cyan is a vibrant, cool-toned color that sits perfectly between green and blue in the visible spectrum. It's often described as an electric or vivid light blue, possessing a luminous quality that can feel both refreshing and digital.

While its purest form is the intense #00FFFF, Cyan's character shifts depending on its undertones. Leaning towards green gives it a more teal-like appearance, while a push towards blue results in shades closer to turquoise or aqua.

What is the meaning of the color Cyan?

Associated with serenity and clarity, Cyan promotes a sense of calm and emotional balance. The color symbolizes open communication and clear thought.

Historically derived from the Greek word for dark blue, Cyan is now strongly tied to technology and innovation, representing a clean, modern, and forward-thinking perspective in design.

How should I use Cyan in UI design?

Cyan's high energy works best for accents that grab attention, such as CTAs, icons, and highlights. It pops against dark backgrounds and pairs well with analogous blues and greens for a harmonious feel.

Pure #00FFFF is intense, so few brands like TIDAL or TikTok use it as a primary color. This rarity means it can be a powerful way for a new product to stand out.

You can use the tools below to explore curated palettes, test color contrast for accessibility, and preview Cyan in real UI components of top brands.

Using Cyan color codes

The most direct way to specify Cyan in digital work is with its hex code, #00FFFF. Because of its pure, high saturation, it often makes the biggest impact when used deliberately as an accent rather than a dominant background color.

Different projects and media require different color models. A hex code can be translated into other formats, such as RGB (Red, Green, Blue) for digital screens or CMYK (Cyan, Magenta, Yellow, Key) for print materials. Other specifications like HSL (Hue, Saturation, Lightness) offer more intuitive ways to describe and adjust color attributes.

To simplify your workflow, we’ve converted #00FFFF into a range of popular formats. You can find and copy the exact codes you need for your project below.

Cyan Code Conversions

HEX
#00FFFF
Copy
Copied
LAB
34.74, -20.85, 14.42
Copy
Copied
RGB
53, 90, 58
Copy
Copied
XYZ
5.89, 8.37, 5.31
Copy
Copied
HSL
128°, 26%, 28%
Copy
Copied
LCH
34.74, 25.35, 145.33°
Copy
Copied
HSB
128°, 41%, 35%
Copy
Copied
LUV
34.74, -7.15, 19.17
Copy
Copied
CMYK
41%, 0%, 36%, 65%
Copy
Copied
HWB
128°, 21%, 65%
Copy
Copied

Cyan Color Harmonies

Analogous

Analogous colors sit next to Cyan on the color wheel. They form a harmonious and cohesive palette, resulting in a calm and serene composition.

#123456
#123456
#123456

Complementary

Complementary colors sit directly opposite each other on the color wheel. For Cyan, this creates a high-contrast pairing that makes both colors pop.

#123456
#123456

Split Complementary

For a more nuanced palette, split complementary colors pair Cyan with the two colors adjacent to its direct complement, offering vibrant yet balanced designs.

#123456
#123456
#123456

Triadic

A triadic palette for Cyan involves two other colors equidistant on the color wheel, resulting in a bold, harmonious combination with strong visual contrast.

#123456
#123456
#123456

Tetradic

For Cyan, a tetradic scheme involves two pairs of complementary colors, creating a four-color palette that forms a rectangle on the color wheel.

#123456
#123456
#123456
#123456

Square

A square color scheme uses four colors evenly spaced on the color wheel. With Cyan as a base, this creates a vibrant, high-contrast palette.

#123456
#123456
#123456
#123456

Cyan Color Variations

Shades

Shades of Cyan are created by adding black, giving the color more depth and weight.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tints

Tints of Cyan are created by adding white, resulting in lighter, softer variations.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tones

Tones are created by mixing Cyan with gray, producing softer, less saturated variations.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Hues

Hues are variations of Cyan, differing in intensity or temperature to create distinct moods.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

What Interfaces Use Colors Like Cyan?

No items found.
Keep the inspiration going with Mobbin
Join for free
No items found.

Never run out of inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Nike
Brand Logo Image
Pinterest
Logo Image
Coinbase
Wise Logo Image
Wise
Headspace Logo Image
Headspace
Airbnb Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion