Atlantis
#336172
Deep Atlantis teal-blue for dense, grounded UI sections
About Atlantis
Atlantis sits deeper and grayer than everything around it, it's the blue that looks like it's been underwater for a while. Not the sharp cold of Chill of the Night, not the teal-leaning warmth of Astral or Copacabana. This one leans muted, which means it actually recedes instead of commanding the room.
Use it in healthcare dashboards, fintech platforms, and product interfaces where you need a secondary state that reads clearly without pulling focus. It works as a persistent UI element, a hover state over dark backgrounds, or a data visualization layer that shouldn't scream. Pairs naturally with mid-tone neutrals and grays in a way the cooler blues fight against. White type sits cleanly on it without needing extra contrast work.
The thing: it's calmer and less saturated than its neighbors, which makes it feel supportive rather than commanding. That desaturation is doing the work, it won't muscle into a busy layout, but it also won't disappear into the background. Test it early against your actual grays; the mutedness shifts slightly depending on what surrounds it.
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.