Sky Blue

HEX: #87CEEB | Modern Palette

On White
1.74:1
FAIL
On Black
12.06:1
PASS

Color Specifications

HEX
#87CEEB
RGB
135, 206, 235
HSL
197°, 42% ,92%
CMYK
42.55, 12.34, 0, 7.84

About Sky Blue

Sky Blue (#87CEEB) is a color with RGB(135, 206, 235) and HSL(197.4°, 42.55%, 92.16%). In design, it fits Cool styles and is suitable for Text, Background, Print. Its complementary color is #EBA487, which creates strong contrast. Its triadic palette includes #EB87CE and #CEEB87. The name comes from Sky Blue (English).

  • HEX: #87CEEB
  • RGB: 135, 206, 235
  • HSL: 197.4°, 42.55%, 92.16%
  • Style: Cool
  • Use case: Text, Background, Print
  • Complementary color: #EBA487
  • Triadic colors: #EB87CE, #CEEB87
  • The name comes from Sky Blue (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 #87CEEB from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Background Print

Accessibility Simulation

Deuteranopia #BDBDEC
Protanopia #C8C8EB
Tritanopia #7FD2D2
Achromatopsia #C4C4C4

Frequently Asked Questions

Sky Blue (#87CEEB) is a color with RGB(135, 206, 235) and HSL(197.4°, 42.55%, 92.16%).

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

#87CEEB is suitable for Text, Background, Print and works well with Cool styles.

The name Sky Blue is linked to Sky Blue from English, meaning The color of the sky on a clear day..

Name, History & Etymology

Origin Word Sky Blue
Meaning The color of the sky on a clear day.
Language English
First Recorded Use Late 17th Century

History

The concept of 'blue' as a distinct color has a long history, with various shades being named over time. 'Sky blue' specifically refers to the light, often bright, blue seen in the Earth's atmosphere. Its use as a specific color descriptor became more common as color terminology became more precise. The hex code #87ceeb is a modern digital representation of a particular shade of sky blue.

First Recorded Use

The term 'sky blue' as a color name is recorded from the late 17th century. Earlier references to 'sky colour' or 'sky-coloured' exist, but 'sky blue' became standardized later.

Cultural Associations

Sky blue is widely associated with calmness, serenity, peace, and openness. It is often used in contexts related to nature, the outdoors, and the divine. In many cultures, blue is seen as a positive color. It can also symbolize freedom and inspiration. It's a popular color in fashion, interior design, and art for its soothing qualities.

Similar Named Colors
Baby Blue #89CFF0 ΔE 1.43
Pale Cyan #87D3F8 ΔE 2.53
Light Cornflower Blue #93CCEA ΔE 2.54
Cornflower #9ACEEB ΔE 3.39

Code Snippets

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

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

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

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

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

// SCSS variable
$sky-blue: #87CEEB;

// With RGB channels (useful for rgba() usage)
$sky-blue-r: 135;
$sky-blue-g: 206;
$sky-blue-b: 235;

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