Abyssal
#404c57
Deeper bluish slate gray for subdued, high-contrast UI
About Abyssal
Abyssal is darker than everything around it in this family, but it doesn't feel like a punishment. It's got cooler undertones than Black Orchid and sits noticeably deeper than Cover of Night, the kind of gray that actually recedes instead of just sitting there. It reads less mechanical than the truly cold grays, less warm than Blindfolded, and way more intentional than accident.
Use it in dark mode interfaces, design tools, and data-heavy platforms where you need a background that gets out of the way but still holds structure. It works as a container, a panel, a surface for secondary content, anywhere you're layering lighter text and midtones on top and need them to stay readable without fighting. It's the one I reach for when lighter grays feel too timid and pure black feels like overkill.
The difference: it's dark enough that you won't accidentally use it where you meant something lighter, but it's still gray enough that you can layer a second shade of gray on top and actually see the distinction. That's harder to pull off than it sounds.
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.