Pale Cyan

HEX: #87D3F8 | Modern Palette

On White
1.65:1
FAIL
On Black
12.70:1
PASS

Color Specifications

HEX
#87D3F8
RGB
135, 211, 248
HSL
199°, 45% ,97%
CMYK
45.56, 14.92, 0, 2.75

About Pale Cyan

Pale Cyan (#87D3F8) is a color with RGB(135, 211, 248) and HSL(199.65°, 45.56%, 97.25%). In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #F8AC87, which creates strong contrast. Its triadic palette includes #F887D3 and #D3F887. The name comes from Pale Cyan (English).

  • HEX: #87D3F8
  • RGB: 135, 211, 248
  • HSL: 199.65°, 45.56%, 97.25%
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: #F8AC87
  • Triadic colors: #F887D3, #D3F887
  • The name comes from Pale Cyan (English).

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 #87D3F8 from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #C1C1F9
Protanopia #CCCCF8
Tritanopia #7DD8D8
Achromatopsia #C9C9C9

Frequently Asked Questions

Pale Cyan (#87D3F8) is a color with RGB(135, 211, 248) and HSL(199.65°, 45.56%, 97.25%).

#87D3F8 pairs strongly with #F8AC87 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#87D3F8 is suitable for Text, Button, Background and works well with Cool styles.

The name Pale Cyan is linked to Pale Cyan from English, meaning A light, desaturated shade of cyan..

Name, History & Etymology

Origin Word Pale Cyan
Meaning A light, desaturated shade of cyan.
Language English
First Recorded Use Late 20th Century

History

Cyan itself is one of the subtractive primary colors (CMYK) and has been recognized as a distinct hue for centuries, though its precise definition and naming have evolved. The term 'cyan' comes from the Greek 'kyanos' (κυανός), meaning 'dark blue enamel' or 'lapis lazuli'. The 'pale' modifier is a common English adjective used to describe a lighter, less saturated version of a color. The combination 'Pale Cyan' gained prominence as a specific color name with the standardization of color palettes in computing and graphic design, allowing for more nuanced descriptions beyond basic color terms.

First Recorded Use

The specific named color 'Pale Cyan' likely emerged with the advent of digital color systems and web design, where precise color naming and hexadecimal codes became common. While cyan as a color has ancient roots, the 'pale cyan' descriptor as a distinct, named color is modern.

Cultural Associations

Pale cyan, like many light blues and greens, often evokes feelings of calmness, serenity, and freshness. It can be associated with clear skies, shallow waters, or a gentle breeze. In design, it's frequently used for backgrounds, user interfaces, and branding where a soft, approachable, and modern aesthetic is desired. It can also be seen in medical or spa environments due to its calming properties.

Similar Named Colors
Baby Blue #89CFF0 ΔE 1.37
Sky Blue #87CEEB ΔE 2.53
Light Sky Blue #87CEFA ΔE 2.69
Columbia Blue #9BDDFF ΔE 2.93

Code Snippets

/* Background */
.element {
    background-color: #87D3F8;
}

/* Text */
.element {
    color: #87D3F8;
}

/* Border */
.element {
    border: 1px solid #87D3F8;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #87D3F8,
        #FBF7F5
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #87D3F8,
        #FBF7F5
    );
}

// SCSS variable
$pale-cyan: #87D3F8;

// With RGB channels (useful for rgba() usage)
$pale-cyan-r: 135;
$pale-cyan-g: 211;
$pale-cyan-b: 248;

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