Palette

Lava Rock Texture

A rugged and powerful palette drawing from the cooled, dark textures of volcanic rock formations.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lava Rock 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 Lava Rock Texture.

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

Data visualization

#2C2C2C#4A4A4A#6C6C6C#8E8E8E#AAAAAA

Palette guide

How to use Lava Rock Texture

Overview

The Lava Rock Texture palette draws from the rugged and powerful cooled, dark textures of volcanic rock formations. This monochrome collection, featuring a gradient of sophisticated greys from the deep #2C2C2C to the lighter #AAAAAA, is perfect for designers and developers aiming to create a strong, minimalist, and industrial aesthetic. It offers a versatile range of tones for depth and subtle variation, providing a solid foundation for projects that require a raw yet refined visual impact. This palette is excellent for applications demanding a modern, sturdy, and understated mood.

Best used for

Industrial design and engineering websites
Brutalist or minimalist web design
Photography portfolios (dark mode)
Architectural visualization
Tech and software interfaces
Urban fashion branding

Suggested color roles

primary

Use #2C2C2C as the foundational background or primary structural color, providing ultimate depth.

secondary

Employ #4A4A4A for main content areas, providing a slightly lighter but still dark base.

accent

Apply #AAAAAA as a subtle accent for highlights, interactive elements, or key information to maintain a clean look.

background

Utilize #2C2C2C for a strong, immersive background, setting a powerful and modern tone.

text

For text, #8E8E8E or #AAAAAA provides clear readability against the darker greys, or white for maximum contrast.

Accessibility notes

Ensure #AAAAAA provides sufficient contrast when used as text on darker greys like #2C2C2C or #4A4A4A.
Avoid using #6C6C6C on #4A4A4A for small text due to potentially low contrast.
White text offers the highest readability for body copy on primary and background colors.
The mid-tone #8E8E8E can be effective for secondary information or decorative elements on darker backgrounds.

Recommended combinations

Solid Rock

Ideal for primary UI, dark mode themes, and creating a strong, grounded visual hierarchy.

#2C2C2C · #4A4A4A · #AAAAAA

Ash & Stone

Perfect for subtle layering, secondary content blocks, or background textures that mimic rock formations.

#6C6C6C · #8E8E8E · #AAAAAA

Monochrome Depth

Creates compelling headers, strong visual separators, or a refined, modern aesthetic.

#2C2C2C · #6C6C6C · #8E8E8E

CSS variables

:root {
  --lava-rock-texture-1: #2C2C2C;
  --lava-rock-texture-2: #4A4A4A;
  --lava-rock-texture-3: #6C6C6C;
  --lava-rock-texture-4: #8E8E8E;
  --lava-rock-texture-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lava-rock-texture": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#8E8E8E",
        5: "#AAAAAA",
      }
    }
  }
}

Hex values

Color 1#2C2C2C

Color 2#4A4A4A

Color 3#6C6C6C

Color 4#8E8E8E

Color 5#AAAAAA

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

4.3:1AA18

6:1AA

1.6:1Fail

1.7:1Fail

2.7:1Fail

3.8:1AA18

2.7:1Fail

1.7:1Fail

1.6:1Fail

2.3:1Fail

4.3:1AA18

2.7:1Fail

1.6:1Fail

1.4:1Fail

6:1AA

3.8:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Lava Rock Texture

Lava Rock Texture

See it in context.

Ready when you are.

Built with Lava Rock Texture.

How to use Lava Rock Texture

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Solid Rock

Ash & Stone

Monochrome Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lava Rock Texture