Back to palettes

Palette

Volcanic Cinder Cone

The raw, dark grays and blacks of a volcanic cinder cone, stark and powerful against the sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#545B62#6F7E8A#97A1AA#B0B7BF

Palette guide

How to use Volcanic Cinder Cone

Overview

The "Volcanic Cinder Cone" palette captures the raw, dark grays and blacks of a volcanic cinder cone, stark and powerful against the sky. This sophisticated collection of cool grays, ranging from the deep #36454F to the lighter #B0B7BF, offers a consistent and cohesive visual experience. Mid-tones like #545B62 and #6F7E8A provide excellent opportunities for creating depth and hierarchy. Designers can leverage these robust hues for professional branding, minimalist interfaces, or architectural projects that demand a sense of solidity, modernity, and understated power. It's particularly effective for conveying a grounded, reliable, and sophisticated aesthetic.

Best used for

  • Corporate and financial services branding
  • Tech and software interfaces
  • Architectural and industrial design
  • Professional portfolio websites
  • Minimalist e-commerce platforms
  • Urban landscape photography

Suggested color roles

primary

#36454F - A deep, slate-like gray-blue, ideal for main content areas, headers, or primary navigation, providing a strong anchor.

secondary

#545B62 - A robust mid-dark gray, suitable for subheadings, secondary buttons, or borders, offering subtle contrast.

accent

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

background

#36454F - The darkest shade, creating a sophisticated and immersive dark mode background or a strong foundation for design.

text

#B0B7BF - For clear, readable text on dark backgrounds, ensuring excellent contrast, or a deep charcoal like #36454F for body text on light elements.

Accessibility notes

  • Ensure sufficient contrast, especially when using #97A1AA on #6F7E8A for small text, as the difference is subtle.
  • Body text should ideally use #B0B7BF on #36454F or #545B62 for optimal readability in dark themes.
  • Avoid relying solely on subtle shade differences (e.g., #545B62 and #6F7E8A) to convey important information.
  • Test contrast ratios for interactive elements to ensure they are clearly distinguishable for all users.

Recommended combinations

Cinder Base

Creates a strong dark theme with clear text and subtle layered elements.

#36454F · #545B62 · #B0B7BF

Ashy Gradient

Excellent for softer transitions in backgrounds or secondary UI components.

#545B62 · #6F7E8A · #97A1AA

Stark Professional

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

#36454F · #B0B7BF · #6F7E8A

CSS variables

:root {
  --volcanic-cinder-cone-1: #36454F;
  --volcanic-cinder-cone-2: #545B62;
  --volcanic-cinder-cone-3: #6F7E8A;
  --volcanic-cinder-cone-4: #97A1AA;
  --volcanic-cinder-cone-5: #B0B7BF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-cinder-cone": {
        1: "#36454F",
        2: "#545B62",
        3: "#6F7E8A",
        4: "#97A1AA",
        5: "#B0B7BF",
      }
    }
  }
}

Related searches

cinder cone gray palettecool gray color schemevolcanic ash graysprofessional dark blue grayminimalist slate colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#545B62
·
Color 3#6F7E8A
·
Color 4#97A1AA
·
Color 5#B0B7BF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.8:1AA18
4.9:1AA
2
1.4:1Fail
1.6:1Fail
2.6:1Fail
3.4:1AA18
3
2.4:1Fail
1.6:1Fail
1.6:1Fail
2.1:1Fail
4
3.8:1AA18
2.6:1Fail
1.6:1Fail
1.3:1Fail
5
4.9:1AA
3.4:1AA18
2.1:1Fail
1.3:1Fail

Similar palettes

More like Volcanic Cinder Cone

View all dark
Volcanic Ash
Volcanic Ash Bloom
Volcanic Ash Bloom
Volcano Ash Veins
Charred Ember Still
Lava Flow Ember