Back to palettes

Palette

Obsidian Crater Flow

Inspired by the raw power of volcanic landscapes, this palette features deep blacks and greys with fiery undertones.

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

#202020#3B3B3B#5A5A5A#724935#B36A4F

Palette guide

How to use Obsidian Crater Flow

Overview

The Obsidian Crater Flow palette captures the raw power of volcanic landscapes, merging deep, earthy tones with warm, fiery accents. Its foundation is built on the robust #202020, complemented by the rich #3B3B3B and mid-grey #5A5A5A. The palette then introduces a unique, warm brown #724935, reminiscent of cooled lava, before igniting with the vibrant, earthy orange #B36A4F. This combination is highly effective for designers aiming to convey strength, resilience, and a touch of organic warmth in their projects. Developers can leverage the dark grays for sophisticated backgrounds and the warmer tones for engaging calls-to-action or distinct content areas, adding depth and character to any digital experience.

Best used for

  • Adventure travel websites
  • Outdoor gear branding
  • Industrial design concepts
  • Gaming environments
  • Masculine product packaging
  • Editorial content with rugged themes

Suggested color roles

primary

#202020 - Provides a solid, dark foundation for backgrounds, navigation, and large structural elements.

secondary

#3B3B3B - Ideal for secondary panels, card backgrounds, or subtle dividing lines, adding depth without harshness.

accent

#B36A4F - A warm, inviting orange perfect for calls-to-action, important links, or focal points that need to stand out.

background

#202020 - Creates an intense, dark canvas, enhancing the prominence of lighter and warmer elements.

text

#5A5A5A - Suitable for secondary text or captions on dark backgrounds; a pure white or light grey provides better contrast for main body text.

Accessibility notes

  • Ensure #B36A4F text has sufficient contrast against #202020 or #3B3B3B for WCAG AA compliance.
  • Verify readability of #5A5A5A text on darker backgrounds, especially for smaller font sizes.
  • Avoid using #724935 for small text on #5A5A5A due to potential contrast issues.
  • For maximum text legibility, use a pure white or very light grey for primary text on #202020.

Recommended combinations

Earthy Ember

Excellent for hero sections, combining a dark base with a warm accent and legible secondary text.

#202020 · #B36A4F · #5A5A5A

Layered Flow

Creates sophisticated, multi-layered interfaces with depth, using warm brown for subtle differentiation.

#202020 · #3B3B3B · #724935

Warm Contrast

Effective for highlighting information within a mid-grey section, using the accent for data points or key takeaways.

#5A5A5A · #B36A4F · #202020

CSS variables

:root {
  --obsidian-crater-flow-1: #202020;
  --obsidian-crater-flow-2: #3B3B3B;
  --obsidian-crater-flow-3: #5A5A5A;
  --obsidian-crater-flow-4: #724935;
  --obsidian-crater-flow-5: #B36A4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-crater-flow": {
        1: "#202020",
        2: "#3B3B3B",
        3: "#5A5A5A",
        4: "#724935",
        5: "#B36A4F",
      }
    }
  }
}

Related searches

volcanic rock color schemedark grey orange paletteearthy powerful designrugged masculine colorslava flow palette

Palette colors

Hex values

Color 1#202020
·
Color 2#3B3B3B
·
Color 3#5A5A5A
·
Color 4#724935
·
Color 5#B36A4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
2.1:1Fail
4:1AA18
2
1.5:1Fail
1.6:1Fail
1.5:1Fail
2.7:1Fail
3
2.4:1Fail
1.6:1Fail
1.1:1Fail
1.7:1Fail
4
2.1:1Fail
1.5:1Fail
1.1:1Fail
1.9:1Fail
5
4:1AA18
2.7:1Fail
1.7:1Fail
1.9:1Fail

Similar palettes

More like Obsidian Crater Flow

View all dark
Obsidian Rift Spark
Volcanic Ash Flow
Volcanic Ash Glaze
Cosmic Void Depths
Deep Volcanic Glass
Gothic Chapel Stone