Powder Blue (#B0E0E6) — Color Codes, Meaning & UI Palettes
Powder Blue (#B0E0E6) is an airy, pale tint of blue with subtle cyan undertones, originally derived from smalt (powdered cobalt glass). It evokes serenity, spacious lightness, cleanliness, and peaceful minimalism.
#B0E0E6. In RGB, it is rgb(176, 224, 230). In HSL, it is hsl(187deg, 52%, 80%), and its print CMYK formulation is cmyk(23%, 3%, 0%, 10%). It has a relative luminance of 0.683 and pairs best in UI design with Deep Navy (#0F172A) and Crisp Ice White (#F8FAFC).
WCAG 2.1 Accessibility & Contrast Rating
11-Step Tints & Shades Scale (Tailwind 50–950)
Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:
Color Harmonies & Palette Schemes
Complementary
Analogous -30°
Analogous +30°
Triadic +120°
Triadic +240°
Curated UI Design Pairings for Powder Blue
Ideal background and badge container color for healthcare, wellness, productivity apps, and clean modern interfaces. Always pair with deep slate or navy for accessible WCAG text contrast.
Export Powder Blue Code Snippets
--color-powder-blue: #B0E0E6;
'powder-blue': '#B0E0E6'
Color(hex: "#B0E0E6")
{"name": "Powder Blue", "hex": "#B0E0E6"}
Frequently Asked Questions About Powder Blue (#B0E0E6)
What is the exact HEX code for Powder Blue?
The exact HEX code for Powder Blue is #B0E0E6. In 8-digit hexadecimal (with 100% opacity), it is #B0E0E6FF. Its RGB decimal equivalent is rgb(176, 224, 230) and its HSL value is hsl(187deg, 52%, 80%).
What colors go best with Powder Blue in UI and web design?
Powder Blue pairs exceptionally well with Deep Navy (#0F172A), Crisp Ice White (#F8FAFC), Soft Slate (#64748B), and Pastel Coral (#FCA5A5).
How do I use Powder Blue in CSS and Tailwind CSS?
In standard CSS, apply it directly via color: #B0E0E6; or background-color: #B0E0E6;. In Tailwind CSS, use arbitrary value syntax like bg-[#b0e0e6] or text-[#b0e0e6], or define it in your Tailwind v4 @theme block as --color-powder-blue: #B0E0E6;.
Is Powder Blue WCAG accessible for readable text?
Against a pure white background (#FFFFFF), Powder Blue achieves a contrast ratio of 1.43:1 (Fail). Against a pure black background (#000000), it achieves 14.66:1 (AAA). Check custom contrast pairings on Pikka's WCAG Contrast Checker.
Explore More Colors in the Dictionary
Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.