Soothing Sapphire
#307dd3
Deeper, calmer sapphire for focused data panels
About Soothing Sapphire
I keep noticing Soothing Sapphire on screens as that mid-depth blue that feels calm without going dim. Compared to Mykonos, it trades the airy, slightly neutral cleanliness for a richer, more "syrupy" saturation. And unlike Haddock's Sweater, it doesn't lean as cool or heavy, so it stays present instead of settling.
This is the shade I reach for when you want dashboards and finance apps to feel steady, not urgent, and you want the UI to look cohesive across tables, cards, and chart accents. I use it for primary buttons, active link states, and selected-row highlights in fintech portals, insurance admin tools, logistics tracking views, and customer settings pages. It also sits well in product marketing tiles over light grays, where you want confident, readable blue without the brightness that can read like a "hot" status.
One quirk: on very dark themes, it can drift toward "soft" and lose contrast, so I usually pair it with a deeper navy for headings and icon strokes.
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.
Similar colors
Create a gradient with Soothing Sapphire
Open the generator with this color pre-loaded.
Start creating