Back to palettes

Palette

Sediment Layer Strata

Reflecting the layered beauty of natural rock formations and geological strata.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sediment Layer Strata 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 Sediment Layer Strata.

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#F5DEB3

Palette guide

How to use Sediment Layer Strata

Overview

The Sediment Layer Strata color palette evokes the rich, multi-layered beauty of geological formations, offering a grounded and organic feel. Featuring deep earth tones like #8B4513 and #A0522D, it transitions smoothly through a warm, inviting mid-tone of #CD853F, culminating in softer, sandy hues such as #D2B48C and #F5DEB3. This versatile palette is perfect for projects aiming to convey authenticity, warmth, and a connection to nature. Designers can leverage its earthy depth for impactful branding, while developers will appreciate its harmonious range for creating visually cohesive and comforting digital experiences across various UI elements and content blocks.

Best used for

  • Eco-friendly and sustainable brand identities
  • Nature-inspired website designs and apps
  • Interior design visualization and mood boards
  • Artisan craft product packaging
  • Educational content on geology or natural history
  • Cozy café or rustic restaurant branding

Suggested color roles

primary

#8B4513 - Ideal for strong headers, primary call-to-action buttons, or foundational brand elements that require a deep, authoritative presence.

secondary

#A0522D - Excellent for subheadings, prominent graphic elements, or secondary navigation, providing a rich, warm complement to the primary color.

accent

#CD853F - Use sparingly for highlights, interactive states, or small decorative details that need to pop with a warm, inviting glow.

background

#D2B48C - A soft, neutral base perfect for main content areas, large sections, or overall page backgrounds, offering warmth without overwhelming.

text

#8B4513 - Provides excellent contrast on lighter backgrounds like #F5DEB3 or #D2B48C, ensuring readability for body text and navigation labels. For a softer option, a dark charcoal could also work.

Accessibility notes

  • Ensure sufficient contrast between #8B4513 or #A0522D text and lighter backgrounds like #D2B48C or #F5DEB3 for WCAG AA compliance.
  • Avoid placing #CD853F text directly on #D2B48C or #F5DEB3 backgrounds without careful contrast checking; it may lack sufficient contrast.
  • Use #F5DEB3 or #D2B48C for larger font sizes if used as text, especially on darker backgrounds, to improve readability.
  • Consider using a very dark neutral or black for body text on the lightest colors (#D2B48C, #F5DEB3) if #8B4513 feels too warm for extensive reading.

Recommended combinations

Earthy Foundation

Perfect for a strong brand identity: #8B4513 for logos, #A0522D for supporting elements, and #D2B48C as a clean background.

#8B4513 · #A0522D · #D2B48C

Warm Highlight

Ideal for UI elements where #A0522D is primary, #CD853F adds an accent, and #F5DEB3 provides a soft, readable text background.

#A0522D · #CD853F · #F5DEB3

Natural Contrast

Use #8B4513 for dark text, #F5DEB3 for a clean background, and #CD853F for interactive elements or highlights.

#8B4513 · #CD853F · #F5DEB3

CSS variables

:root {
  --sediment-layer-strata-1: #8B4513;
  --sediment-layer-strata-2: #A0522D;
  --sediment-layer-strata-3: #CD853F;
  --sediment-layer-strata-4: #D2B48C;
  --sediment-layer-strata-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sediment-layer-strata": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

earth tone color palettenatural organic colorsgeological strata palettewarm brown color schemerustic design colors

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#CD853F
·
Color 4#D2B48C
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
3.6:1AA18
5.4:1AA
2
1.3:1Fail
1.9:1Fail
2.8:1Fail
4.3:1AA18
3
2.4:1Fail
1.9:1Fail
1.5:1Fail
2.3:1Fail
4
3.6:1AA18
2.8:1Fail
1.5:1Fail
1.5:1Fail
5
5.4:1AA
4.3:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Sediment Layer Strata

View all earth
Sedimentary Rock Vein
Canyon Wall Amber
Ancient Canyon Echo
Ancient Clay Vessel
Ancient Earth Pigment
Arid Flower Sparkle