Palette

Coastal Clay Shore

Warm, earthy tones found on sun-baked coastal cliffs and sandy shores, with a hint of natural clay.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A77F5B#C2976D#DDAE81#F5C799#FDE3BC

Palette guide

How to use Coastal Clay Shore

Overview

The "Coastal Clay Shore" palette presents a radiant collection of warm, sun-baked earth tones, reminiscent of sun-drenched coastal cliffs and soft sandy beaches. This palette, featuring shades from the inviting #A77F5B to the soft, luminous #FDE3BC, is perfect for designs aiming for a natural, airy, and slightly rustic feel. The progressive lightness of #C2976D, #DDAE81, and #F5C799 offers a beautiful gradient, ideal for creating depth and visual flow. It evokes the tranquil beauty of a serene shoreline, making it an excellent choice for projects requiring warmth, openness, and an organic aesthetic.

Best used for

Beach-themed resort branding
Natural beauty product lines
Home decor with a coastal-boho vibe
Photography portfolios (landscape, travel)
Websites for eco-friendly businesses
Summer fashion collections

Suggested color roles

primary

Use #A77F5B for prominent elements like headers or main call-to-actions, providing a grounding, warm anchor.

secondary

Apply #C2976D to supporting sections, subheadings, or decorative details, offering a softer, sunnier complement.

accent

#DDAE81 works well for highlighting interactive elements or subtle visual cues, adding a touch of bright warmth.

background

Leverage the lightest shade, #FDE3BC, for clean, expansive backgrounds, creating an open, airy, and inviting canvas.

text

A deep, dark brown like charcoal or black (e.g., #333333) is recommended for optimal readability against these warm, light backgrounds.

Accessibility notes

Text in #A77F5B or #C2976D will require a light background (like #FDE3BC) for good contrast.
Avoid using #FDE3BC or #F5C799 for text, as they lack sufficient contrast against most backgrounds.
Ensure any text on #DDAE81 is dark enough; consider charcoal or black.
For critical information, use high-contrast combinations, potentially pairing a very dark text (charcoal) with the lightest background (#FDE3BC).

Recommended combinations

Sandy Shores

Excellent for a bright, airy layout, with the darkest shade providing a strong anchor for text or key elements.

#FDE3BC · #DDAE81 · #A77F5B

Sun-Kissed Earth

Creates a warm, inviting feel for hero sections or product displays, highlighting natural textures.

#C2976D · #F5C799 · #A77F5B

Dune Gradient

Perfect for subtle background gradients or layered UI elements, mimicking the varying light on sand dunes.

#FDE3BC · #F5C799 · #DDAE81

CSS variables

:root {
  --coastal-clay-shore-1: #A77F5B;
  --coastal-clay-shore-2: #C2976D;
  --coastal-clay-shore-3: #DDAE81;
  --coastal-clay-shore-4: #F5C799;
  --coastal-clay-shore-5: #FDE3BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-clay-shore": {
        1: "#A77F5B",
        2: "#C2976D",
        3: "#DDAE81",
        4: "#F5C799",
        5: "#FDE3BC",
      }
    }
  }
}

Hex values

Color 1#A77F5B

Color 2#C2976D

Color 3#DDAE81

Color 4#F5C799

Color 5#FDE3BC

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

2.3:1Fail

2.9:1Fail

1.4:1Fail

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.8:1Fail

1.3:1Fail

1.6:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

2.9:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

Similar palettes

More like Coastal Clay Shore

Coastal Clay Shore

See it in context.

Ready when you are.

Built with Coastal Clay Shore.

How to use Coastal Clay Shore

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sandy Shores

Sun-Kissed Earth

Dune Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Clay Shore