Back to palettes

Palette

Volcanic Dusk

Somber greys and near-blacks reflect the stark beauty and raw power of a dormant volcano.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#232B2B#4A4A4A#6E6E6E#8F8F8F#B0B0B0

Palette guide

How to use Volcanic Dusk

Overview

The "Volcanic Dusk" palette offers a sophisticated range of dark greys and near-blacks, reflecting the somber beauty of a dormant volcano at twilight. With its deepest shade #232B2B providing a solid anchor and lighter tones like #B0B0B0 offering gentle contrast, this palette is ideal for creating designs that exude seriousness, elegance, and a rugged, natural feel. Designers can use it for powerful branding, while developers will find it excellent for dark-themed interfaces, ensuring good readability with well-chosen text colors.

Best used for

  • Luxury brand websites
  • Professional portfolios
  • Dark mode UI/UX design
  • Photography and art galleries
  • Automotive or industrial design
  • Environmental or geological themed content

Suggested color roles

primary

#232B2B - A very dark, almost black shade, perfect for dominant backgrounds or robust structural elements.

secondary

#4A4A4A - Use for main content panels, subheadings, or as a strong divider, providing a slightly softer dark tone.

accent

#B0B0B0 - A light, airy grey for subtle highlights, interactive states, or delicate iconography, offering gentle contrast.

background

#232B2B - Establishes a deep, immersive dark setting, making lighter content visually pop with understated elegance.

text

#B0B0B0 or #8F8F8F - For primary text on the darkest backgrounds, ensuring excellent readability and a refined aesthetic.

Accessibility notes

  • Ensure #B0B0B0 or #8F8F8F text on #232B2B or #4A4A4A meets WCAG contrast requirements.
  • Avoid using adjacent mid-tones like #6E6E6E and #8F8F8F for critical text or small elements.
  • Lighter colors are crucial for interactive elements to ensure visibility on darker backgrounds.
  • Test readability across various screen types and lighting conditions.

Recommended combinations

Deep Contrast

Creates a strong, legible text-on-background combination with a versatile mid-tone for secondary elements.

#232B2B · #B0B0B0 · #6E6E6E

Layered Greys

Ideal for building subtle depth in UI elements, such as cards or layered panels.

#4A4A4A · #8F8F8F · #232B2B

Soft Transitions

Excellent for hover states, subtle gradients, or background patterns requiring gentle tonal shifts.

#6E6E6E · #8F8F8F · #B0B0B0

CSS variables

:root {
  --volcanic-dusk-1: #232B2B;
  --volcanic-dusk-2: #4A4A4A;
  --volcanic-dusk-3: #6E6E6E;
  --volcanic-dusk-4: #8F8F8F;
  --volcanic-dusk-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-dusk": {
        1: "#232B2B",
        2: "#4A4A4A",
        3: "#6E6E6E",
        4: "#8F8F8F",
        5: "#B0B0B0",
      }
    }
  }
}

Related searches

dark grey web designvolcanic inspired colorsmuted charcoal paletteelegant dark uirugged grey color scheme

Palette colors

Hex values

Color 1#232B2B
·
Color 2#4A4A4A
·
Color 3#6E6E6E
·
Color 4#8F8F8F
·
Color 5#B0B0B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.5:1AA18
6.7:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.1:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
4.5:1AA18
2.7:1Fail
1.6:1Fail
1.5:1Fail
5
6.7:1AA
4.1:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Dusk

View all dark
Charred Ember Still
Lava Flow Ember
Asteroid Belt Shadow
Basalt Edge
Cathedral Shadow Grey
Charcoal Depths