Palette

Earth Lore

Grounding browns and warm neutrals, telling tales of ancient landscapes and forgotten lore.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F3A2C#7C6356#A59086#C7B9B0#E4DDD7

Palette guide

How to use Earth Lore

Overview

The Earth Lore palette offers grounding browns and warm neutrals, telling tales of ancient landscapes and forgotten lore. Ranging from the deep #4F3A2C to the light #E4DDD7, and including balanced mid-tones like #7C6356, #A59086, and #C7B9B0, this palette exudes a natural, vintage, and subtle mood. Designers and developers can leverage these colors to create sophisticated, historical, or calm experiences. It's ideal for projects aiming to convey heritage, wisdom, and an organic feel across web interfaces, branding, and physical product designs, particularly those with a classic or artisanal aesthetic.

Best used for

Historical brand identity
Museum exhibit design
Vintage-themed websites
Natural history publications
Earthy product packaging
Art and antique restoration

Suggested color roles

primary

#7C6356 - A balanced, warm medium brown, excellent for primary UI elements or brand accents.

secondary

#A59086 - A lighter, supportive brown-grey, ideal for secondary backgrounds or subtle highlights.

accent

#4F3A2C - The deepest, most grounding dark brown, perfect for impactful accents or calls-to-action.

background

#E4DDD7 - The lightest, almost off-white, providing a clean and natural canvas.

text

#4F3A2C - A deep, readable dark brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

Ensure #4F3A2C is used for text on #E4DDD7 or #C7B9B0 to meet WCAG contrast guidelines.
Avoid using #A59086 for text on #C7B9B0 due to insufficient contrast.
The darkest shades provide excellent contrast for text on any of the lighter palette colors.
Test all text/background color pairs with WCAG 2.1 AA guidelines, especially for small text.

Recommended combinations

Ancient Parchment

Soft, layered backgrounds, content cards, or subtle graphic elements to mimic aged paper.

#E4DDD7 · #C7B9B0 · #A59086

Deep Roots

High-contrast headings, buttons, or key information against a clean, light backdrop.

#4F3A2C · #7C6356 · #E4DDD7

Lore Harmony

Creating balanced content blocks or decorative elements with a vintage, historical feel.

#A59086 · #C7B9B0 · #7C6356

CSS variables

:root {
  --earth-lore-1: #4F3A2C;
  --earth-lore-2: #7C6356;
  --earth-lore-3: #A59086;
  --earth-lore-4: #C7B9B0;
  --earth-lore-5: #E4DDD7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earth-lore": {
        1: "#4F3A2C",
        2: "#7C6356",
        3: "#A59086",
        4: "#C7B9B0",
        5: "#E4DDD7",
      }
    }
  }
}

Hex values

Color 1#4F3A2C

Color 2#7C6356

Color 3#A59086

Color 4#C7B9B0

Color 5#E4DDD7

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.6:1AA

7.9:1AAA

1.9:1Fail

1.8:1Fail

2.9:1Fail

4.1:1AA18

3.5:1AA18

1.8:1Fail

1.6:1Fail

2.3:1Fail

5.6:1AA

2.9:1Fail

1.6:1Fail

1.4:1Fail

7.9:1AAA

4.1:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Earth Lore

Aged Manuscript Bindings

Aged Papyrus Lore

Aged Patina Copper