Palette

Volcanic Cinder Trail

A stark, grounding range of greys, mirroring the rugged and austere beauty of a volcanic landscape.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#3D3D3D#6F6F6F#B5B5B5#2C2C2C

Palette guide

How to use Volcanic Cinder Trail

Overview

The "Volcanic Cinder Trail" palette offers a stark, grounding range of grays, mirroring the rugged and austere beauty of a volcanic landscape. This monochrome collection moves from the intense #1A1A1A to the luminous #B5B5B5, with robust mid-tones like #3D3D3D and #6F6F6F providing depth and versatility. Designers can leverage these sophisticated grays to create powerful, minimalist designs, professional dark mode interfaces, or branding that conveys strength, modernity, and a no-nonsense aesthetic. The palette is particularly effective for projects in tech, architecture, or any field seeking to establish a strong, reliable, and visually impactful presence.

Best used for

Dark mode interfaces and dashboards
Minimalist website designs
Industrial and architectural branding
Photography and art portfolios
High-tech product design
Professional corporate presentations

Suggested color roles

primary

#1A1A1A - A deep, almost pure black, ideal for main backgrounds, navigation, or strong headers, providing ultimate depth.

secondary

#2C2C2C - A robust dark gray, suitable for secondary content areas, dividers, or subtle accents against the primary.

accent

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

background

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

text

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

Accessibility notes

Ensure high contrast between text and background, especially when using #6F6F6F on #3D3D3D for small text.
Body text should ideally use #B5B5B5 on #1A1A1A or #2C2C2C for optimal readability in dark themes.
Avoid using very close shades (e.g., #1A1A1A and #2C2C2C) to differentiate critical interactive elements without additional visual cues.
Test contrast ratios for all interactive elements to ensure they are clearly distinguishable for all users.

Recommended combinations

Deep Trail

Creates a high-contrast dark theme with a strong base and readable text.

#1A1A1A · #3D3D3D · #B5B5B5

Cinder Layers

Excellent for layered UI components, subheadings, and a refined dark aesthetic.

#2C2C2C · #6F6F6F · #B5B5B5

Minimalist Contrast

Use darkest for background, lightest for main text, and mid-tone for secondary UI elements.

#1A1A1A · #B5B5B5 · #6F6F6F

CSS variables

:root {
  --volcanic-cinder-trail-1: #1A1A1A;
  --volcanic-cinder-trail-2: #3D3D3D;
  --volcanic-cinder-trail-3: #6F6F6F;
  --volcanic-cinder-trail-4: #B5B5B5;
  --volcanic-cinder-trail-5: #2C2C2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-cinder-trail": {
        1: "#1A1A1A",
        2: "#3D3D3D",
        3: "#6F6F6F",
        4: "#B5B5B5",
        5: "#2C2C2C",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#3D3D3D

Color 3#6F6F6F

Color 4#B5B5B5

Color 5#2C2C2C

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

8.5:1AAA

1.2:1Fail

1.6:1Fail

2.2:1Fail

5.3:1AA

1.3:1Fail

3.5:1AA18

2.2:1Fail

2.5:1Fail

2.8:1Fail

8.5:1AAA

5.3:1AA

2.5:1Fail

6.8:1AA

1.2:1Fail

1.3:1Fail

2.8:1Fail

6.8:1AA

Similar palettes

More like Volcanic Cinder Trail

Volcanic Glass Spires