Back to palettes

Palette

Volcanic Vent Steam

Captures the raw power of volcanic steam vents and the subtle glow of magma beneath, with an intense feel.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Vent Steam 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 Volcanic Vent Steam.

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

Data visualization

#2C2C2C#8C2E2E#DD5522#FF8844#5C5C5C

Palette guide

How to use Volcanic Vent Steam

Overview

The Volcanic Vent Steam palette delivers an intense and dramatic visual experience, capturing the raw energy of a volcano. It masterfully combines deep, brooding greys like #2C2C2C and #5C5C5C with fiery reds and oranges, including the smoldering #8C2E2E, vibrant #DD5522, and glowing #FF8844. This palette is designed for projects that demand attention and evoke a sense of power, danger, and dynamic heat. Ideal for designers and developers looking to create high-impact visuals, it's perfect for themes related to action, energy, and elemental forces.

Best used for

  • Gaming UI and environments
  • Action-oriented brand identities
  • High-energy event promotions
  • Automotive design concepts
  • Extreme sports apparel
  • Dramatic movie posters

Suggested color roles

primary

Use #DD5522 as a bold, central color for interactive elements or key graphical focal points.

secondary

Apply #8C2E2E for supporting elements that need to convey depth and a smoldering intensity.

accent

Reserve #FF8844 for powerful highlights, alerts, or elements requiring maximum visual pop and energy.

background

Employ #2C2C2C as a deep, stable background to allow the fiery colors to truly stand out.

text

For clear readability on dark backgrounds, use #FF8844 or a crisp white. Use #5C5C5C for subtle secondary text on lighter surfaces.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #5C5C5C on #2C2C2C.
  • The vibrant #FF8844 and #DD5522 might pose challenges for colorblind users; provide alternative indicators.
  • Avoid placing small text in #8C2E2E on #DD5522 as the contrast might be insufficient for readability.
  • Use high contrast text (e.g., white) on the fiery colors like #DD5522 and #FF8844 for optimal legibility.

Recommended combinations

Molten Core

Creates a dramatic, high-contrast effect, ideal for powerful calls-to-action or hero sections.

#2C2C2C · #DD5522 · #FF8844

Smoldering Depth

Provides a brooding, intense background with subtle red undertones for an atmospheric feel.

#2C2C2C · #8C2E2E · #5C5C5C

Vent Glow

Excellent for highlighting interactive elements or icons against a slightly lighter dark background.

#5C5C5C · #DD5522 · #FF8844

CSS variables

:root {
  --volcanic-vent-steam-1: #2C2C2C;
  --volcanic-vent-steam-2: #8C2E2E;
  --volcanic-vent-steam-3: #DD5522;
  --volcanic-vent-steam-4: #FF8844;
  --volcanic-vent-steam-5: #5C5C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-vent-steam": {
        1: "#2C2C2C",
        2: "#8C2E2E",
        3: "#DD5522",
        4: "#FF8844",
        5: "#5C5C5C",
      }
    }
  }
}

Related searches

volcanic color schememolten lava palettefiery red orangedramatic dark colorsintense earth tones

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#8C2E2E
·
Color 3#DD5522
·
Color 4#FF8844
·
Color 5#5C5C5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.6:1AA18
5.9:1AA
2.1:1Fail
2
1.7:1Fail
2.1:1Fail
3.5:1AA18
1.2:1Fail
3
3.6:1AA18
2.1:1Fail
1.6:1Fail
1.7:1Fail
4
5.9:1AA
3.5:1AA18
1.6:1Fail
2.8:1Fail
5
2.1:1Fail
1.2:1Fail
1.7:1Fail
2.8:1Fail

Similar palettes

More like Volcanic Vent Steam

View all dark
Fiery Volcanic Ash
Lava Rock Flow
Magma Flow Descent
Magma Pool Glimmer
Obsidian Flow Edge
Obsidian Flow Texture