Color Directory
Powder Blue
A pale, chalky blue with almost no saturation weight behind it.
#B0E0E6
- HEX
- #B0E0E6
- RGB
- rgb(176, 224, 230)
- HSL
- hsl(187, 52%, 80%)
Check Powder Blue
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #B0E0E6 in the sRGB colour space.
About this entry
What it is
A pale, chalky blue with almost no saturation weight behind it.
Backgrounds, baby and wellness branding, and calm illustration.
Copy & use
How to copy and use powder blue
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Backgrounds, baby and wellness branding, and calm illustration.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from powder blue
Each step is mixed toward white or black from #B0E0E6 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#DFF3F5
rgb(223, 243, 245)
Lighter 30%
#C8E9EE
rgb(200, 233, 238)
- Base
Base
#B0E0E6
rgb(176, 224, 230)
Darker 30%
#7B9DA1
rgb(123, 157, 161)
Darker 60%
#465A5C
rgb(70, 90, 92)
Name & pairing
Where powder blue comes from
Named after powdered smalt, a ground blue glass once used as a laundry whitener. The association with softness came later and has largely displaced the original meaning.
What to put beside it
Calm behind darker text and weak as an accent, since there is very little saturation to carry. Pair it with a genuinely dark colour or it will not read at all.
Common questions
Using powder blue
What is powder blue?
A pale, chalky blue with almost no saturation weight behind it. Backgrounds, baby and wellness branding, and calm illustration.
What are the colour values for Powder Blue?
Powder Blue is HEX #B0E0E6, RGB rgb(176, 224, 230), HSL hsl(187, 52%, 80%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will powder blue work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise powder blue after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing