Olympic Blue
#4f8fe6
Deeper Olympic blue for structured, athletic navigation accents
About Olympic Blue
I keep thinking of Olympic Blue as the blue you notice from across the room, but only because it's quietly solid. It's cooler and deeper than Orchid, so it doesn't feel like an airy accent. Compared to Blue Jay, it's less about punchy saturation and more about a clean, steady presence. And next to Blue Öyster Cult, it reads more distinctly blue and a bit more saturated, with less of that "bridge" behavior toward purple.
I use it for dashboards and finance apps when you need a primary action or key status marker that won't drift into purple or look washed out next to mid-grays. It's also great for data-heavy media interfaces, like streaming analytics pages and newsroom KPI panels, where links and highlights need to stay legible without turning harsh. It's the one you reach for when you want confidence that feels crisp, not cold, and you need the accent to hold its own against neutral UI chrome.
Pair it with warm neutrals to avoid any purple shift, and keep it away from very pale tints or it can lose some of that controlled depth.
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.