Onyx

#464544

Soft cool-on-top gray for restrained hierarchy

Save
Share

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 , it holds a touch more warmth and looks less "cold pencil." And unlike , it doesn't press forward quite so hard. 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 , Onyx can start to look slightly sooty instead of steady.

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
9.57:1AAA

On Gray 100 #f5f5f5

Aa
8.77:1AAA

On Gray 900 #18181b

Aa
1.85:1Fail

On Black #000000

Aa
2.20:1Fail

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 Onyx

Open the generator with this color pre-loaded.

Start creating