Beautiful Darkness

#686d70

Deep slate gray for low-key overlays and dividers

Save
Share

About Beautiful Darkness

Beautiful Darkness is the gray that actually feels present. It's darker than and , but it doesn't have the weight 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 , less cool than , so it anchors text without the flatness of . 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 , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
5.24:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.80:1AAAAA Large

On Gray 900 #18181b

Aa
3.38:1FailAA Large

On Black #000000

Aa
4.01:1FailAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

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