Clear Sky
#8eccfe
Lighter, cleaner sky blue for hero sections
About Clear Sky
Clear Sky is what happens when you push a blue past the point where it still feels like blue at all, it's so light and bright that it reads almost like a tinted white. Where Baby Blue announces itself and Andromeda Blue sits comfortably in the middle, this one is barely holding onto the color family. It's the blue you use when you need the psychological comfort of blue without any actual saturation getting in the way.
You'll find this working in healthcare interfaces, educational platforms, and SaaS dashboards where the background needs to disappear. It's light enough to sit behind dark text without any contrast acrobatics, pale enough that it doesn't compete with cards or modals layered on top. It works in settings panels, in onboarding flows, in any layout where you're trying to signal "this is a secondary surface" without making users actually *see* the color. The difference from Breeze is temperature and brightness, Clear Sky runs cooler and noticeably lighter, which means it reads cleaner on most displays instead of warmer.
Pair it with dark navy or charcoal and you get real distinction. On cooler monitors this stays exactly where you put it. On warmer displays it might drift slightly cyan, which honestly just makes it friendlier without losing any of its softness.
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.