Silent Night
#526771
Muted cool-gray with lighter, softer steel hush
About Silent Night
I keep Silent Night for those moments when a gray needs to feel calm but not washed out. On my monitor it reads like a muted night-sky slate, lighter than Gunmetal and more restrained in saturation. The undertone is cooler than Grey Web, but it never goes as sharp and weighty as Gunmetal does.
I use it for secondary surfaces in clinical and admin interfaces where you want structure without the "heavy" pull of darker steel grays. It's great for form backgrounds, table gutters, and modal panels in healthcare records or finance back offices, especially when the UI already has darker sections and you just need everything to hold together. It also pairs nicely with deep typography and subdued borders, so the layout stays quiet but legible.
Quirk: because it's on the lighter side of the set, it can make adjacent blues look a touch more muted. If your palette trends too cool already, test it next to your primary text before locking the system.
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.