Back to palettes

Palette

Coastal Driftwood Grey

Soothing greys and weathered blues, reflecting the subtle beauty of driftwood and sea-kissed shores.

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

#3D4A4D#627A81#91A7AF#CEDEE3#A5B6BC

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a sophisticated range of soothing greys and weathered blues, beautifully reflecting the subtle beauty of driftwood and sea-kissed shores. From the deep, grounding #3D4A4D to the airy, near-white #CEDEE3, this palette provides a harmonious gradient. The intermediate shades of #627A81, #91A7AF, and #A5B6BC create a sense of depth and natural texture, ideal for elegant layering and subtle differentiation. This collection is perfect for designers seeking a calm, minimalist, and enduring aesthetic, conveying tranquility, modernity, and a deep connection to nature.

Best used for

  • Minimalist web and app design
  • High-end coastal living brands
  • Environmental non-profit branding
  • Modern interior design projects
  • Luxury spa or wellness retreat websites
  • Architectural firms specializing in natural materials

Suggested color roles

primary

Use #627A81 for main sections, headers, or prominent UI elements, establishing a solid, calming foundation.

secondary

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

accent

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

background

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

text

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

Accessibility notes

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

Recommended combinations

Deep Ocean Grey

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

#3D4A4D · #CEDEE3 · #627A81

Misty Shore

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

#91A7AF · #A5B6BC · #CEDEE3

Weathered Blues

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

#627A81 · #3D4A4D · #91A7AF

CSS variables

:root {
  --coastal-driftwood-grey-7-1: #3D4A4D;
  --coastal-driftwood-grey-7-2: #627A81;
  --coastal-driftwood-grey-7-3: #91A7AF;
  --coastal-driftwood-grey-7-4: #CEDEE3;
  --coastal-driftwood-grey-7-5: #A5B6BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey-7": {
        1: "#3D4A4D",
        2: "#627A81",
        3: "#91A7AF",
        4: "#CEDEE3",
        5: "#A5B6BC",
      }
    }
  }
}

Related searches

muted blue grey palettecalm coastal design colorsdriftwood inspired hex codesminimalist serene schemesea-kissed neutral palette

Palette colors

Hex values

Color 1#3D4A4D
·
Color 2#627A81
·
Color 3#91A7AF
·
Color 4#CEDEE3
·
Color 5#A5B6BC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.7:1AA18
6.6:1AA
4.4:1AA18
2
2:1Fail
1.8:1Fail
3.3:1AA18
2.2:1Fail
3
3.7:1AA18
1.8:1Fail
1.8:1Fail
1.2:1Fail
4
6.6:1AA
3.3:1AA18
1.8:1Fail
1.5:1Fail
5
4.4:1AA18
2.2:1Fail
1.2:1Fail
1.5:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Fog Drift
Seaside Cottage Grey
Silent Harbor Mist
Coastal Driftwood Grey
Coastal Dune Grass
Coastal Fog Blanket