Back to palettes

Palette

Coastal Driftwood Grey

Soft, muted greys and off-whites inspired by sun-bleached driftwood found on serene coastlines.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Driftwood Grey 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 Driftwood Grey.

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

Data visualization

#727B7C#909899#B0B5B6#D0D4D5#E5E9EA

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a serene collection of soft, muted greys and off-whites, inspired by sun-bleached driftwood found on tranquil coastlines. This harmonious gradient moves from the grounding #727B7C to the airy, near-white #E5E9EA. The intermediate shades of #909899, #B0B5B6, and #D0D4D5 provide a smooth, consistent transition, ideal for creating depth and subtle variations in any design. This palette is perfect for designers seeking a calm, minimalist, and serene aesthetic, conveying peace, sophistication, and a timeless appeal with its balanced neutral tones.

Best used for

  • Minimalist branding and identity
  • Spa and wellness websites
  • High-end product packaging (luxury goods)
  • Clean and modern interior design
  • Architectural visualization
  • Art gallery exhibition materials

Suggested color roles

primary

Use #909899 for main sections, headers, or prominent UI elements, establishing a solid, modern foundation.

secondary

Apply #B0B5B6 for supporting content blocks, subheadings, or subtle background variations, maintaining a cohesive neutral tone.

accent

The darkest shade, #727B7C, serves well for strong accents, important icons, or call-to-action elements, ensuring high impact and readability.

background

Employ #E5E9EA as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use #727B7C for body text and navigation links to ensure excellent readability against the lighter grays.

Accessibility notes

  • Ensure #727B7C text has excellent contrast against #E5E9EA and #D0D4D5 backgrounds for WCAG AA compliance.
  • Avoid using #E5E9EA or #D0D4D5 for text directly, as they are too light for readability on most backgrounds.
  • When using text on darker shades like #909899, ensure a very light text color (e.g., white or #E5E9EA) is used.
  • This palette offers inherent contrast opportunities due to its gradient, making it easier to select accessible pairings.

Recommended combinations

Washed Stone

Creates a strong, classic contrast, perfect for headers, footers, or sections needing a grounded yet refined presence.

#727B7C · #E5E9EA · #909899

Gentle Layers

Ideal for subtle, layered backgrounds or soft UI elements, providing depth without overwhelming the design.

#B0B5B6 · #D0D4D5 · #E5E9EA

Coastal Depth

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#909899 · #727B7C · #B0B5B6

CSS variables

:root {
  --coastal-driftwood-grey-1: #727B7C;
  --coastal-driftwood-grey-2: #909899;
  --coastal-driftwood-grey-3: #B0B5B6;
  --coastal-driftwood-grey-4: #D0D4D5;
  --coastal-driftwood-grey-5: #E5E9EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey": {
        1: "#727B7C",
        2: "#909899",
        3: "#B0B5B6",
        4: "#D0D4D5",
        5: "#E5E9EA",
      }
    }
  }
}

Related searches

serene grey color palettedriftwood inspired neutralscalm coastal hex codesminimalist washed greylight neutral web design

Palette colors

Hex values

Color 1#727B7C
·
Color 2#909899
·
Color 3#B0B5B6
·
Color 4#D0D4D5
·
Color 5#E5E9EA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
2.9:1Fail
3.5:1AA18
2
1.5:1Fail
1.4:1Fail
2:1Fail
2.4:1Fail
3
2.1:1Fail
1.4:1Fail
1.4:1Fail
1.7:1Fail
4
2.9:1Fail
2:1Fail
1.4:1Fail
1.2:1Fail
5
3.5:1AA18
2.4:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Driftwood Grey
Coastal Pebble Beach
Pebble Shore Calm
Seaside Stone Garden
Calm Ocean Sands
Cloud Burst Horizon