Palette

Seaside Driftwood Calm

Earthy browns and weathered greys, capturing the quiet dignity of driftwood on a peaceful shore.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Driftwood Calm 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 Seaside Driftwood Calm.

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

Data visualization

#8B4513#CD853F#F5DEB3#A9A9A9#D3D3D3

Palette guide

How to use Seaside Driftwood Calm

Overview

The "Seaside Driftwood Calm" palette, identified as seaside-driftwood-calm-2, brings together earthy browns and weathered grays to capture the quiet dignity of driftwood on a peaceful shore. This palette includes warm beige #F5DEB3, rich brown #CD853F, and deep #8B4513, complemented by subtle grays like #A9A9A9 and #D3D3D3. It's ideal for designers seeking to evoke a natural, rustic, and cozy atmosphere, reminiscent of a serene coastal landscape. This collection offers a grounded yet inviting feel for various design applications.

Best used for

Rustic home decor and furnishings
Nature-themed branding and logos
Cozy cafe or restaurant interiors
Outdoor lifestyle blogs and websites
Heritage product packaging
Warm, inviting digital interfaces

Suggested color roles

primary

Use #F5DEB3 as a warm, inviting background, providing a soft and natural base.

secondary

Apply #CD853F for headers, buttons, or accent panels to add warmth and emphasis.

accent

Utilize #8B4513 for strong calls to action, deep textural elements, or key branding.

background

Employ #F5DEB3 to establish a soft, natural, and comfortable foundational canvas.

text

For body text on lighter shades, use #8B4513 or a dark charcoal for excellent readability and depth.

Accessibility notes

Ensure #8B4513 offers good contrast when used for body text on #F5DEB3 backgrounds.
Verify sufficient contrast for any text placed on #A9A9A9 or #D3D3D3 backgrounds.
Use #CD853F with care for small text; it might require a darker background or larger font size.
Avoid using light text on #D3D3D3 or #A9A9A9 without confirming readability.

Recommended combinations

Warm Earth

Excellent for brand identities, web headers, and warm, inviting hero sections.

#F5DEB3 · #CD853F · #8B4513

Coastal Neutral

Use for background, subtle UI elements, and a touch of warm accent.

#D3D3D3 · #A9A9A9 · #CD853F

Deep Contrast

Combine for clear text on a light background, with a secondary neutral element.

#F5DEB3 · #8B4513 · #A9A9A9

CSS variables

:root {
  --seaside-driftwood-calm-2-1: #8B4513;
  --seaside-driftwood-calm-2-2: #CD853F;
  --seaside-driftwood-calm-2-3: #F5DEB3;
  --seaside-driftwood-calm-2-4: #A9A9A9;
  --seaside-driftwood-calm-2-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-driftwood-calm-2": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#F5DEB3",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#F5DEB3

Color 4#A9A9A9

Color 5#D3D3D3

Accessibility

Contrast checker

2.4:1Fail

5.4:1AA

3:1AA18

4.7:1AA

2.4:1Fail

2.3:1Fail

1.3:1Fail

2:1Fail

5.4:1AA

2.3:1Fail

1.8:1Fail

1.1:1Fail

3:1AA18

1.3:1Fail

1.8:1Fail

1.6:1Fail

4.7:1AA

2:1Fail

1.1:1Fail

1.6:1Fail

Similar palettes

More like Seaside Driftwood Calm