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

Cyan #00FFFF is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

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

Color Harmonies

Cyan #00FFFF pairs with Red (#FF0000) as its complementary color, and Magenta (#FF00FF) and Yellow (#FFFF00) in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

CYAN
RED
Analogous

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

CYAN
Triadic

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

CYAN
MAGENTA
YELLOW
Split-Complementary

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

CYAN
Tetradic (Square)

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

CYAN
RED
Monochromatic

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

CYAN

Shades & Tints

The shade and tint range for Cyan #00FFFF moves from dark #001A1A tones through the base color to lighter #E6FFFF tones, making it useful for depth, hierarchy, and background variation.

CYAN

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);
}