Palette

Volcanic Basalt Texture

A strong, raw collection of dark greys, reflecting the rugged and minimalist texture of volcanic basalt rock.

darkminimal5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#222222#333333#444444#555555#666666

Palette guide

How to use Volcanic Basalt Texture

Overview

The "Volcanic Basalt Texture" palette presents a strong, raw collection of dark grays, reflecting the rugged and minimalist texture of volcanic basalt rock. This monochromatic range, from the deep #222222 to the slightly lighter #666666, offers exceptional consistency and subtle variations. Designers can leverage these sophisticated grays to build robust, understated interfaces, professional branding, or architectural designs that emphasize solidity and modern elegance. The palette's inherent simplicity makes it perfect for creating a powerful visual impact without relying on bright colors, ensuring focus remains on content and functionality. Developers will appreciate its straightforward application.

Best used for

Minimalist website and app design
Industrial design aesthetics
Luxury automotive branding
Architectural firm portfolios
Dark mode UI themes
Professional tech interfaces

Suggested color roles

primary

#222222 - A deep, almost black gray, ideal for main backgrounds, navigation, or strong headers, providing ultimate depth.

secondary

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

accent

#666666 - The lightest gray in the palette, perfect for subtle highlights, interactive states, or delicate outlines against darker elements.

background

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

text

#666666 - For clear, readable text on dark backgrounds, or a deep black like #222222 for body text on light elements.

Accessibility notes

Ensure sufficient contrast, especially when using #555555 on #444444 for small text, as the difference is subtle.
Body text should ideally use #666666 on #222222 or #333333 for optimal readability in dark themes.
Avoid using very close shades (e.g., #333333 and #444444) to differentiate critical interactive elements.
Test contrast ratios for all text and interactive elements to meet WCAG guidelines, as this palette is low contrast among its own shades.

Recommended combinations

Basalt Depth

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

#222222 · #333333 · #666666

Rugged Professional

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

#333333 · #444444 · #666666

Subtle Gradient

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

#444444 · #555555 · #666666

CSS variables

:root {
  --volcanic-basalt-texture-1: #222222;
  --volcanic-basalt-texture-2: #333333;
  --volcanic-basalt-texture-3: #444444;
  --volcanic-basalt-texture-4: #555555;
  --volcanic-basalt-texture-5: #666666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-basalt-texture": {
        1: "#222222",
        2: "#333333",
        3: "#444444",
        4: "#555555",
        5: "#666666",
      }
    }
  }
}

Hex values

Color 1#222222

Color 2#333333

Color 3#444444

Color 4#555555

Color 5#666666

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.1:1Fail

2.8:1Fail

1.3:1Fail

1.7:1Fail

2.2:1Fail

1.6:1Fail

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

2.8:1Fail

2.2:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Volcanic Basalt Texture

Brutalist Concrete Form

Volcanic Basalt Texture

See it in context.

Ready when you are.

Built with Volcanic Basalt Texture.

How to use Volcanic Basalt Texture

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Basalt Depth

Rugged Professional

Subtle Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Basalt Texture