Back to palettes

Palette

Coastal Driftwood Grey

Cool, muted greys reflecting the sun-bleached beauty and calm resilience of driftwood on a coastal shore.

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

#A9A9A9#708090#D3D3D3#C0C0C0#B0C4DE

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a refreshing array of cool, muted grays and subtle blues, reflecting the sun-bleached beauty and calm resilience of driftwood on a coastal shore. From the deep, stable #708090 to the light, airy #D3D3D3, this palette provides a harmonious blend of cool and neutral tones. The inclusion of classic grays like #A9A9A9 and #C0C0C0 alongside the serene blue of #B0C4DE creates a sense of depth and natural tranquility. This collection is ideal for designers seeking a calm, refined, and enduring aesthetic, embodying both strength and peace.

Best used for

  • Coastal home decor websites
  • Spa and wellness brand identity
  • Minimalist interior design concepts
  • Environmental non-profit materials
  • Luxury stationery design
  • Serene app interfaces

Suggested color roles

primary

Use #708090 for main sections, headers, or large UI elements, establishing a stable, calming foundation.

secondary

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

accent

The soft blue #B0C4DE serves well for gentle accents, interactive elements, or decorative flourishes, adding a touch of serene color.

background

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

text

Use a dark charcoal or deep gray (e.g., #333333 or #708090) for body text and navigation links to ensure excellent readability against the lighter grays and blues.

Accessibility notes

  • Ensure #708090 text has good contrast against #D3D3D3, #C0C0C0, and #A9A9A9 backgrounds.
  • Avoid using #D3D3D3, #C0C0C0, or #B0C4DE for text directly, as they are too light for general readability.
  • When using text on #708090, ensure a very light text color (e.g., white or #D3D3D3) is used for optimal contrast.
  • For interactive elements, maintain clear visual cues beyond color, especially with these subtly varying neutrals.

Recommended combinations

Serene Stone

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

#708090 · #D3D3D3 · #A9A9A9

Ocean Mist

Ideal for subtle, layered backgrounds or soft UI elements, evoking a calm, expansive feel with a hint of blue.

#B0C4DE · #C0C0C0 · #D3D3D3

Weathered Blues

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

#A9A9A9 · #708090 · #B0C4DE

CSS variables

:root {
  --coastal-driftwood-grey-6-1: #A9A9A9;
  --coastal-driftwood-grey-6-2: #708090;
  --coastal-driftwood-grey-6-3: #D3D3D3;
  --coastal-driftwood-grey-6-4: #C0C0C0;
  --coastal-driftwood-grey-6-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey-6": {
        1: "#A9A9A9",
        2: "#708090",
        3: "#D3D3D3",
        4: "#C0C0C0",
        5: "#B0C4DE",
      }
    }
  }
}

Related searches

cool grey coastal palettedriftwood blue grey schemecalm neutral hex codesserene beach colorsmuted gray blue design

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#C0C0C0
·
Color 5#B0C4DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
2
1.7:1Fail
2.7:1Fail
2.2:1Fail
2.3:1Fail
3
1.6:1Fail
2.7:1Fail
1.2:1Fail
1.2:1Fail
4
1.3:1Fail
2.2:1Fail
1.2:1Fail
1:1Fail
5
1.3:1Fail
2.3:1Fail
1.2:1Fail
1:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Hues
Coastal Dune Haze
Coastal Pebble Beach
Pebble Shore Calm
Seafoam Timberline