Back to palettes

Palette

Petrified Forest Bloom

Grounding and unique, this palette evokes the timeless beauty of petrified wood and fossilized earth.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Petrified Forest Bloom 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 Petrified Forest Bloom.

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

Data visualization

#3A302A#6E5B4B#9A8C78#C4B2A0#E0D6CD

Palette guide

How to use Petrified Forest Bloom

Overview

The Petrified Forest Bloom palette is a grounding and unique collection of earth tones that evokes the timeless beauty of petrified wood and fossilized earth. This palette features deep, rich brown hues like #3A302A, complemented by warm, sandy tones such as #C4B2A0, and a soft, creamy off-white at #E0D6CD. It's an excellent choice for designers and developers seeking to convey natural elegance, history, and a touch of rustic charm. The warm, muted browns create a harmonious flow, perfect for projects that require a connection to nature and a sense of enduring quality. Its unique blend offers sophistication without being overly formal.

Best used for

  • Heritage brand identity
  • Rustic home decor websites
  • Natural product packaging
  • Museum or historical site digital interfaces
  • Eco-friendly product design
  • Autumnal marketing campaigns

Suggested color roles

primary

Designate #3A302A as the primary color for strong anchors, sophisticated headers, or impactful call-to-action buttons.

secondary

Use #6E5B4B for subheadings, navigation links, or prominent graphical elements, providing a warm, inviting feel.

accent

Apply #9A8C78 for subtle highlights, borders, or informational text, offering a soft contrast.

background

Employ #E0D6CD as a clean, light background to ensure high readability and a gentle aesthetic.

text

For body text, #3A302A or a dark charcoal offers excellent legibility on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #3A302A text and lighter backgrounds like #E0D6CD for readability.
  • Check contrast levels for #6E5B4B and #9A8C78 when used as text on #E0D6CD to meet WCAG guidelines.
  • Avoid using #C4B2A0 for small text on very light backgrounds as contrast may be insufficient.
  • Prioritize larger font sizes or bolder weights for mid-tone colors like #9A8C78 when used as text.

Recommended combinations

Forest Floor

Creates a natural, grounded look for content sections with a dark header and light background.

#3A302A · #6E5B4B · #E0D6CD

Ancient Bloom

Ideal for softer, layered elements, sidebars, or subtle accent panels.

#9A8C78 · #C4B2A0 · #E0D6CD

Rustic Depth

Provides a sophisticated, earthy blend for hero images or distinct UI components.

#3A302A · #9A8C78 · #C4B2A0

CSS variables

:root {
  --petrified-forest-bloom-1: #3A302A;
  --petrified-forest-bloom-2: #6E5B4B;
  --petrified-forest-bloom-3: #9A8C78;
  --petrified-forest-bloom-4: #C4B2A0;
  --petrified-forest-bloom-5: #E0D6CD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "petrified-forest-bloom": {
        1: "#3A302A",
        2: "#6E5B4B",
        3: "#9A8C78",
        4: "#C4B2A0",
        5: "#E0D6CD",
      }
    }
  }
}

Related searches

petrified wood color schemerustic earth tonesnatural brown palettetimeless design colorsheritage branding palette

Palette colors

Hex values

Color 1#3A302A
·
Color 2#6E5B4B
·
Color 3#9A8C78
·
Color 4#C4B2A0
·
Color 5#E0D6CD
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.9:1AA18
6.2:1AA
9:1AAA
2
2:1Fail
2:1Fail
3.1:1AA18
4.5:1AA18
3
3.9:1AA18
2:1Fail
1.6:1Fail
2.3:1Fail
4
6.2:1AA
3.1:1AA18
1.6:1Fail
1.4:1Fail
5
9:1AAA
4.5:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Petrified Forest Bloom

View all earth