Cyan

HEX: #00FFFF | Modern Palette

On White
1.25:1
FAIL
On Black
16.75:1
PASS

Color Specifications

HEX
#00FFFF
RGB
0, 255, 255
HSL
180°, 100% ,50%
CMYK
100, 0, 0, 0

About Cyan

Cyan (#00FFFF) is a color with RGB(0, 255, 255) and HSL(180°, 100%, 50%). It is commonly associated with Bold moods. In design, it fits Vivid, Cool styles and is suitable for Text, Button, Accent. Its complementary color is Red (#FF0000), which creates strong contrast. Its triadic palette includes Magenta (#FF00FF) and Yellow (#FFFF00). The name comes from κύανος (kýanos) (Ancient Greek).

  • HEX: #00FFFF
  • RGB: 0, 255, 255
  • HSL: 180°, 100%, 50%
  • Mood: Bold
  • Style: Vivid, Cool
  • Use case: Text, Button, Accent
  • Complementary color: Red (#FF0000)
  • Triadic colors: Magenta (#FF00FF), Yellow (#FFFF00)
  • The name comes from κύανος (kýanos) (Ancient Greek).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #00FFFF from deepest shade to lightest tint.

Color Characteristics

Mood
Bold
Style
Vivid Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #DBDBFF
Protanopia #F2F2FE
Tritanopia #00FFFF
Achromatopsia #E5E5E5

Frequently Asked Questions

Cyan (#00FFFF) is a color with RGB(0, 255, 255) and HSL(180°, 100%, 50%).

#00FFFF pairs strongly with Red (#FF0000) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#00FFFF is suitable for Text, Button, Accent and works well with Vivid, Cool styles.

#00FFFF is commonly associated with Bold.

The name Cyan is linked to κύανος (kýanos) from Ancient Greek, meaning dark-blue enamel, lapis lazuli, a dark lustrous substance.

Name, History & Etymology

Origin Word κύανος (kýanos)
Meaning dark-blue enamel, lapis lazuli, a dark lustrous substance
Language Ancient Greek
First Recorded Use Ancient

History

The term 'cyan' in English was first used in the late 18th or early 19th century, specifically in the context of chemistry and dyes, to describe a blue-green color. Its adoption into broader color terminology, particularly as a primary color in subtractive color models (CMYK), became prominent with the advent of color printing and photography in the 19th and 20th centuries. It's one of the three subtractive primary colors, along with magenta and yellow, used to create a full spectrum of colors in print.

First Recorded Use

The Greek word 'kýanos' dates back to antiquity, referring to a deep blue color or substance. The English word 'cyan' derived from this root appeared much later.

Cultural Associations

Cyan is often associated with water, sky, and technology. In many cultures, blue-green hues evoke feelings of calmness, serenity, and freshness. It's a common color in branding for tech companies, environmental organizations, and products related to cleanliness or health. Due to its role in CMYK printing, it's a fundamental color in graphic design and publishing worldwide.

Similar Named Colors
Turquoise Blue #00FFEF ΔE 4.92
Electric Blue #7DF9FF ΔE 5.59
Bright Turquoise #08E8DE ΔE 5.94
Turquoise #40E0D0 ΔE 8.63

Code Snippets

/* Background */
.element {
    background-color: #00FFFF;
}

/* Text */
.element {
    color: #00FFFF;
}

/* Border */
.element {
    border: 1px solid #00FFFF;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #00FFFF,
        #FF0000
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #00FFFF,
        #FF0000
    );
}

// SCSS variable
$cyan: #00FFFF;

// With RGB channels (useful for rgba() usage)
$cyan-r: 0;
$cyan-g: 255;
$cyan-b: 255;

// Usage
.element {
    background-color: $cyan;
    color: rgba($cyan-r, $cyan-g, $cyan-b, 0.8);
}