Palette

Tidal Sand Warmth

Sun-kissed creams and warm browns, reflecting the soft, shifting sands of a tranquil tidal shore.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tidal Sand Warmth 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 Tidal Sand Warmth.

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

Data visualization

#EAD2B3#DBC4A5#C2AD8C#AA9578#917F6A

Palette guide

How to use Tidal Sand Warmth

Overview

The Tidal Sand Warmth palette captures the serene beauty of sun-kissed beaches, offering a harmonious range of warm browns and creams. From the light #EAD2B3 to the deeper #917F6A, these colors evoke tranquility and natural elegance. Designers can use #C2AD8C for grounding elements, while #DBC4A5 provides a soft, inviting background. Developers will find this palette excellent for creating comforting, earth-toned interfaces, ensuring visual consistency and a cohesive natural aesthetic across various digital platforms. This palette is ideal for projects related to wellness, natural products, or any brand seeking a gentle, organic, and inviting visual identity.

Best used for

Wellness and mindfulness brands
Natural and organic product lines
Coastal-themed interior design
E-commerce for artisan goods
Spa and retreat websites
Photography portfolios with natural light

Suggested color roles

primary

Use #917F6A as a grounding, deep brown for headers, footers, or dominant brand elements, conveying stability.

secondary

Apply #AA9578 for subheadings, navigation, or as a slightly lighter complement to the primary brown.

accent

Utilize #DBC4A5 sparingly for subtle highlights, interactive elements, or to draw gentle attention without harshness.

background

Employ #EAD2B3 as a soft, light cream background, providing a warm canvas that enhances readability.

text

For primary text on #EAD2B3, use #917F6A or #AA9578 to ensure excellent readability. Dark charcoal (#333333) also works well for contrast.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #DBC4A5 with #EAD2B3 for text or critical elements.
Use #917F6A or #AA9578 for main body text on #EAD2B3 to meet WCAG AA contrast standards.
Avoid using #C2AD8C for small text; reserve it for larger display text or non-textual elements.
For interactive elements, ensure hover/focus states have clear visual changes beyond subtle color shifts within this warm palette.

Recommended combinations

Sandy Shore

Provides a strong, warm contrast for text and background, with a complementary mid-tone for secondary elements.

#917F6A · #EAD2B3 · #DBC4A5

Dune Layers

Creates a soft, layered effect ideal for card elements, subtle gradients, or background patterns, evoking shifting sands.

#AA9578 · #C2AD8C · #DBC4A5

Beach Glow

A light, warm background combined with two darker browns for clear information hierarchy and depth.

#EAD2B3 · #C2AD8C · #917F6A

CSS variables

:root {
  --tidal-sand-warmth-1: #EAD2B3;
  --tidal-sand-warmth-2: #DBC4A5;
  --tidal-sand-warmth-3: #C2AD8C;
  --tidal-sand-warmth-4: #AA9578;
  --tidal-sand-warmth-5: #917F6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tidal-sand-warmth": {
        1: "#EAD2B3",
        2: "#DBC4A5",
        3: "#C2AD8C",
        4: "#AA9578",
        5: "#917F6A",
      }
    }
  }
}

Hex values

Color 1#EAD2B3

Color 2#DBC4A5

Color 3#C2AD8C

Color 4#AA9578

Color 5#917F6A

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2:1Fail

2.6:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

2.3:1Fail

1.5:1Fail

1.3:1Fail

1.8:1Fail

2:1Fail

1.7:1Fail

1.3:1Fail

2.6:1Fail

2.3:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Tidal Sand Warmth

Tidal Sand Warmth

See it in context.

Ready when you are.

Built with Tidal Sand Warmth.

How to use Tidal Sand Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sandy Shore

Dune Layers

Beach Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tidal Sand Warmth