Midnight Sky
#424753
Slightly warmer mid-dark slate for restrained panels
About Midnight Sky
Midnight Sky reminds me of the gray left on the screen after you dim the room and let the UI breathe. It's darker and more neutral than Isolation, but it doesn't feel as deliberately "chosen" as Deep Night. Compared to Dark Crypt, it has a smoother, cooler calm, less studio-bezel grit, with a steadier surface that doesn't sink.
I use it as the base for dark-mode sidebars and editor panels when I want hierarchy to stay crisp without slipping into that warmer undertone you start noticing in Deep Night. It works well for newsroom CMS layouts, media asset browsers, and design-system component backgrounds where grids, metadata rows, and waveform regions need to stay readable without looking heavy. It's also my go-to in audio and photo workflows when you want a consistent stage for thumbnails and inspector controls.
Caution: if you pair it with very cold grays from the family, the contrast can look a bit severe, so I keep the accents slightly more neutral and let the typography carry the emphasis.
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.
