Beautiful Darkness
#686d70
Deep slate gray for low-key overlays and dividers
About Beautiful Darkness
Beautiful Darkness is the gray that actually feels present. It's darker than Batman and Blue Blood, but it doesn't have the weight Classic Movie carries, there's a muted, almost dusty quality to it that keeps it from feeling heavy. It sits in a pocket where saturation drops just enough that the color reads as deliberate restraint, not default selection.
Use it for secondary surfaces in serious interfaces: healthcare records, financial dashboards, admin tools where the content demands focus and the UI shouldn't compete. It works as a form background, a disabled state, a secondary card layer. The darkness grounds it, darker than Catfish, less cool than Blue Blood, so it anchors text without the flatness of Batman. It pairs cleanly with deep text and doesn't fight with muted or cool accents.
The difference: it's slightly warmer and less saturated than Blue Blood, so if you've committed to visible cool tones elsewhere, this one might read softer by comparison. Test it next to your coldest elements first. But if you need a secondary surface that feels chosen rather than neutral, this is the one.
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 Beautiful Darkness
Open the generator with this color pre-loaded.
Start creating