Back to palettes

Palette

Coastal Driftwood Grey

Subtle and natural grays and blues that capture the essence of weathered driftwood washed ashore on a calm coast.

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#808080#696969#708090#5A6D7D

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a sophisticated blend of subtle grays and muted blues, perfectly capturing the essence of weathered driftwood washed ashore on a calm coast. Ranging from the deep, grounding #5A6D7D to the lighter #A9A9A9, this palette provides a harmonious balance between cool and neutral tones. The inclusion of classic grays like #808080 and #696969 alongside the serene blue-gray of #708090 creates a sense of depth and natural texture. This collection is ideal for designers seeking a calm, refined, and enduring aesthetic, reflecting tranquility and understated strength.

Best used for

  • Coastal-themed interior design
  • Luxury marine or yachting brands
  • Environmental conservation websites
  • Minimalist home decor product lines
  • Serene spa or wellness center branding
  • Photography portfolios (oceanic, landscape)

Suggested color roles

primary

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

secondary

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

accent

The darkest shade, #5A6D7D, serves well for strong accents, important icons, or call-to-action elements that require significant visual weight.

background

Employ #A9A9A9 as a soft, neutral background color, providing an expansive and subtly textured canvas.

text

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

Accessibility notes

  • Ensure #696969 text has good contrast against #A9A9A9 background for WCAG AA compliance.
  • Avoid using #A9A9A9 for text directly, as it is too light for general readability on most backgrounds.
  • When using text on darker shades like #708090 or #5A6D7D, ensure a very light text color (e.g., white or #A9A9A9) is used.
  • For interactive elements, maintain clear visual cues beyond color, especially with these subtly varying neutrals.

Recommended combinations

Sea Stone

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

#5A6D7D · #A9A9A9 · #708090

Misty Coast

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

#808080 · #A9A9A9 · #708090

Deep Ocean Grey

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

#696969 · #5A6D7D · #808080

CSS variables

:root {
  --coastal-driftwood-grey-4-1: #A9A9A9;
  --coastal-driftwood-grey-4-2: #808080;
  --coastal-driftwood-grey-4-3: #696969;
  --coastal-driftwood-grey-4-4: #708090;
  --coastal-driftwood-grey-4-5: #5A6D7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey-4": {
        1: "#A9A9A9",
        2: "#808080",
        3: "#696969",
        4: "#708090",
        5: "#5A6D7D",
      }
    }
  }
}

Related searches

driftwood blue grey palettecalm coastal neutral colorsweathered sea tones hexserene gray blue designmuted ocean palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#808080
·
Color 3#696969
·
Color 4#708090
·
Color 5#5A6D7D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
1.7:1Fail
2.3:1Fail
2
1.7:1Fail
1.4:1Fail
1:1Fail
1.4:1Fail
3
2.3:1Fail
1.4:1Fail
1.4:1Fail
1:1Fail
4
1.7:1Fail
1:1Fail
1.4:1Fail
1.3:1Fail
5
2.3:1Fail
1.4:1Fail
1:1Fail
1.3:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Hues
Calm Ocean Sands
Coastal Driftwood Grey
Coastal Dune Haze
Coastal Pebble Beach