Azure Blue

CSS-defined soft light blue, open and expansive like a clear sky

HEX#98B4D4

RGBrgb(152, 180, 212)

HSLhsl(212, 41%, 71%)

HSVhsv(212, 28%, 83%)

CMYKcmyk(28%, 15%, 0%, 17%)

HEXA#98B4D4FF

RGBArgba(152, 180, 212, 1)

HSLAhsla(212, 41%, 71%, 1)

OKLCHoklch(88.3%, 0.028, 249)

LCHlch(86.6%, 17.9, 238)

🎨 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

#FBFCFDRatio 2.1:1Fail

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

Aa14px Body

Standard Text

#FBFBFDRatio 2.1:1Fail

Suitable for regular body content, meeting WCAG AA standards

Aa14px Body

Large Text / UI Components

#FDFBFDRatio 2.1:1Fail

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

Aa14px Body

Decorative / Dividers

#FAF4F7Ratio 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%

#20344C

#2D4A6C

#395E89

#4572A5

#5A86BA

#7A9EC7

#97B3D3

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

#A9B4C1

#A6B4C5

#A3B4C8

#A0B4CA

#9DB3CD

#9AB3D0

#97B3D3

Lightness + Saturation Mixed VariationSimultaneous lightness and saturation proportional scaling

#2F353C

#3F4C5A

#4C5F76

#567395

#6587AE

#7F9EC3

#97B3D3

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

#97C2D3

#97BDD3

#97B8D3

#97B3D3

#97AED3

#97A9D3

#97A4D3

💡 Use Cases

🏞️

Web Background

Used as a website or app background, it creates an open, non-oppressive browsing environment, especially suited for content-heavy pages.

🛋️

Interior Walls

Applied to bedroom or living room walls, it infuses the space with tranquility, visually expanding the room and creating a relaxing retreat.

👔

Business Casual

Men's shirts or women's scarves in this color project professionalism without harshness, breaking the stiffness of formal wear.

📱

Wellness Apps

As the primary interface color for meditation or healthcare apps, it naturally conveys calm and healing, stabilizing the user's initial emotional state.

📜 Origin & History

Azure Blue draws inspiration from the clear sky and vast waters. In Western art history, it was often used to depict distant skies, creating a profound sense of spatial depth. Impressionist painters of the 19th century frequently employed similar tones to capture fleeting changes in light and atmosphere.

In the modern digital world, Azure Blue has been standardized by CSS as a light blue shade, becoming an exceptionally approachable background color in web and interface design. It evokes associations with the outdoors and freedom, making it particularly popular in social and travel applications.

Traditional Chinese aesthetics also feature similar tones, often appearing in Ming and Qing dynasty porcelain and court attire, symbolizing tranquility and lofty ideals. However, there was no fixed term for 'azure' in traditional Chinese nomenclature; this color is very much a product of modern East-West color fusion.

In brand design, Azure Blue represents trustworthiness and openness, frequently used as an accent color by financial institutions and technology companies. It embodies the rationality of blue while its lightness removes distance, creating a soft yet professional visual balance.

🧠 Color Psychology

ExpansiveLike the endless sky, it broadens the mind and frees the spirit.

GentleA non-aggressive pale blue that softly envelops the gaze, putting one at ease.

TrustworthyConnected to the constancy of sky and sea, subtly conveying stability and reliability.

FreshLike the air after rain, washing away heaviness and bringing a clean, refreshing experience.

CalmingEffectively reduces mental restlessness and tension, helping restore peace and composure.

IntrospectiveThe serene hue guides thoughts inward, encouraging moments of meditation and self-reflection.

← Back to Explore Colors