Back to palettes

Palette

Coastal Clay Path

Natural and unassuming, these hues reflect the dry, sun-baked clay and sandy paths found along rustic coastlines.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BFB79D#D9D2BC#F2EDE3#A68E6B#73644B

Palette guide

How to use Coastal Clay Path

Overview

The Coastal Clay Path palette features natural and unassuming hues, reflecting the dry, sun-baked clay and sandy paths found along rustic coastlines. This earthy collection ranges from the light, almost white #F2EDE3 to the deep, grounding #73644B, evoking nature, warmth, and understated elegance. Designers can leverage these hex codes for organic branding, tranquil digital experiences, or natural print materials. Developers will find these harmonious tones excellent for building user interfaces that feel authentic, inviting, and rich in subtle character, with #BFB79D providing a balanced mid-tone and #A68E6B offering a deeper, natural brown accent.

Best used for

  • eco-tourism and nature resorts
  • handmade craft businesses
  • natural beauty and wellness
  • rustic home decor blogs
  • sustainable fashion brands
  • travel photography portfolios

Suggested color roles

primary

#A68E6B - A rich, earthy brown, excellent for main headings, primary navigation, or prominent natural brand elements.

secondary

#BFB79D - A lighter, supportive sandy beige, perfect for subheadings, background panels, or supportive graphics.

accent

#73644B - The deepest, darkest brown, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

#F2EDE3 - The lightest, creamy off-white, providing a clean, warm, and expansive canvas.

text

#73644B - This deep brown offers excellent readability for body text against the lighter backgrounds like #F2EDE3 or #D9D2BC.

Accessibility notes

  • Text in #73644B or #A68E6B on backgrounds like #F2EDE3 or #D9D2BC should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #BFB79D for small text on the lightest background #F2EDE3 due to potential low contrast.
  • 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

Sandy Layers

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

#F2EDE3 · #D9D2BC · #BFB79D

Earthy Contrast

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

#A68E6B · #73644B · #F2EDE3

Path Harmony

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

#BFB79D · #D9D2BC · #A68E6B

CSS variables

:root {
  --coastal-clay-path-1: #BFB79D;
  --coastal-clay-path-2: #D9D2BC;
  --coastal-clay-path-3: #F2EDE3;
  --coastal-clay-path-4: #A68E6B;
  --coastal-clay-path-5: #73644B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-clay-path": {
        1: "#BFB79D",
        2: "#D9D2BC",
        3: "#F2EDE3",
        4: "#A68E6B",
        5: "#73644B",
      }
    }
  }
}

Related searches

coastal clay path colorsearthy natural paletterustic beige brown UIsandy beach brandingorganic neutral scheme

Palette colors

Hex values

Color 1#BFB79D
·
Color 2#D9D2BC
·
Color 3#F2EDE3
·
Color 4#A68E6B
·
Color 5#73644B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
1.6:1Fail
2.9:1Fail
2
1.3:1Fail
1.3:1Fail
2.1:1Fail
3.8:1AA18
3
1.7:1Fail
1.3:1Fail
2.7:1Fail
4.9:1AA
4
1.6:1Fail
2.1:1Fail
2.7:1Fail
1.8:1Fail
5
2.9:1Fail
3.8:1AA18
4.9:1AA
1.8:1Fail

Similar palettes

More like Coastal Clay Path

View all earth
Artisan Clay Texture
Artisan Clay Vessel
Artisan Clay Vessel
Bohemian Earth Vessel
Clay Canyon Artifacts
Desert Clay Hues