Noir
#312b27
Cool near-black gray for high-contrast surfaces
About Noir
Noir reads like the underside of a roasted walnut, but it stays firmly gray when you check it next to true blacks. What I notice first is the restraint: it's deep enough to feel anchored, yet it doesn't go cola-warm or Holy Crow-smoked. The brown neighbors have a heavier pull; Noir just holds the line with a cooler, steady undertone.
I reach for it when the UI needs depth without the shell turning brown panel or drifting into the powdery neutrality of Kilimanjaro. It's a strong fit for dashboards and finance apps where charts, tables, and dense labels have to stay crisp and readable. I also like it for admin consoles in retail ops and logistics, and for dark CMS templates where thumbnails should pop against a grounded backdrop, not a liquor-toned one.
Pair it with soft off-whites or slightly warm grays so borders don't look washed, and keep blue accents moderate or the gray can start to feel a bit flat.
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.