Back to palettes

Palette

Onyx Crystal Elegance

A refined gradient of deep blacks and grays, inspired by the smooth, dark luster of onyx.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Onyx Crystal Elegance 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 Onyx Crystal Elegance.

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

Data visualization

#1C1C1C#2C2C2C#3C3C3C#4C4C4C#5C5C5C

Palette guide

How to use Onyx Crystal Elegance

Overview

The Onyx Crystal Elegance palette presents a refined gradient of deep blacks and grays, inspired by the smooth, dark luster of onyx. With shades like #1C1C1C, #2C2C2C, #3C3C3C, #4C4C4C, and #5C5C5C, this collection is perfect for designers and developers crafting sophisticated, minimalist, and luxurious digital experiences. It provides an excellent foundation for dark mode interfaces, high-end branding, and projects that demand a sleek, elegant, and modern aesthetic, ensuring a powerful visual impact.

Best used for

  • Luxury brand websites and apps
  • High-end technology interfaces
  • Photography and art portfolios
  • Elegant event branding
  • Minimalist user interfaces
  • Sophisticated fashion presentations

Suggested color roles

primary

#1C1C1C (the deepest charcoal-black) is ideal for main backgrounds, bold headings, or hero sections, setting a luxurious tone.

secondary

#2C2C2C (a dark gray) works well for sub-sections, navigation, or card backgrounds, providing subtle layering.

accent

#4C4C4C (a medium-dark gray) can be used for subtle highlights, borders, or interactive states, adding refinement without stark contrast.

background

#1C1C1C or #2C2C2C serves as the perfect foundation for sleek, sophisticated dark mode interfaces, offering depth and elegance.

text

White or a very light gray like #F5F5F5 (not in palette, but recommended) is essential for optimal readability on these dark backgrounds.

Accessibility notes

  • Always use light text (e.g., white or very light gray) on these dark backgrounds to ensure sufficient contrast and readability.
  • Ensure all text, especially on interactive elements, meets WCAG AA contrast standards against its background.
  • Avoid using similar dark shades for text and background (e.g., #2C2C2C text on #1C1C1C background) to prevent readability issues.
  • Consider a slightly brighter accent color if interactive elements require more visual prominence for user interaction.

Recommended combinations

Deep Base

Creates a sophisticated, layered dark mode foundation for web pages or application interfaces.

#1C1C1C · #2C2C2C · #3C3C3C

Subtle Depth

Ideal for card backgrounds, distinct UI sections, or subtle visual hierarchy in dark themes.

#2C2C2C · #4C4C4C · #1C1C1C

Highlight Contrast

For elements that need to subtly pop against a darker backdrop, such as borders or inactive states.

#3C3C3C · #5C5C5C · #1C1C1C

CSS variables

:root {
  --onyx-crystal-elegance-1: #1C1C1C;
  --onyx-crystal-elegance-2: #2C2C2C;
  --onyx-crystal-elegance-3: #3C3C3C;
  --onyx-crystal-elegance-4: #4C4C4C;
  --onyx-crystal-elegance-5: #5C5C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "onyx-crystal-elegance": {
        1: "#1C1C1C",
        2: "#2C2C2C",
        3: "#3C3C3C",
        4: "#4C4C4C",
        5: "#5C5C5C",
      }
    }
  }
}

Related searches

dark mode color paletteelegant black grayminimalist dark themesophisticated charcoal colorsluxury dark UI

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#2C2C2C
·
Color 3#3C3C3C
·
Color 4#4C4C4C
·
Color 5#5C5C5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2:1Fail
2.5:1Fail
2
1.2:1Fail
1.3:1Fail
1.6:1Fail
2.1:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.6:1Fail
4
2:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.5:1Fail
2.1:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Onyx Crystal Elegance

View all dark
Elegant Plum Bloom
Midnight Opera Veil
Patrician Study Room
Art Deco Symmetry
Cosmic Jellyfish Bloom
Crimson Canopy Twilight