Back to palettes

Palette

Serene Earth Tone

A peaceful and grounded palette inspired by the serene, natural tones of earth and stone.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Earth Tone 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 Serene Earth Tone.

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

Data visualization

#B08D69#C1AA8A#D6C2A9#EBE1D3#A57E5C

Palette guide

How to use Serene Earth Tone

Overview

The Serene Earth Tone palette offers a peaceful and grounded collection, inspired by the natural shades of earth and stone. Ranging from the rich, deep brown of #A57E5C to the soft, creamy beige of #EBE1D3, and encompassing warm mid-tones like #B08D69 and #C1AA8A, this palette exudes a sense of tranquility and understated elegance. It's ideal for designers aiming to create warm, inviting, and sophisticated environments. Developers can leverage these harmonious neutrals for clean, minimalist interfaces, sustainable brand websites, or any application where a natural, calming, and timeless aesthetic is desired, promoting a sense of stability and comfort.

Best used for

  • Rustic or minimalist interior design
  • Sustainable fashion brands
  • Artisanal product packaging
  • Yoga and mindfulness platforms
  • Coffee shop branding
  • High-end furniture websites

Suggested color roles

primary

#B08D69 - A warm, inviting earth brown, perfect for establishing a grounded and sophisticated brand identity.

secondary

#C1AA8A - A lighter, versatile tan that complements the primary, suitable for subheadings or subtle accents.

accent

#D6C2A9 - A soft, creamy beige that can gently highlight interactive elements or provide visual separation.

background

#EBE1D3 - A very light, almost off-white beige, ideal for clean, spacious, and warm backgrounds.

text

#A57E5C for primary text on light backgrounds like #EBE1D3, or a near-white for text on darker shades.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter colors like #D6C2A9 on #EBE1D3.
  • #A57E5C offers strong contrast for text on #EBE1D3, ensuring readability.
  • Avoid using #C1AA8A or #D6C2A9 for small text against each other due to potential low contrast.
  • For interactive elements, consider using a darker shade like #B08D69 for active states against lighter backgrounds.

Recommended combinations

Grounded Elegance

A classic, high-contrast pairing for elegant branding, with a light background and deep, readable text.

#EBE1D3 · #A57E5C · #B08D69

Natural Layers

Smooth, tonal progression for subtle depth in layered UI or natural illustrations.

#B08D69 · #C1AA8A · #D6C2A9

Earthy Highlight

Dark, rich background with a very light accent and a warm mid-tone for secondary content.

#A57E5C · #EBE1D3 · #C1AA8A

CSS variables

:root {
  --serene-earth-tone-1: #B08D69;
  --serene-earth-tone-2: #C1AA8A;
  --serene-earth-tone-3: #D6C2A9;
  --serene-earth-tone-4: #EBE1D3;
  --serene-earth-tone-5: #A57E5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-earth-tone": {
        1: "#B08D69",
        2: "#C1AA8A",
        3: "#D6C2A9",
        4: "#EBE1D3",
        5: "#A57E5C",
      }
    }
  }
}

Related searches

serene earth tones palettenatural neutral colorscalm brown beige schememinimalist earthy brandingwarm organic UI colors

Palette colors

Hex values

Color 1#B08D69
·
Color 2#C1AA8A
·
Color 3#D6C2A9
·
Color 4#EBE1D3
·
Color 5#A57E5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.8:1Fail
2.4:1Fail
1.2:1Fail
2
1.4:1Fail
1.3:1Fail
1.7:1Fail
1.6:1Fail
3
1.8:1Fail
1.3:1Fail
1.3:1Fail
2.1:1Fail
4
2.4:1Fail
1.7:1Fail
1.3:1Fail
2.8:1Fail
5
1.2:1Fail
1.6:1Fail
2.1:1Fail
2.8:1Fail

Similar palettes

More like Serene Earth Tone

View all earth
Matcha Tea Ceremony
Bamboo Grove Mist
Coastal Driftwood Hues
Desert Sage Bloom
Dune Seagrass Drift
Enchanted Garden Gate