Back to palettes

Palette

Obsidian Peak Dusk

Somber tones of volcanic rock and twilight, offering a brooding yet elegant geological depth.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Peak Dusk 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 Peak Dusk.

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

Data visualization

#2C3539#606060#404040#5A0002#800000

Palette guide

How to use Obsidian Peak Dusk

Overview

Obsidian Peak Dusk presents a brooding yet elegant geological depth, combining somber tones of volcanic rock and twilight. This palette features deep charcoals like #2C3539 and #404040, providing a solid, dark foundation. What sets it apart are the dramatic, muted reds: #5A0002 and #800000, which evoke a hidden fiery core or a dramatic sunset over a peak. These reds offer powerful accents against the dark grays, making the palette ideal for designs that require intensity, drama, and a touch of raw power.

Best used for

  • Gaming interfaces and branding
  • Dramatic film titles or posters
  • Rock band or music branding
  • Themed event websites (e.g., sci-fi, fantasy)
  • Impactful editorial design
  • Automotive performance branding

Suggested color roles

primary

Use #2C3539 as the main background, offering a dark, cool charcoal base that feels robust.

secondary

Employ #404040 for secondary content areas, cards, or subtle overlays, providing depth.

accent

Apply #800000 for critical calls to action, warning messages, or dramatic highlights to draw immediate attention.

background

The deep #2C3539 is ideal for setting a dramatic, brooding tone for the overall design.

text

For primary body text, #606060 provides good readability on darker backgrounds. Use white or near-white for headlines.

Accessibility notes

  • Ensure high contrast for #800000 accents against the dark backgrounds, especially for interactive elements.
  • Avoid using the muted reds for large blocks of text; reserve them for highlights or critical information.
  • Check that #606060 text on #2C3539 or #404040 meets WCAG AA standards for readability.
  • Provide clear hover and focus states for all interactive elements, particularly those using red accents.

Recommended combinations

Dramatic Contrast

A dark base with a powerful red accent for calls to action and a legible gray for body text.

#2C3539 · #800000 · #606060

Subtle Fire

Use a mid-dark gray background with a deeper, more subtle red for icons or small decorative elements, and lighter text.

#404040 · #5A0002 · #606060

Volcanic Layers

For layered UI, where #2C3539 is the background, #404040 for panels, and #606060 for primary text.

#2C3539 · #404040 · #606060

CSS variables

:root {
  --obsidian-peak-dusk-1: #2C3539;
  --obsidian-peak-dusk-2: #606060;
  --obsidian-peak-dusk-3: #404040;
  --obsidian-peak-dusk-4: #5A0002;
  --obsidian-peak-dusk-5: #800000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-peak-dusk": {
        1: "#2C3539",
        2: "#606060",
        3: "#404040",
        4: "#5A0002",
        5: "#800000",
      }
    }
  }
}

Related searches

volcanic color schemedramatic dark palettered and grey designgaming UI colorspowerful brand colors

Palette colors

Hex values

Color 1#2C3539
·
Color 2#606060
·
Color 3#404040
·
Color 4#5A0002
·
Color 5#800000
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
1.2:1Fail
1.2:1Fail
1.1:1Fail
2
2:1Fail
1.6:1Fail
2.3:1Fail
1.7:1Fail
3
1.2:1Fail
1.6:1Fail
1.4:1Fail
1.1:1Fail
4
1.2:1Fail
2.3:1Fail
1.4:1Fail
1.3:1Fail
5
1.1:1Fail
1.7:1Fail
1.1:1Fail
1.3:1Fail

Similar palettes

More like Obsidian Peak Dusk

View all dark
Volcano Ash Veins
Volcanic Ember Flow
Cathedral Shadow Grey
Celestial Altar Stone
Charred Ember Still
Crimson Sunset Cloud