Palette

Volcanic Stone Texture

A textured range of dark greys and browns reflects the rugged, stark beauty of volcanic rock formations.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C1C1C#4F4F4F#696969#8B4513#A0522D

Palette guide

How to use Volcanic Stone Texture

Overview

The Volcanic Stone Texture palette masterfully blends deep greys and earthy browns, creating a sense of rugged elegance and natural strength. Dominated by dark tones like #1C1C1C and #4F4F4F, it introduces warmth with #8B4513 and #A0522D, softened by #696969. This collection is perfect for projects seeking a grounded, sophisticated, and slightly rustic aesthetic, reminiscent of ancient rock formations and rich, fertile earth. Designers and developers can leverage these hues to evoke a sense of heritage, durability, and understated luxury in their work.

Best used for

Luxury masculine branding
Outdoor adventure websites
Photography portfolios (dark theme)
Architectural and interior design
High-end product packaging
Earthy, rustic digital interfaces

Suggested color roles

primary

Designate #1C1C1C as the primary base for a deep, commanding presence in layouts and large elements.

secondary

Use #4F4F4F for supporting content areas or as a background for secondary modules, offering a softer dark.

accent

Employ #A0522D as a warm, inviting accent for call-to-actions, buttons, or key illustrative elements.

background

Set #1C1C1C as the main background color for a dramatic, immersive user experience.

text

For optimal readability, use a light grey like #DEDEDE or pure white text on the darker shades, or #696969 for subtext on lighter elements.

Accessibility notes

Ensure sufficient contrast when using #696969 for text on #4F4F4F or #1C1C1C backgrounds.
The brown shades #8B4513 and #A0522D may require lighter text for good readability.
Avoid using the dark browns as text on the darkest greys without checking contrast ratios.
Prioritize lighter text colors like white or a very light grey for body copy on the darkest palette colors.

Recommended combinations

Deep Earth

Creates a strong, grounded feel, ideal for headers or prominent sections with a touch of warmth.

#1C1C1C · #8B4513 · #4F4F4F

Textured Grey

Excellent for creating a layered, subtle grey aesthetic for backgrounds and content blocks.

#4F4F4F · #696969 · #1C1C1C

Rustic Highlight

Perfect for drawing attention to key elements with a warm, earthy accent against a dark base.

#1C1C1C · #A0522D · #696969

CSS variables

:root {
  --volcanic-stone-texture-1: #1C1C1C;
  --volcanic-stone-texture-2: #4F4F4F;
  --volcanic-stone-texture-3: #696969;
  --volcanic-stone-texture-4: #8B4513;
  --volcanic-stone-texture-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-stone-texture": {
        1: "#1C1C1C",
        2: "#4F4F4F",
        3: "#696969",
        4: "#8B4513",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#4F4F4F

Color 3#696969

Color 4#8B4513

Color 5#A0522D

Accessibility

Contrast checker

2.1:1Fail

3.1:1AA18

2.4:1Fail

3:1AA18

2.1:1Fail

1.5:1Fail

1.2:1Fail

1.5:1Fail

3.1:1AA18

1.5:1Fail

1.3:1Fail

1:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

3:1AA18

1.5:1Fail

1:1Fail

1.3:1Fail

Similar palettes

More like Volcanic Stone Texture

Volcanic Stone Texture

See it in context.

Ready when you are.

Built with Volcanic Stone Texture.

How to use Volcanic Stone Texture

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Earth

Textured Grey

Rustic Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Stone Texture