Horizon
#648894
Balanced medium blue-gray for calm, crisp UI
About Horizon
Horizon looks like a window at dusk, but it still stays tidy. It's blue with a soft gray lean, yet it doesn't flatten the way Gothic does. Compared to Arctic's quieter retreat, Horizon holds a bit more presence. And unlike Citadel's balanced neutrality, this one feels slightly more cool and steadier, not mid-leaning or "in-between."
I use Horizon for dashboards and finance apps where you want calm structure without going chalky or disappearing. It's a great pick for primary chart fills, table headers, and the heavier UI bands you see in banking and insurance flows, especially when the background is light. It also works well in healthcare product screens for section headers and card frames, where you need to look clean but not clinical.
One quirk: pair it with crisp type. If your headline contrast is weak, the gray undertone can make text feel muted. Horizon does best when typography is doing the heavy lifting, not the color.
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.