Palette

Obsidian Crater Flow

A stark, deep palette featuring cool grays and near-blacks with a hint of deep red, like obsidian rock.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#2F4F4F#4F4F4F#696969#8B0000

Palette guide

How to use Obsidian Crater Flow

Overview

The Obsidian Crater Flow palette delivers a stark and powerful aesthetic, drawing inspiration from deep volcanic rock and subtle, ominous undertones. Anchored by the profound near-black #1C1C1C, it introduces a unique cool dark grey-green #2F4F4F, alongside the solid #4F4F4F and lighter #696969 grays. A deep, intense red, #8B0000, serves as a potent accent, evoking the raw, smoldering core of a volcano. This palette is excellent for designers seeking to create a sophisticated yet dramatic atmosphere, perfect for applications requiring depth, mystery, and a controlled burst of powerful color. Developers can utilize the dark base for elegant interfaces and the red for impactful alerts or key features.

Best used for

Cybersecurity interfaces
Luxury automotive branding
Gaming UI/UX
High-tech product design
Dark-themed websites
Architectural visualization

Suggested color roles

primary

#1C1C1C - Establishes a deep, unyielding foundation for backgrounds, headers, and primary structural elements.

secondary

#2F4F4F - Offers a subtle, cool contrast for secondary panels, card backgrounds, or unique content sections.

accent

#8B0000 - A strong, serious red ideal for critical alerts, error states, or highly important calls-to-action.

background

#1C1C1C - Provides a sleek, dark canvas that enhances the perceived quality of content and other colors.

text

#696969 - Suitable for secondary text or captions, offering good readability on darker shades; use a pure white for main body text.

Accessibility notes

Ensure #8B0000 text has high contrast against all background shades, especially #1C1C1C, for accessibility.
Use #696969 for body text on #1C1C1C or #2F4F4F, verifying WCAG AA contrast ratios.
Avoid pairing #4F4F4F with #696969 for small text due to insufficient contrast.
Consider a bright white for critical text against #1C1C1C to guarantee maximum readability.

Recommended combinations

Deep Core

Perfect for hero sections, combining a dark base with a bold accent and legible supporting text.

#1C1C1C · #8B0000 · #696969

Smoldering Layers

Creates an elegant, multi-layered dark interface for dashboards or complex data displays.

#1C1C1C · #2F4F4F · #4F4F4F

Accent Highlight

Effective for drawing attention to specific elements or data points within a darker content block.

#4F4F4F · #8B0000 · #1C1C1C

CSS variables

:root {
  --obsidian-crater-flow-2-1: #1C1C1C;
  --obsidian-crater-flow-2-2: #2F4F4F;
  --obsidian-crater-flow-2-3: #4F4F4F;
  --obsidian-crater-flow-2-4: #696969;
  --obsidian-crater-flow-2-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-crater-flow-2": {
        1: "#1C1C1C",
        2: "#2F4F4F",
        3: "#4F4F4F",
        4: "#696969",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#2F4F4F

Color 3#4F4F4F

Color 4#696969

Color 5#8B0000

Accessibility

Contrast checker

1.9:1Fail

2.1:1Fail

3.1:1AA18

1.7:1Fail

1.9:1Fail

1.1:1Fail

1.6:1Fail

1.1:1Fail

2.1:1Fail

1.1:1Fail

1.5:1Fail

1.2:1Fail

3.1:1AA18

1.6:1Fail

1.5:1Fail

1.8:1Fail

1.7:1Fail

1.1:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Obsidian Crater Flow

Obsidian Crater Flow

See it in context.

Ready when you are.

Built with Obsidian Crater Flow.

How to use Obsidian Crater Flow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Core

Smoldering Layers

Accent Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Obsidian Crater Flow