Palette

Seaside Driftwood Hues

Muted, natural greys and soft off-whites reflect the serene, weathered beauty of driftwood on a quiet shore.

neutralnatural5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4A#7A7A72#A6A69E#D2D2CA#EFEFED

Palette guide

How to use Seaside Driftwood Hues

Overview

The "Seaside Driftwood Hues" palette features a spectrum of muted, natural grays and soft off-whites, from the deep #4F4F4A to the airy #EFEFED. This collection is inspired by the serene, weathered beauty of driftwood found on a quiet, coastal shore. It's perfect for creating a sophisticated, understated, and naturally calming aesthetic in digital and print designs. Designers can leverage this palette to evoke a sense of tranquility, timelessness, and organic elegance across various projects, from branding to user interfaces.

Best used for

Minimalist web and app design
Art gallery branding and exhibitions
Calm mobile application interfaces
Sustainable fashion and lifestyle brands
Architectural and interior presentations
Natural product packaging

Suggested color roles

primary

Use #EFEFED for a clean, expansive base background, creating a bright and open feel.

secondary

Apply #D2D2CA for subtle content divisions, card backgrounds, or secondary UI elements.

accent

Utilize #7A7A72 for interactive elements, borders, or subtle highlights, providing gentle contrast.

background

Employ #EFEFED to establish a bright, natural, and serene foundational canvas.

text

For primary body text, use #4F4F4A, ensuring maximum readability and a sophisticated look.

Accessibility notes

Use #4F4F4A for body text on #EFEFED or #D2D2CA for good contrast and readability.
Be cautious with #A6A69E for text, as its contrast might be insufficient on lighter backgrounds; always test.
Headings in #4F4F4A will provide strong visual hierarchy and impact.
Ensure UI elements like buttons in #7A7A72 have accessible text colors (e.g., pure white or #4F4F4A if possible).

Recommended combinations

Light Foundation

Ideal for airy website structures, clean content blocks, and inviting landing pages.

#EFEFED · #D2D2CA · #A6A69E

Deep Contrast

Combine for clear text on a light background, with a strong accent for emphasis.

#EFEFED · #4F4F4A · #7A7A72

Layered Greys

Effective for complex UI elements, adding depth and subtle visual separation in design.

#D2D2CA · #A6A69E · #7A7A72

CSS variables

:root {
  --seaside-driftwood-hues-1: #4F4F4A;
  --seaside-driftwood-hues-2: #7A7A72;
  --seaside-driftwood-hues-3: #A6A69E;
  --seaside-driftwood-hues-4: #D2D2CA;
  --seaside-driftwood-hues-5: #EFEFED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-driftwood-hues": {
        1: "#4F4F4A",
        2: "#7A7A72",
        3: "#A6A69E",
        4: "#D2D2CA",
        5: "#EFEFED",
      }
    }
  }
}

Hex values

Color 1#4F4F4A

Color 2#7A7A72

Color 3#A6A69E

Color 4#D2D2CA

Color 5#EFEFED

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

7.2:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

3.8:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

5.4:1AA

2.8:1Fail

1.6:1Fail

1.3:1Fail

7.2:1AAA

3.8:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Seaside Driftwood Hues

Coastal Driftwood Relic

Coastal Driftwood Sands

Coastal Pottery Sand