Palette

Volcanic Soil Rich

A grounded palette inspired by the rich, dark soil found in volcanic regions, fertile and deep.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Soil Rich 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 Soil Rich.

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

Data visualization

#3D291F#5D3E2E#8A644D#B48C6F#E0B491

Palette guide

How to use Volcanic Soil Rich

Overview

The "Volcanic Soil Rich" palette is a deeply grounded and natural scheme, inspired by the fertile, dark earth of volcanic regions. It transitions beautifully from the profound `#3D291F` and rich `#5D3E2E` to the warm `#8A644D` and lighter, earthy tones of `#B48C6F` and `#E0B491`. This palette evokes a sense of organic warmth, stability, and natural richness, perfect for designs that aim for an authentic, rustic, or sophisticated earthy aesthetic. Designers and developers can leverage its harmonious tones for welcoming and reliable visual experiences.

Best used for

Organic food and beverage branding
Eco-friendly product packaging
Natural skincare and beauty products
Rustic interior design concepts
Artisanal crafts and handmade goods websites
Agricultural and sustainable living platforms

Suggested color roles

primary

Use `#5D3E2E` as a rich, grounding base for main content areas or primary navigation, offering warmth.

secondary

Apply `#8A644D` as a warm mid-tone for accents, secondary information, or subtle visual separations.

accent

Utilize `#E0B491` as a light, natural highlight for calls to action, interactive elements, or soft details.

background

Employ `#3D291F` as a deep, fertile dark background, providing a sense of organic depth and stability.

text

For excellent readability on dark backgrounds, use `#E0B491` for text or a creamy white for critical headings and calls to action.

Accessibility notes

Text in `#E0B491` provides good contrast on `#3D291F`, `#5D3E2E`, and `#8A644D` backgrounds.
Be cautious when pairing `#B48C6F` text on `#8A644D` due to potential low contrast; check carefully.
For critical text on the darkest shades, a near-white or light cream will ensure maximum readability and WCAG compliance.
Always check contrast ratios for all text and interactive elements to meet accessibility standards.

Recommended combinations

Fertile Ground

Creates a deep soil base with a light, warm highlight, ideal for organic branding and headers.

#3D291F · #5D3E2E · #E0B491

Earth Harvest

Provides a warm, natural progression of earthy tones, useful for layered sections or visual storytelling.

#5D3E2E · #8A644D · #B48C6F

Rich Contrast

Combines a deep background with a bright accent and warm mid-tone, perfect for impactful calls to action.

#3D291F · #E0B491 · #8A644D

CSS variables

:root {
  --volcanic-soil-rich-1: #3D291F;
  --volcanic-soil-rich-2: #5D3E2E;
  --volcanic-soil-rich-3: #8A644D;
  --volcanic-soil-rich-4: #B48C6F;
  --volcanic-soil-rich-5: #E0B491;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-soil-rich": {
        1: "#3D291F",
        2: "#5D3E2E",
        3: "#8A644D",
        4: "#B48C6F",
        5: "#E0B491",
      }
    }
  }
}

Hex values

Color 1#3D291F

Color 2#5D3E2E

Color 3#8A644D

Color 4#B48C6F

Color 5#E0B491

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

4.5:1AA

7.2:1AAA

1.4:1Fail

1.8:1Fail

3.2:1AA18

5.1:1AA

2.6:1Fail

1.8:1Fail

1.7:1Fail

2.8:1Fail

4.5:1AA

3.2:1AA18

1.7:1Fail

1.6:1Fail

7.2:1AAA

5.1:1AA

2.8:1Fail

1.6:1Fail

Similar palettes

More like Volcanic Soil Rich