Palette

Bohemian Earth Loom

Inspired by handmade textiles and earthy natural dyes, celebrating bohemian artistry.

Earthnatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E4714D#8FBC8F#F5F5DC#483D8B#CC7722

Palette guide

How to use Bohemian Earth Loom

Overview

The Bohemian Earth Loom palette is a vibrant collection inspired by handmade textiles and earthy natural dyes, celebrating bohemian artistry. It features a lively #E4714D (Coral Red) and a grounding #8FBC8F (Dark Sea Green) for a unique contrast. The soft #F5F5DC (Beige) provides a warm, neutral base, while a deep #483D8B (Dark Slate Blue) adds a sophisticated, unexpected depth. A rich #CC7722 (Burnt Orange) rounds out the palette, bringing an artisanal glow. This palette is ideal for designs that aim to convey authenticity, warmth, and an eclectic, 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 fashion and accessories
Sustainable home goods e-commerce
Nature-inspired digital art
Eclectic event invitations
Handmade jewelry and decor

Suggested color roles

primary

Use #483D8B for strong, foundational elements like headers, navigation, or important calls-to-action, providing a deep, sophisticated anchor.

secondary

Apply #E4714D for subheadings, accent panels, or calls-to-action, offering a vibrant, warm contrast.

accent

Utilize #CC7722 as a rich, inviting accent for interactive buttons, highlights, or decorative details, adding an artisanal glow.

background

Employ #F5F5DC 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 #F5F5DC or #8FBC8F.

Accessibility notes

Ensure sufficient contrast for text when using #483D8B or #E4714D on light backgrounds, or white text on these darker shades.
Avoid low-contrast pairings like #F5F5DC text on #8FBC8F 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

Vibrant Earth

Ideal for a lively brand presence, combining warm vibrancy with soft, natural grounding.

#E4714D · #F5F5DC · #8FBC8F

Artisan Contrast

Creates an inviting atmosphere for content blocks or visual storytelling, with sophisticated depth and warm accents.

#483D8B · #CC7722 · #F5F5DC

Woven Harmony

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

#E4714D · #8FBC8F · #CC7722

CSS variables

:root {
  --bohemian-earth-loom-5-1: #E4714D;
  --bohemian-earth-loom-5-2: #8FBC8F;
  --bohemian-earth-loom-5-3: #F5F5DC;
  --bohemian-earth-loom-5-4: #483D8B;
  --bohemian-earth-loom-5-5: #CC7722;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bohemian-earth-loom-5": {
        1: "#E4714D",
        2: "#8FBC8F",
        3: "#F5F5DC",
        4: "#483D8B",
        5: "#CC7722",
      }
    }
  }
}

Hex values

Color 1#E4714D

Color 2#8FBC8F

Color 3#F5F5DC

Color 4#483D8B

Color 5#CC7722

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

2.9:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

4.2:1AA18

1.6:1Fail

2.8:1Fail

1.9:1Fail

8.2:1AAA

3:1AA18