Palette

Earth Loom Wander

A collection inspired by handmade textiles and natural dyes, reflecting a rustic, bohemian spirit.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earth Loom Wander 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 Earth Loom Wander.

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

Data visualization

#8B4513#CD853F#A0522D#DEB887#D2B48C

Palette guide

How to use Earth Loom Wander

Overview

The Earth Loom Wander palette is inspired by handmade textiles and natural dyes, reflecting a rustic, bohemian spirit. Featuring rich browns like #8B4513, #A0522D, and #CD853F, it's beautifully complemented by softer, sandy tones such as #DEB887 and #D2B48C. This palette is ideal for designers and developers seeking to create natural, warm, and authentic experiences. It's versatile for conveying craftsmanship, wanderlust, and an organic feel across web interfaces, branding, and physical product designs, particularly those with a bohemian or artisanal aesthetic.

Best used for

Bohemian fashion brands
Handmade craft products
Sustainable home goods
Travel and lifestyle blogs
Earthy interior design
Textile art and design

Suggested color roles

primary

#CD853F - A warm, inviting orange-brown, excellent for primary UI elements or brand accents.

secondary

#A0522D - A rich, reddish-brown, ideal for supporting content or secondary highlights.

accent

#8B4513 - The deepest, most grounding saddle brown, perfect for impactful accents or calls-to-action.

background

#D2B48C - The lightest, sandy beige, providing a soft and natural canvas.

text

#8B4513 - A deep, readable saddle brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

Ensure #8B4513 or #A0522D is used for text on #D2B48C or #DEB887 to meet WCAG contrast guidelines.
Avoid using #CD853F for text on #DEB887 due to insufficient contrast.
The darkest shades provide excellent contrast for text on any of the lighter palette colors.
Test all text/background color pairs with WCAG 2.1 AA guidelines, especially for small text.

Recommended combinations

Desert Weave

Soft, warm background gradients or layered visual effects evoking natural textures.

#D2B48C · #DEB887 · #CD853F

Earth & Craft

High-contrast headings, buttons, or key information against a clean, light backdrop.

#8B4513 · #A0522D · #D2B48C

Boho Harmony

Creating balanced content blocks or decorative elements with an organic, bohemian feel.

#CD853F · #DEB887 · #A0522D

CSS variables

:root {
  --earth-loom-wander-1: #8B4513;
  --earth-loom-wander-2: #CD853F;
  --earth-loom-wander-3: #A0522D;
  --earth-loom-wander-4: #DEB887;
  --earth-loom-wander-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earth-loom-wander": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#A0522D",
        4: "#DEB887",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#A0522D

Color 4#DEB887

Color 5#D2B48C

Accessibility

Contrast checker

2.4:1Fail

1.3:1Fail

3.8:1AA18

3.6:1AA18

2.4:1Fail

1.9:1Fail

1.6:1Fail

1.5:1Fail

1.3:1Fail

1.9:1Fail

3:1AA18

2.8:1Fail

3.8:1AA18

1.6:1Fail

3:1AA18

1.1:1Fail

3.6:1AA18

1.5:1Fail

2.8:1Fail

1.1:1Fail

Similar palettes

More like Earth Loom Wander