Baby Blue
#a2cffe
Muted, airy baby blue for calm UI
About Baby Blue
Baby Blue is the one that actually feels like blue, not a whisper of it. It's got enough saturation to sit firmly in the blue family without looking diluted, but it lands so light it won't dominate a screen. The difference from Broad Daylight is the temperature, this one leans slightly warmer, almost airy, where Broad Daylight reads crisp and direct. And where Ariel practically disappears, Baby Blue still announces itself.
You'll use this in healthcare dashboards, educational interfaces, and fintech apps where you need a secondary surface that feels approachable rather than sterile. It works as a calm background layer without the clinical edge of cooler blues, or as an accent that doesn't demand attention but doesn't hide either. The balance of presence and softness makes it work where Breaking the Ice might feel too cool or Ariel too faint.
Pair it with dark slate or charcoal for contrast that reads clean, not harsh. On warmer monitors it'll drift slightly toward cyan, which is actually fine, it just means the color moves toward friendlier rather than disappearing.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.