Palette

Obsidian Cinder Glow

The stark beauty of a volcanic landscape, where dark rock meets molten fire and smoky air.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Cinder Glow 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 Cinder Glow.

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

Data visualization

#1B1A1C#3F3C3D#6E6D6D#A2A09F#D75A32

Palette guide

How to use Obsidian Cinder Glow

Overview

The Obsidian Cinder Glow palette masterfully combines deep, brooding tones with a striking fiery accent, perfect for projects requiring a dramatic and sophisticated edge. Featuring the near-black #1B1A1C as its anchor, it transitions through the warm charcoal of #3F3C3D and the mid-grey #6E6D6D, culminating in the lighter, smoky #A2A09F. The vibrant #D75A32 acts as a powerful visual spark, reminiscent of molten lava against cooled volcanic rock. This palette is ideal for creating designs that evoke strength, intensity, and a touch of raw elegance. Designers can leverage its depth for backgrounds and subtle gradients, while developers can implement the accent for calls-to-action or critical alerts, ensuring high impact.

Best used for

Luxury brand websites
Gaming interfaces
Dark mode applications
Editorial design for tech/adventure
Event branding for dramatic themes
High-end product showcases

Suggested color roles

primary

#1B1A1C - Ideal for large background areas, footers, or navigation bars, establishing a dark, sophisticated base.

secondary

#3F3C3D - Perfect for secondary panels, cards, or subtle section dividers, providing depth without being too stark.

accent

#D75A32 - A powerful choice for calls-to-action, progress indicators, or highlights that demand immediate attention.

background

#1B1A1C - Provides a deep, elegant canvas for dark themes, allowing lighter elements to stand out.

text

#A2A09F - Excellent for primary body text on dark backgrounds, offering good readability with a soft contrast, or use pure white for higher contrast.

Accessibility notes

Ensure #D75A32 text has sufficient contrast against #1B1A1C or #3F3C3D for WCAG AA compliance.
Use #A2A09F for large body text or against darker shades like #1B1A1C to maintain readability.
Avoid using #6E6D6D directly on #3F3C3D for critical information due to potentially low contrast.
Consider a pure white text on #1B1A1C for maximum readability, especially for small font sizes.

Recommended combinations

Fiery Contrast

Effective for high-impact hero sections with dark backgrounds, a vibrant call-to-action, and subtle supporting text.

#1B1A1C · #D75A32 · #A2A09F

Volcanic Depth

Creates layered dark interfaces, perfect for dashboards or subtle design elements, offering depth through shades of grey.

#1B1A1C · #3F3C3D · #6E6D6D

Smoky Embers

Suited for secondary content blocks or data visualizations, where the accent color brings focus to specific data points.

#6E6D6D · #A2A09F · #D75A32

CSS variables

:root {
  --obsidian-cinder-glow-1: #1B1A1C;
  --obsidian-cinder-glow-2: #3F3C3D;
  --obsidian-cinder-glow-3: #6E6D6D;
  --obsidian-cinder-glow-4: #A2A09F;
  --obsidian-cinder-glow-5: #D75A32;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-cinder-glow": {
        1: "#1B1A1C",
        2: "#3F3C3D",
        3: "#6E6D6D",
        4: "#A2A09F",
        5: "#D75A32",
      }
    }
  }
}

Hex values

Color 1#1B1A1C

Color 2#3F3C3D

Color 3#6E6D6D

Color 4#A2A09F

Color 5#D75A32

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

6.7:1AA

4.5:1AA18

1.6:1Fail

2.1:1Fail

4.2:1AA18

2.8:1Fail

3.4:1AA18

2.1:1Fail

2:1Fail

1.3:1Fail

6.7:1AA

4.2:1AA18

2:1Fail

1.5:1Fail

4.5:1AA18

2.8:1Fail

1.3:1Fail

1.5:1Fail

Similar palettes

More like Obsidian Cinder Glow

View all dark

Asteroid Belt Shadow

Basalt Edge

Cathedral Shadow Grey

Charcoal Depths

Charred Ember Still

Cosmic Void Depths