Skip to content

Powder blue

Powder blue is a very light, rich color from the cyan family. Hex code #B0E0E6.

Powder blue#B0E0E6

Color codes

  • CSS namepowderblue
  • HEX#B0E0E6
  • RGBrgb(176 224 230)
  • HSLhsl(187 52% 80%)
  • HSB / HSVhsb(187, 23%, 90%)
  • OKLCHoklch(87.5% 0.05 205.7)
  • CMYKcmyk(23%, 3%, 0%, 10%)

White text

1.43:1 · fails WCAG

Black text

14.65:1 · passes WCAG AAA

Shades

50#D7F9FE
100#AFDFE5
200#93C2C8
300#78A6AC
400#5D8B90
500#437076
600#2A575C
700#0F3F44
800#02272B

Complementary

#B0E0E6
#F6CAC5

Analogous

#B0E0E6
#B4E1D4
#B7DCF3

Triadic

#B0E0E6
#E8CBE8
#E5D4B1

About this color

Powder blue in CSS and design

Powder blue is a very light, rich color from the cyan family. Powder blue is one of the extended color keywords, which CSS adopted from the X11 color names used on Unix workstations.

Use it in CSS by name or by any of its codes; these all give the same color:

color: powderblue;
color: #B0E0E6;
color: rgb(176 224 230);
color: hsl(187 52% 80%);

For text on powder blue, black reads best. Check other combinations with the contrast checker, or browse all CSS color names.

Frequently asked questions

What is the hex code for powder blue?

#B0E0E6. In CSS you can also use the keyword powderblue, which works in every browser.

What is powder blue in RGB and HSL?

In RGB it is rgb(176 224 230), in HSL hsl(187 52% 80%). For print, cmyk(23%, 3%, 0%, 10%) is a starting point, but CMYK depends on paper and ink, so check with your printer.

Should I use black or white text on powder blue?

Black text works better: it has a contrast ratio of 14.65:1 and passes WCAG AAA. White text reaches 1.43:1.

Which colors go with powder blue?

Its complementary color is #F6CAC5, on the opposite side of the color wheel. For a calmer look, combine it with its analogous neighbors #B4E1D4 and #B7DCF3. The palette generator builds more combinations.