Palette

Obsidian Flow Texture

Powerful, fiery tones reflecting the raw intensity of a volcanic eruption and cooling obsidian.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#202020#400000#800000#B04000#FF4500

Palette guide

How to use Obsidian Flow Texture

Overview

The Obsidian Flow Texture palette is a powerful and intense collection of fiery tones, reflecting the raw energy of a volcanic eruption and cooling obsidian. It features a deep #202020 foundation, which then explodes into a rich spectrum of reds and oranges: #400000, #800000, #B04000, and finally, the vivid #FF4500. This palette is exceptionally dynamic, perfect for designers aiming to convey urgency, passion, or intense energy. Developers can strategically deploy these vibrant colors for calls-to-action, warning messages, or to highlight critical information, ensuring maximum visual impact. The progression from deep black to bright orange allows for dramatic gradients and compelling visual narratives, capturing attention effectively.

Best used for

Action-oriented gaming sites
Emergency services branding
High-energy event promotions
Warning systems interfaces
Sports team branding
Automotive performance marketing

Suggested color roles

primary

#202020 - A strong, dark base that grounds the fiery elements, providing depth and contrast.

secondary

#400000 - A deep, brooding red, excellent for secondary elements that need to convey seriousness or power.

accent

#FF4500 - The ultimate accent, a vibrant orange-red that demands attention for calls-to-action or critical alerts.

background

#202020 - Offers a dramatic, dark canvas that makes the reds and oranges appear even more intense and vibrant.

text

Pure white or a very light grey provides the best readability against these dark and intense background colors.

Accessibility notes

Ensure #FF4500 text has sufficient contrast against #202020, #400000, and #800000 for WCAG AA compliance.
Exercise caution when using #B04000 or #FF4500 for large blocks of text; they are best for accents.
Always use a high-contrast text color, such as white, on all dark shades within this palette.
Avoid using #400000 on #800000 for text due to insufficient contrast; these are better as background layers.

Recommended combinations

Lava Burst

Creates a high-impact hero section with a bold accent and a strong supporting red, conveying urgency and power.

#202020 · #FF4500 · #800000

Molten Layers

Ideal for layered content blocks or progress indicators, showing a progression from deep dark to glowing warmth.

#202020 · #400000 · #B04000

Fiery Alert

Perfect for warning messages or critical notifications, using the bright orange for the alert icon or button.

#800000 · #FF4500 · #202020

CSS variables

:root {
  --obsidian-flow-texture-1: #202020;
  --obsidian-flow-texture-2: #400000;
  --obsidian-flow-texture-3: #800000;
  --obsidian-flow-texture-4: #B04000;
  --obsidian-flow-texture-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-flow-texture": {
        1: "#202020",
        2: "#400000",
        3: "#800000",
        4: "#B04000",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#202020

Color 2#400000

Color 3#800000

Color 4#B04000

Color 5#FF4500

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

2.8:1Fail

4.7:1AA

1.1:1Fail

1.6:1Fail

2.9:1Fail

5:1AA

1.5:1Fail

1.6:1Fail

1.9:1Fail

3.2:1AA18

2.8:1Fail

2.9:1Fail

1.9:1Fail

1.7:1Fail

4.7:1AA

5:1AA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Obsidian Flow Texture

View all dark

Fiery Volcanic Ash

Magma Flow Descent

Volcanic Caldera Ember

Basalt Ridge Shadow

Crater Lake Depth

Lava Flow Ember