Palette

Bohemian Grove Melody

A harmonious blend of earthy neutrals and a touch of gold, inspired by free spirits and natural settings.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bohemian Grove Melody 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 Grove Melody.

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

Data visualization

#8B4513#696969#708090#D2B48C#F0E68C

Palette guide

How to use Bohemian Grove Melody

Overview

The Bohemian Grove Melody palette is a harmonious blend of earthy neutrals and a touch of gold, inspired by free spirits and natural settings. It features a deep, grounding #8B4513 (Saddle Brown) and a versatile #696969 (Dim Gray) for robust depth. The cool #708090 (Slate Gray) adds a sophisticated balance, while the warm, sandy #D2B48C (Tan) and the bright #F0E68C (Light Goldenrod Yellow) complete the natural spectrum. 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

Outdoor event promotions
Bohemian fashion and accessories
Nature-inspired wellness brands
Eclectic home decor websites
Rustic wedding invitations
Travel blogs focusing on nature

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 #696969 for subheadings, background sections, or large graphic elements to offer robust depth and support.

accent

Utilize #F0E68C as a bright, inviting accent for interactive buttons, highlights, or decorative details, adding a pop of warm energy.

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 #F0E68C.

Accessibility notes

Ensure sufficient contrast for text when using #8B4513 or #696969 on light backgrounds, or white text on these darker shades.
Avoid low-contrast pairings like #D2B48C text on #F0E68C 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 Gold

Ideal for a strong brand presence, combining deep earth with warm, golden accents for an eclectic feel.

#8B4513 · #D2B48C · #F0E68C

Rustic Gray

Creates an inviting atmosphere for content blocks or visual storytelling, with sophisticated natural tones.

#696969 · #708090 · #D2B48C

Natural Harmony

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

#8B4513 · #696969 · #708090

CSS variables

:root {
  --bohemian-grove-melody-1: #8B4513;
  --bohemian-grove-melody-2: #696969;
  --bohemian-grove-melody-3: #708090;
  --bohemian-grove-melody-4: #D2B48C;
  --bohemian-grove-melody-5: #F0E68C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bohemian-grove-melody": {
        1: "#8B4513",
        2: "#696969",
        3: "#708090",
        4: "#D2B48C",
        5: "#F0E68C",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#696969

Color 3#708090

Color 4#D2B48C

Color 5#F0E68C

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

3.6:1AA18

5.5:1AA

1.3:1Fail

1.4:1Fail

2.8:1Fail

4.3:1AA18

1.8:1Fail

1.4:1Fail

2.1:1Fail

3.2:1AA18