Back to palettes

Palette

Volcanic Caldera Smoke

A brooding gradient of dark grays, capturing the mysterious plumes of smoke rising from a volcanic caldera.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Caldera Smoke 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 Caldera Smoke.

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

Data visualization

#303030#4F4F4F#696969#8D8D8D#B0B0B0

Palette guide

How to use Volcanic Caldera Smoke

Overview

The "Volcanic Caldera Smoke" palette is a brooding gradient of dark grays, capturing the mysterious plumes of smoke rising from a volcanic caldera. This sophisticated monochrome collection ranges from the deep #303030 to the lighter #B0B0B0, providing a smooth transition of cool, muted tones. Mid-grays like #4F4F4F and #696969 offer excellent versatility for creating depth and hierarchy. Designers can leverage this palette for elegant, moody designs, professional dark mode interfaces, or branding that conveys seriousness and a contemporary edge. It's particularly effective for projects requiring a subtle yet powerful visual identity, making content stand out.

Best used for

  • Dark mode web and app design
  • Professional corporate websites
  • Luxury product showcases
  • Architectural visualization
  • Photography portfolios
  • Modern art gallery interfaces

Suggested color roles

primary

#303030 - A deep, dark charcoal, ideal for main backgrounds, navigation, or strong headers, providing a solid foundation.

secondary

#4F4F4F - A versatile dark gray, suitable for secondary content areas, dividers, or subtle accents against the primary.

accent

#B0B0B0 - The lightest gray, perfect for subtle highlights, interactive states, or delicate outlines against darker elements.

background

#303030 - The darkest shade, creating a dramatic, immersive, and sophisticated backdrop for any design.

text

#B0B0B0 - For clear, readable text on dark backgrounds, ensuring excellent contrast, or a deep black like #303030 for body text on light elements.

Accessibility notes

  • Ensure sufficient contrast, especially when using #8D8D8D on #696969 for small text, as the difference is subtle.
  • Body text should ideally use #B0B0B0 on #303030 or #4F4F4F for optimal readability in dark themes.
  • Avoid using very close shades (e.g., #4F4F4F and #696969) to differentiate critical interactive elements without additional cues.
  • Test contrast ratios for all text and interactive elements to ensure they are clearly distinguishable for all users.

Recommended combinations

Smoke Depth

Creates a deep, layered dark theme with subtle variations and good text contrast.

#303030 · #4F4F4F · #B0B0B0

Moody Professional

Excellent for robust UI components, subheadings, and a refined modern aesthetic.

#4F4F4F · #696969 · #B0B0B0

Subtle Gradient

Use for secondary sections or components where a softer, lighter dark gray aesthetic is desired.

#696969 · #8D8D8D · #B0B0B0

CSS variables

:root {
  --volcanic-caldera-smoke-1: #303030;
  --volcanic-caldera-smoke-2: #4F4F4F;
  --volcanic-caldera-smoke-3: #696969;
  --volcanic-caldera-smoke-4: #8D8D8D;
  --volcanic-caldera-smoke-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-caldera-smoke": {
        1: "#303030",
        2: "#4F4F4F",
        3: "#696969",
        4: "#8D8D8D",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

dark gray smoke palettevolcanic monochrome schememoody gray UI colorsprofessional dark graysmodern minimalist black and gray

Palette colors

Hex values

Color 1#303030
·
Color 2#4F4F4F
·
Color 3#696969
·
Color 4#8D8D8D
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
4:1AA18
6.1:1AA
2
1.6:1Fail
1.5:1Fail
2.5:1Fail
3.8:1AA18
3
2.4:1Fail
1.5:1Fail
1.7:1Fail
2.5:1Fail
4
4:1AA18
2.5:1Fail
1.7:1Fail
1.5:1Fail
5
6.1:1AA
3.8:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Caldera Smoke

View all dark
Charred Ember Still
Dark Academia Ink
Gothic Library Gloom
Gothic Stone Whisper
Lava Flow Ember
Midnight Library Gloom