Onyx
#464544
Soft cool-on-top gray for restrained hierarchy
About Onyx
Onyx feels like the shadow under a streetlight on wet pavement: dark enough to anchor the layout, but not as absolute as the near-black end of the gray range. Compared to Deepest Nightmare, it holds a touch more warmth and looks less "cold pencil." And unlike Black Panther, it doesn't press forward quite so hard. Batch Brew sits a little more lived-in and brown-dry, but Onyx stays cleaner, more even, and more neutral.
I use Onyx when you want a dark surface that won't steal attention from data or type. It's a solid base for data-heavy dashboards and admin panels, ticketing systems, and product tables where borders, dividers, and charts need contrast without turning the UI harsh. In dark mode UIs, it gives you structure without the glare you get from the darkest grays.
Pair it with cool-to-neutral text and crisp light grays. If you throw in lots of warm browns like you would with Batch Brew, Onyx can start to look slightly sooty instead of steady.
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.