Palette

Coastal Clay Hues

Warm and earthy tones of sun-baked coastal clay and sandy beaches.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Clay Hues 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 Coastal Clay Hues.

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

Data visualization

#D2B48C#B8860B#DAA520#BC8F8F#CD853F

Palette guide

How to use Coastal Clay Hues

Overview

The Coastal Clay Hues palette captures the warm and earthy tones of sun-baked coastal clay and sandy beaches. This inviting collection features the light tan of #D2B48C, the rich goldenrod of #DAA520, and the subtle rose-brown of #BC8F8F. With the deep golden brown of #B8860B and the vibrant rust of #CD853F, this palette evokes nature, warmth, and rustic charm. Designers can leverage these hex codes for artisanal branding, cozy digital experiences, or natural print materials. Developers will find these harmonious tones excellent for building user interfaces that feel organic, inviting, and rich in character.

Best used for

artisanal pottery shops
natural skincare brands
desert or beach tourism
rustic wedding themes
organic food packaging
southwestern decor websites

Suggested color roles

primary

#CD853F - A vibrant, earthy rust-orange, excellent for main headings, call-to-action buttons, or prominent brand elements.

secondary

#D2B48C - A warm, inviting tan, perfect for subheadings, background panels, or supportive graphics.

accent

#B8860B - A deep golden brown, ideal for strong accents, important links, or focal points that require depth and sophistication.

background

#D2B48C - The lightest, warm tan, providing a comforting, expansive, and inviting canvas.

text

#B8860B - This deep golden brown offers excellent readability for body text against the lighter backgrounds like #D2B48C or #DAA520.

Accessibility notes

Text in #B8860B or #CD853F on backgrounds like #D2B48C or #DAA520 should meet WCAG AA contrast standards.
The lighter #BC8F8F might have insufficient contrast with #D2B48C; verify for readability.
Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone browns.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Sunbaked Sands

For creating warm, layered backgrounds or inviting card designs, evoking natural textures.

#D2B48C · #DAA520 · #BC8F8F

Earthy Gold

Ideal for professional layouts, using the deeper browns for headlines and lighter tones for content.

#B8860B · #CD853F · #D2B48C

Clay & Rust

For content blocks or subtle dividers, maintaining a rich and harmonious visual flow with natural depth.

#DAA520 · #BC8F8F · #CD853F

CSS variables

:root {
  --coastal-clay-hues-1: #D2B48C;
  --coastal-clay-hues-2: #B8860B;
  --coastal-clay-hues-3: #DAA520;
  --coastal-clay-hues-4: #BC8F8F;
  --coastal-clay-hues-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-clay-hues": {
        1: "#D2B48C",
        2: "#B8860B",
        3: "#DAA520",
        4: "#BC8F8F",
        5: "#CD853F",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#B8860B

Color 3#DAA520

Color 4#BC8F8F

Color 5#CD853F

Accessibility

Contrast checker

1.7:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Coastal Clay Hues

Coastal Clay Hues

See it in context.

Ready when you are.

Built with Coastal Clay Hues.

How to use Coastal Clay Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunbaked Sands

Earthy Gold

Clay & Rust

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Clay Hues