About Powder Blue
Powder Blue (powderblue) is a very light, moderately saturated cyan with the hex code #b0e0e6, or rgb(176, 224, 230). In HSL it sits at a hue of 187°, 52% saturation and 80% lightness. It is one of the 148 named colors every browser understands, so you can write color: powderblue; instead of the hex value.
Using Powder Blue for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Powder Blue text on white | 1.43 : 1 | fails |
| Powder Blue text on black | 14.65 : 1 | AAA |
On a powder blue background, use black text (14.65 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: powderblue; /* or #b0e0e6 */
background-color: #b0e0e6;
border: 1px solid rgb(176 224 230 / 50%);
}Similar named colors
Light Blue (#add8e6), Pale Turquoise (#afeeee), Light Steel Blue (#b0c4de), Light Gray (#d3d3d3), Sky Blue (#87ceeb), Gainsboro (#dcdcdc).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for powder blue?
#b0e0e6 — that is rgb(176, 224, 230) and hsl(187, 52%, 80%). In CSS you can also just write powderblue.
Is powder blue text readable on white?
Its contrast ratio on white is 1.43 : 1, which fails WCAG — use it for decoration or on a dark background instead.
What colors go well with powder blue?
Its complementary color is #e7b8b1; analogous colors #b1e7d2 and #b1c6e7 sit next to it on the color wheel.