Palette

Deep Onyx Glaze

A sophisticated gradient of deep, lustrous blacks, inspired by polished onyx stone.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Onyx Glaze reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Deep Onyx Glaze.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#0A0A0A#1C1C1C#2F2F2F#404040#525252

Palette guide

How to use Deep Onyx Glaze

Overview

The Deep Onyx Glaze palette presents a sophisticated gradient of deep, lustrous blacks, inspired by polished onyx stone. Ranging from the profound #0A0A0A to the elegant #525252, this palette is perfect for designs requiring sleekness, luxury, and minimalist impact. Designers can leverage these shades to create powerful digital experiences, while developers will find them ideal for dark mode UI, high-end branding, and typography that demands a strong, refined presence. The subtle shifts between #1C1C1C and #2F2F2F allow for nuanced depth and layering, making it versatile for both bold statements and understated elegance.

Best used for

Luxury fashion or automotive websites
High-end tech product interfaces
Minimalist portfolio sites
Art gallery digital platforms
Professional photography showcases
Elegant event branding

Suggested color roles

primary

Utilize #1C1C1C as the main background or primary content color, providing a deep, sophisticated, and stable foundation.

secondary

Apply #2F2F2F for secondary content areas, panels, or navigation, offering a subtle yet clear visual distinction and layered effect.

accent

Introduce #525252 as a soft accent for interactive elements, subtle dividers, or hover states, ensuring refinement without harshness.

background

The deepest hue, #0A0A0A, is excellent for expansive backgrounds or header sections, establishing an immediate tone of luxury and profound depth.

text

For optimal readability, use a crisp white or very light gray. #525252 can be used for secondary text or subtle details on the darkest backgrounds.

Accessibility notes

Ensure very high contrast for text on #0A0A0A, #1C1C1C, and #2F2F2F by using light text (e.g., pure white).
The lighter shades like #404040 and #525252 provide some contrast for text, but pure white is often best for legibility.
Avoid using adjacent dark grays for small text or critical UI elements without careful contrast checks.
Always test color combinations with accessibility tools to ensure WCAG compliance for readability, especially on dark themes.

Recommended combinations

Onyx Layers

Ideal for creating a layered dark background or card system, conveying depth and sleekness in a minimalist design.

#0A0A0A · #1C1C1C · #2F2F2F

Glaze Highlight

Use #1C1C1C as a base, with #404040 for secondary elements and #525252 for subtle, refined highlights or accents.

#1C1C1C · #404040 · #525252

Deep Refinement

Excellent for a dark, luxurious background with a soft, contrasting highlight and a balanced mid-tone for supporting details.

#0A0A0A · #525252 · #2F2F2F

CSS variables

:root {
  --deep-onyx-glaze-1: #0A0A0A;
  --deep-onyx-glaze-2: #1C1C1C;
  --deep-onyx-glaze-3: #2F2F2F;
  --deep-onyx-glaze-4: #404040;
  --deep-onyx-glaze-5: #525252;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-onyx-glaze": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#2F2F2F",
        4: "#404040",
        5: "#525252",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#1C1C1C

Color 3#2F2F2F

Color 4#404040

Color 5#525252

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.9:1Fail

2.5:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

2.2:1Fail

1.5:1Fail

1.3:1Fail

1.7:1Fail

1.9:1Fail

1.6:1Fail

1.3:1Fail

2.5:1Fail

2.2:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Deep Onyx Glaze

Deep Onyx Glaze

See it in context.

Ready when you are.

Built with Deep Onyx Glaze.

How to use Deep Onyx Glaze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Onyx Layers

Glaze Highlight

Deep Refinement

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Deep Onyx Glaze