HEX
#B0E0E6Primary tokenCSS Named Color Reference
Powder Blue Color Code
Powder Blue·#B0E0E6
Blue FamilyCoolLight toneMid saturationoklch(87.5% 0.050 206)
RGB
rgb(176, 224, 230)Screen valuesHSL
hsl(187 52% 80%)Hue and lightnessCMYK
23, 3, 0, 10Print handoffLAB
86, -14, -8Perceptual referenceOKLCH
oklch(87.5% 0.050 206)Modern perceptualPowder 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.
Best text colorDark text
Body text contrast11.97:1
Best UseMist-like surfaces, subtle data fills, and calm secondary backgrounds
Tonal Scale
100#F1F9FB
300#DBF1F4
500#BEE6EB
600#B0E0E6
800#7FA1A6
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
1.43:1Needs more separation
Dark text on this color
Large headings and selective UI.
11.97:1AAA-level contrast
This color on light surface
Links, borders, and icons on light UI.
1.36:1Needs more separation
Best text colorDark textContrast 11.97:1
Professional Reference
OKLCHoklch(87.5% 0.050 206)
Relative Luminance0.6825
Source TypeCSS Named Color
Classification
Blue FamilyCoolLight toneMid saturation
Source Context
Source Type
CSS Named Color
System
CSS
Closest Matches
Accessibility Matrix
White text on this color
White text placed on the current color.
1.43:1Needs more separation
Dark text on this color
Dark text or headings on the current color.
11.97:1AAA
This color on light surface
Use this color for links, strokes, or icons on light UI.
1.36:1Needs more separation
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
11.97:1AAA
Best text colorDark textContrast 11.97:1 · AAA
Where It Works
- Calm panels, subtle data fills, and gentle grouping.
- Low-pressure structure, not attention-heavy accents.
- Pairs with white, silver-gray, and a darker anchor color.
Reference Notes
Last Updated
2026-06-25
Source Library
CSS Standard Colors
Methodology
Verified source values + site guidance
Color Notes
Powder Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product and interface reference work.
Hue Family
Trust-building blues for enterprise and SaaS.
Source Collections
CSS Named Colors
Related Colors
Palette Starting Points
Implementation Snippets
:root {
--color-powder-blue: #B0E0E6;
--color-powder-blue-rgb: 176 224 230;
}class="bg-[#B0E0E6] text-white"
class="hover:bg-[#7FA1A6] ring-1 ring-[#B0E0E6]"{
"powderBlue": "#B0E0E6",
"powderBlueRgb": [176, 224, 230],
"powderBlueHsl": [187, 52, 80]
}