Mediterranea
#39636a
Muted Mediterranean blue for steady, grounded UI sections
About Mediterranea
Mediterranea reads like a deep blue ink that's been softened just enough to feel calm on glass. It's less compressed than After the Storm, so it doesn't feel like a storm cloud holding its breath. And compared with Arctic Nights, it has more substance. Less airy, more anchored, but still decisively blue rather than teal.
I use it as a primary state in product dashboards, especially in fintech platforms where you need buttons, selection, and navigation states to look solid without turning chilly or sterile. In healthcare UIs, it behaves well for default active controls and table emphasis on light backgrounds. It keeps saturation controlled, so it doesn't fight busy data, yet it doesn't drift toward mid-tone gray.
Pair it with off-whites and clean neutrals. If your interface already leans cool, dial your supporting blues warmer so Mediterranea stays the one you reach for and doesn't start to feel flat.
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.
