Palette

Bohemian Earth Weave

Inspired by natural dyes and handmade textiles, reflecting the warm, grounded spirit of bohemian art.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bohemian Earth Weave 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 Bohemian Earth Weave.

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

Data visualization

#A0522D#D2B48C#CD853F#8B4513#BC8F8F

Palette guide

How to use Bohemian Earth Weave

Overview

The Bohemian Earth Weave palette is inspired by natural dyes and handmade textiles, reflecting the warm, grounded spirit of bohemian art. It features deep, grounding shades like #A0522D (Sienna) and #8B4513 (Saddle Brown) for robust depth. The vibrant #CD853F (Peru) adds a touch of warmth and energy, while the soft, sandy #D2B48C (Tan) provides a gentle contrast. The muted rose #BC8F8F (Rosy Brown) rounds out the palette with a subtle, earthy accent. This palette is ideal for designs that aim to convey authenticity, warmth, and a handcrafted, free-spirited aesthetic. Designers will find it versatile for creating visually appealing and emotionally resonant experiences, while developers can ensure a cohesive and inviting user interface across various applications, from digital art to product branding.

Best used for

Artisan textile and craft brands
Bohemian home decor brands
Eco-friendly product packaging
Nature-themed blogs and portfolios
Rustic event invitations
Handmade jewelry e-commerce

Suggested color roles

primary

Use #8B4513 for strong, foundational elements like headers, navigation, or important calls-to-action, providing a deep, earthy anchor.

secondary

Apply #A0522D for subheadings, background sections, or large graphic elements to offer robust depth and support.

accent

Utilize #BC8F8F as a soft, inviting accent for interactive elements, highlights, or decorative details, adding a subtle rosy touch.

background

Employ #D2B48C as a soft, neutral background color for pages or content cards, ensuring readability and a gentle, organic feel.

text

For optimal readability, use a dark brown like #4A3226 or a rich charcoal against lighter shades such as #D2B48C or #BC8F8F.

Accessibility notes

Ensure sufficient contrast for text when using #8B4513 or #A0522D on light backgrounds, or white text on these darker shades.
Avoid low-contrast pairings like #D2B48C text on #BC8F8F backgrounds for essential information.
Leverage the contrast between the deepest colors and the lightest for clear visual hierarchy.
Always test color combinations with accessibility checkers to meet WCAG AA standards, especially for text and interactive elements.

Recommended combinations

Grounded Rose

Ideal for a strong brand presence, combining deep grounding with soft, approachable tones and a hint of rose.

#8B4513 · #D2B48C · #BC8F8F

Textile Warmth

Creates an inviting atmosphere for content blocks or visual storytelling, reminiscent of natural dyes.

#A0522D · #CD853F · #D2B48C

Rustic Blend

Effective for UI elements where clear separation is needed without harshness, such as cards or modals, with a rich, natural depth.

#8B4513 · #A0522D · #BC8F8F

CSS variables

:root {
  --bohemian-earth-weave-1: #A0522D;
  --bohemian-earth-weave-2: #D2B48C;
  --bohemian-earth-weave-3: #CD853F;
  --bohemian-earth-weave-4: #8B4513;
  --bohemian-earth-weave-5: #BC8F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bohemian-earth-weave": {
        1: "#A0522D",
        2: "#D2B48C",
        3: "#CD853F",
        4: "#8B4513",
        5: "#BC8F8F",
      }
    }
  }
}

Hex values

Color 1#A0522D

Color 2#D2B48C

Color 3#CD853F

Color 4#8B4513

Color 5#BC8F8F

Accessibility

Contrast checker

2.8:1Fail

1.9:1Fail

1.3:1Fail

2:1Fail

2.8:1Fail

1.5:1Fail

3.6:1AA18

1.4:1Fail