Palette

Bohemian Earth Weave

A rustic, natural palette of earthy browns and muted ochres, inspired by woven bohemian textiles.

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

#A37B5C#C19C7C#DBC5A3#6E4F42#4D352F

Palette guide

How to use Bohemian Earth Weave

Overview

The Bohemian Earth Weave palette is a rustic, natural collection of earthy browns and muted ochres, inspired by woven bohemian textiles. It features deep, grounding shades like #6E4F42 (Dark Brown) and #4D352F (Very Dark Brown), providing robust depth. A versatile mid-tone #A37B5C (Medium Brown) and a softer #C19C7C (Light Brown) provide subtle warmth. The delicate #DBC5A3 (Pale Ochre) rounds out the palette with an airy, natural finish. This palette is ideal for designs that aim to convey authenticity, warmth, and an organic, artisan touch. 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 physical product branding.

Best used for

Artisan textile and craft brands
Bohemian home decor brands
Sustainable product packaging
Earthy lifestyle blogs
Rustic event invitations
Handmade jewelry e-commerce

Suggested color roles

primary

Use #4D352F for strong, foundational elements like headers, navigation, or important calls-to-action, providing a deep, robust anchor.

secondary

Apply #6E4F42 for subheadings, background sections, or large graphic elements to offer rich depth and support.

accent

Utilize #A37B5C as a warm, inviting accent for interactive elements, highlights, or decorative details, maintaining a natural, grounded feel.

background

Employ #DBC5A3 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 #3A231C or a rich charcoal against lighter shades such as #DBC5A3 or #C19C7C.

Accessibility notes

Ensure sufficient contrast for text when using #4D352F or #6E4F42 on light backgrounds, or white text on these darker shades.
Avoid low-contrast pairings like #DBC5A3 text on #C19C7C 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

Woven Depth

Ideal for a strong brand presence, combining deep grounding with soft, approachable tones, like woven fibers.

#4D352F · #DBC5A3 · #A37B5C

Rustic Ochre

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

#6E4F42 · #C19C7C · #DBC5A3

Earthy Texture

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

#4D352F · #6E4F42 · #A37B5C

CSS variables

:root {
  --bohemian-earth-weave-5-1: #A37B5C;
  --bohemian-earth-weave-5-2: #C19C7C;
  --bohemian-earth-weave-5-3: #DBC5A3;
  --bohemian-earth-weave-5-4: #6E4F42;
  --bohemian-earth-weave-5-5: #4D352F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bohemian-earth-weave-5": {
        1: "#A37B5C",
        2: "#C19C7C",
        3: "#DBC5A3",
        4: "#6E4F42",
        5: "#4D352F",
      }
    }
  }
}

Hex values

Color 1#A37B5C

Color 2#C19C7C

Color 3#DBC5A3

Color 4#6E4F42

Color 5#4D352F

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

1.9:1Fail

3:1Fail

1.5:1Fail

2.9:1Fail

4.5:1AA18

2.3:1Fail

1.5:1Fail

4.4:1AA18

6.7:1AA

1.9:1Fail

2.9:1Fail

4.4:1AA18

1.5:1Fail

3:1Fail

4.5:1AA18

6.7:1AA

1.5:1Fail

Similar palettes

More like Bohemian Earth Weave

Bohemian Earth Weave

See it in context.

Ready when you are.

Built with Bohemian Earth Weave.

How to use Bohemian Earth Weave

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Woven Depth

Rustic Ochre

Earthy Texture

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Bohemian Earth Weave