Palette

Onyx Marble Ink

A deep and rich palette inspired by polished onyx, academia, and subtle ink tones.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Onyx Marble Ink 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 Marble Ink.

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

Data visualization

#000000#1C1C1C#2E2E2E#424242#708090

Palette guide

How to use Onyx Marble Ink

Overview

The Onyx Marble Ink palette is a deep and rich collection inspired by polished onyx, academia, and subtle ink tones. Comprising #000000, #1C1C1C, #2E2E2E, #424242, and #708090, it offers a sophisticated range of dark grays and a unique slate accent. This palette is perfect for designers and developers aiming to create elegant, mysterious, and high-end digital or print experiences. It provides an excellent foundation for projects that require a dramatic, luxurious, and intellectual aesthetic, ensuring a powerful and memorable visual presence.

Best used for

Academic institution websites
High-end publication design
Fine art portfolios and galleries
Sophisticated technology branding
Luxury product displays
Elegant dark mode themes

Suggested color roles

primary

#000000 (true black) is ideal for main backgrounds, bold statements, or immersive full-screen sections, offering maximum impact.

secondary

#1C1C1C (a deep off-black) works well for sub-sections, subtle layering, or navigation, providing depth without harshness.

accent

#708090 (a slate gray) can be used for unique highlights, interactive elements that need to stand out, or decorative borders, adding a refined touch.

background

#000000 or #1C1C1C serves as a dramatic, immersive dark background, perfect for creating a luxurious and focused user experience.

text

White or a very light gray (e.g., #F0F0F0) is crucial for optimal readability on these deep dark backgrounds.

Accessibility notes

It is crucial to use light text (e.g., white) on #000000, #1C1C1C, and #2E2E2E to ensure sufficient readability for all users.
#708090 can be used for secondary text or subtle UI elements, but always check its contrast against the chosen background.
Ensure interactive elements are clearly distinguishable; #708090 can be an effective highlight for this purpose.
Avoid using #424242 text on #2E2E2E backgrounds due to insufficient contrast, which can hinder readability.

Recommended combinations

Inkwell Depth

Creates a profound, sophisticated dark foundation for web pages, ideal for immersive content.

#000000 · #1C1C1C · #2E2E2E

Marble Accent

For striking contrast, such as highlights, calls to action, or key information on a dark canvas.

#1C1C1C · #708090 · #000000

Layered Contrast

Ideal for intricate UI components or subtle visual hierarchy, providing depth and distinction.

#2E2E2E · #424242 · #708090

CSS variables

:root {
  --onyx-marble-ink-1: #000000;
  --onyx-marble-ink-2: #1C1C1C;
  --onyx-marble-ink-3: #2E2E2E;
  --onyx-marble-ink-4: #424242;
  --onyx-marble-ink-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "onyx-marble-ink": {
        1: "#000000",
        2: "#1C1C1C",
        3: "#2E2E2E",
        4: "#424242",
        5: "#708090",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#1C1C1C

Color 3#2E2E2E

Color 4#424242

Color 5#708090

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2.1:1Fail

5.2:1AA

1.2:1Fail

1.3:1Fail

1.7:1Fail

4.2:1AA18

1.5:1Fail

1.3:1Fail

1.4:1Fail

3.3:1AA18

2.1:1Fail

1.7:1Fail

1.4:1Fail

2.5:1Fail

5.2:1AA

4.2:1AA18

3.3:1AA18

2.5:1Fail

Similar palettes

More like Onyx Marble Ink