Technical Values
Exact numeric values for cross-tool conversion, token mapping, and accessibility review.
CSS Named Color Reference
Powder Blue
Powder Blue·#B0E0E6
Powder Blue is a soft CSS named blue at #B0E0E6 with a muted, misty quality that feels calmer than Sky Blue and less directional than Light Sky Blue. Use it when you need a delicate surface color for subtle data fills, secondary backgrounds, healthcare or education UI, and low-pressure interface sections.
Recommended text colorDark text
Body text pairing11.97:1
Strongest RoleMist-like surfaces, subtle data fills, and calm secondary backgrounds
Tonal Direction
Scan the ramp from light to dark to judge how Powder Blue behaves across action states, layered surfaces, and supporting accents.
100#F1F9FB
300#DBF1F4
500#BEE6EB
600#B0E0E6
800#7FA1A6
Contrast & Interface Preview
Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.
White text on this color
Best for reversed buttons, tabs, badges, and filled action surfaces.
1.43:1Needs more separation
Dark text on this color
Works for larger headings and selective UI blocks, but not for dense body copy.
11.97:1AAA-level contrast
This color on light surface
Use this pairing when Powder Blue becomes the link, icon, border, or emphasis color on very light surfaces.
1.36:1Needs more separation
Recommended text colorDark text
Dark text reaches 11.97:1 against Powder Blue, which is strong enough for body text and standard action surfaces.
Where This Color Works
- Use Powder Blue when you need a misty blue for calm panels, subtle data backgrounds, medical or educational interfaces, and gentle content grouping.
- It is softer and less energetic than Sky Blue, Light Sky Blue, or Deep Sky Blue, which makes it better for low-pressure structure than for attention-heavy accents.
- Pair it with white, silver-gray neutrals, and one darker anchor color if you want a quiet interface that still maintains enough separation.
Reference Context
Color Notes
Powder Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Library
CSS Named Colors
Related Blues
Palette Starting Points
Implementation Snippets
Reference-ready snippets for CSS variables, utility-first styling, and token exports.
:root {
--color-powder-blue: #B0E0E6;
--color-powder-blue-rgb: 176 224 230;
}Drop into a global token file or CSS variable layer.
class="bg-[#B0E0E6] text-white"
class="hover:bg-[#7FA1A6] ring-1 ring-[#B0E0E6]"Direct utility usage for a fast prototype or content block.
{
"powderBlue": "#B0E0E6",
"powderBlueRgb": [176, 224, 230],
"powderBlueHsl": [187, 52, 80]
}Useful for design token exports and API-driven theme objects.
Move This Color Into the Workflow
Carry Powder Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.