Sky Blue

CSS official sky blue, bright and airy like a cloudless sky

HEX#87CEEB

RGBrgb(135, 206, 235)

HSLhsl(197, 71%, 73%)

HSVhsv(197, 43%, 92%)

CMYKcmyk(43%, 12%, 0%, 8%)

HEXA#87CEEBFF

RGBArgba(135, 206, 235, 1)

HSLAhsla(197, 71%, 73%, 1)

OKLCHoklch(90.7%, 0.045, 221)

LCHlch(89.7%, 24, 224)

🎨 Color Palettes

Analogous2-3 adjacent hues (≤60°)

Triadic3 hues spaced 120° apart

Split ComplementaryMain color + colors adjacent to its complement

Complementary2 hues spaced 180° apart

Tetradic (Rectangle)4 hues forming a rectangle

MonochromaticSingle hue with varying saturation and lightness

♿ WCAG Contrast Colors

Learn More →

Aa14px Body

High Contrast Text

#0D394ARatio 7.1:1AAA

Suitable for body text, headings, and primary content, ensuring readability for all users

Aa14px Body

Standard Text

#2145C4Ratio 4.4:1AA Large

Suitable for regular body content, meeting WCAG AA standards

Aa14px Body

Large Text / UI Components

#7A51E1Ratio 2.9:1Fail

Suitable for large text (≥18px bold or ≥24px), icons, UI component boundaries

Aa14px Body

Decorative / Dividers

#E151B8Ratio 2:1Fail

Suitable for decorative elements, dividers, non-essential text

📊 Color Scales

Online Color Picker → Gradient Generator →

Lightness VariationFixed hue and saturation, proportional lightness scaling 30%→100%

#104960

#166483

#1D82AA

#239DCD

#3FB1DE

#62BFE4

#89CFEB

Saturation VariationFixed hue and lightness, proportional saturation scaling 40%→100%

#A7C3CD

#A1C5D3

#9DC7D8

#98C9DD

#93CBE1

#8ECDE6

#89CFEB

Lightness + Saturation Mixed VariationSimultaneous lightness and saturation proportional scaling

#2C3D44

#365663

#3E7489

#4190AF

#52A9CB

#69BCDD

#89CFEB

Hue Fine-TuningFixed saturation and lightness, stepwise hue fine-tuning ±15°

#89E8EB

#89E0EB

#89D7EB

#89CFEB

#89C7EB

#89BFEB

#89B7EB

💡 Use Cases

👶

Baby Products

Baby clothing or nursery walls, providing gentle visual stimulation and creating a warm, secure growing environment.

☀️

Vacation Ads

The primary color for travel agency or airline websites, evoking blue skies and beaches, instantly triggering the urge to escape.

🗨️

Message Notifications

Message bubbles or notification dots within apps, using high visibility without feeling urgent, providing gentle prompts.

✈️

Airline Brands

As the brand color for low-cost or leisure airlines, conveying affordability, convenience, and a relaxed flying experience.

📜 Origin & History

Sky Blue is directly drawn from the memory of an idealized clear sky. Since the rise of Romanticism in the 18th century, it has been highly regarded, with artists using it to express praise for the pure beauty of nature. During the Rococo period, sky blue was a common lighthearted tone in court decoration and attire.

Modernist design movements rejected ornate decoration, and sky blue became a favorite of the International Style due to its clean, pure qualities. It was widely used in architecture and industrial design, representing utopian aspirations for the future.

In the mid-20th century, with the spread of mass media and color television, sky blue entered living rooms everywhere. It was often used for children's products and casual wear, establishing strong psychological associations with innocence and holiday joy.

As one of the foundational CSS colors, sky blue plays the role of information messenger in digital interfaces. Less oppressive than dark blue, it is particularly suitable for notification bubbles, link highlights, and creating an approachable atmosphere in youth-oriented social products.

🧠 Color Psychology

OptimisticInstantly evokes good weather, sparking hope and dispelling gloom and melancholy.

FreeBound to associations with boundless skies and birds in flight, awakening a primal desire to break free and soar.

InnocentA color without guile, as if seeing an unpolluted world through a child's eyes, filled with simple trust.

TransparentVisual clarity brings psychological openness, encouraging honest and sincere interpersonal communication.

VibrantIts non-dazzling brightness infuses energy, rejuvenating the spirit and evoking playfulness.

AcceptingAn inclusive tone, like the sky embracing all things, conveying unconditional acceptance and security.

← Back to Explore Colors