Palette

Volcanic Obsidian Flow

A stark, powerful range of grays, mirroring the cooled, sharp textures of obsidian rock from ancient lava flows.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Obsidian Flow 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 Volcanic Obsidian Flow.

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

Data visualization

#0D0D0D#2B2B2B#474747#707070#9C9C9C

Palette guide

How to use Volcanic Obsidian Flow

Overview

The Volcanic Obsidian Flow palette presents a stark, powerful range of grays, mirroring the cooled, sharp textures of obsidian rock from ancient lava flows. This monochrome collection focuses on smooth transitions within the mid-to-dark grey spectrum, offering sophistication and a muted strength. Key colors include the profound #0D0D0D, the versatile #474747, and the lighter #9C9C9C. Designers can leverage this palette for corporate websites, professional tools, or any project requiring a clean, understated, yet powerful aesthetic. Developers will find these hues ideal for creating elegant dark mode interfaces that prioritize readability and a refined user experience.

Best used for

Corporate websites and professional service platforms
Data visualization and analytics dashboards
Sophisticated dark mode interfaces
Industrial design and engineering presentations
Clean minimalist aesthetics in digital products
Photography and visual art portfolios

Suggested color roles

primary

Utilize #2B2B2B as a solid, foundational dark grey for primary content blocks or main structural elements.

secondary

Apply #474747 as a versatile mid-grey for supporting elements, subheadings, or secondary navigation.

accent

Use #9C9C9C as the lightest grey for subtle highlights, borders, or inactive states, adding visual clarity.

background

Employ #0D0D0D as the deepest dark grey for primary backdrops, providing a stable and professional base.

text

For dark backgrounds, use #9C9C9C or #707070 for main text readability. Black or dark charcoal can be used for contrast on #9C9C9C.

Accessibility notes

Crucial to ensure sufficient contrast ratios (WCAG AA/AAA) for all text, especially with mid-grey pairings.
Avoid using #0D0D0D and #2B2B2B as text and background together due to low contrast.
Test text legibility on all background colors, particularly for small font sizes and less prominent text.
Ensure interactive elements have clear focus states, perhaps using a distinct lighter border or shadow.

Recommended combinations

Smooth Flow

Creates a seamless, dark to mid-grey gradient perfect for backgrounds or layered UI elements.

#0D0D0D · #2B2B2B · #474747

Obsidian Detail

Provides a clear contrast for primary content with lighter grey accents for details or inactive states.

#2B2B2B · #707070 · #9C9C9C

Professional Base

Offers a strong, clean base with distinct levels of grey for structured content and highlights.

#0D0D0D · #474747 · #9C9C9C

CSS variables

:root {
  --volcanic-obsidian-flow-1: #0D0D0D;
  --volcanic-obsidian-flow-2: #2B2B2B;
  --volcanic-obsidian-flow-3: #474747;
  --volcanic-obsidian-flow-4: #707070;
  --volcanic-obsidian-flow-5: #9C9C9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-obsidian-flow": {
        1: "#0D0D0D",
        2: "#2B2B2B",
        3: "#474747",
        4: "#707070",
        5: "#9C9C9C",
      }
    }
  }
}

Hex values

Color 1#0D0D0D

Color 2#2B2B2B

Color 3#474747

Color 4#707070

Color 5#9C9C9C

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.9:1AA18

7.1:1AAA

1.4:1Fail

1.5:1Fail

2.9:1Fail

5.2:1AA

2.1:1Fail

1.5:1Fail

1.9:1Fail

3.4:1AA18

3.9:1AA18

2.9:1Fail

1.9:1Fail

1.8:1Fail

7.1:1AAA

5.2:1AA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Volcanic Obsidian Flow