Powder Blue

HEX: #B0E0E6 | Modern Palette

On White
1.43:1
FAIL
On Black
14.65:1
PASS

Color Specifications

HEX
#B0E0E6
RGB
176, 224, 230
HSL
186°, 51% ,79%
CMYK
23, 3, 0, 10

About Powder Blue

Powder Blue (#B0E0E6) is a color with RGB(176, 224, 230) and HSL(186.7°, 51.9%, 79.6%). In design, it fits Cool styles and is suitable for Text, Button, Print. Its complementary color is #E6B6B0, which creates strong contrast. Its triadic palette includes #E6B0E0 and #E0E6B0. The name comes from Powder Blue (English).

  • HEX: #B0E0E6
  • RGB: 176, 224, 230
  • HSL: 186.7°, 51.9%, 79.6%
  • Style: Cool
  • Use case: Text, Button, Print
  • Complementary color: #E6B6B0
  • Triadic colors: #E6B0E0, #E0E6B0
  • The name comes from Powder 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 #B0E0E6 from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Button Print

Accessibility Simulation

Deuteranopia #D4D4E7
Protanopia #DBDBE6
Tritanopia #AFE1E1
Achromatopsia #D7D7D7

Frequently Asked Questions

Powder Blue (#B0E0E6) is a color with RGB(176, 224, 230) and HSL(186.7°, 51.9%, 79.6%).

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

#B0E0E6 is suitable for Text, Button, Print and works well with Cool styles.

The name Powder Blue is linked to Powder Blue from English, meaning A light, pale shade of blue, reminiscent of the color of finely ground powder, particularly laundry bluing powder or baby powder..

Name, History & Etymology

Origin Word Powder Blue
Meaning A light, pale shade of blue, reminiscent of the color of finely ground powder, particularly laundry bluing powder or baby powder.
Language English
First Recorded Use Late 19th Century

History

The concept of 'powder blue' likely emerged from the observation of various light blue powders. One significant influence was 'laundry bluing' powder, a product used to make white fabrics appear whiter by counteracting yellowing with a subtle blue tint. Another possible influence is the color of baby powder. The term gained popularity as color names became more specific and descriptive in fashion and art. By the early to mid-20th century, it was a well-established color term.

First Recorded Use

The term 'powder blue' began to appear in written English in the late 19th century, with early references often linking it to fashion and interior design.

Cultural Associations

Powder blue is often associated with softness, calmness, and innocence. It is a common color for baby clothes and nurseries, particularly for boys, though its use is not exclusive. In fashion, it can evoke a sense of elegance and understated sophistication. It's also frequently seen in home decor to create serene and airy spaces. The color can sometimes be linked to vintage aesthetics due to its popularity in earlier decades.

Similar Named Colors
Blizzard Blue #ACE5EE ΔE 1.99
Non-photo Blue #A4DDED ΔE 3.83
Light Blue #ADD8E6 ΔE 4.27
Diamond #B9F2FF ΔE 4.65

Code Snippets

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

/* Text */
.element {
    color: #B0E0E6;
}

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

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

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #B0E0E6,
        #E6B6B0
    );
}

// SCSS variable
$powder-blue: #B0E0E6;

// With RGB channels (useful for rgba() usage)
$powder-blue-r: 176;
$powder-blue-g: 224;
$powder-blue-b: 230;

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