Back to palettes

Palette

Coastal Driftwood Grey

Soft, weathered grays reminiscent of sun-bleached driftwood found along a peaceful, windswept 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

#5A5A5A#8B8B8B#B4B4B4#D1D1D1#EEEEEE

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a harmonious range of soft, weathered grays, evocative of sun-bleached driftwood found along a peaceful, windswept coast. This versatile collection moves from the deep, grounding #5A5A5A to the airy, near-white #EEEEEE. The intermediate shades of #8B8B8B, #B4B4B4, and #D1D1D1 provide a smooth, consistent gradient, ideal for creating depth and subtle variations in any design. This palette is perfect for designers seeking a calm, minimalist, and serene aesthetic, conveying stability, sophistication, and a timeless appeal with its balanced neutral tones.

Best used for

  • Minimalist web and app design
  • Modern photography portfolios
  • High-end stationery and print materials
  • Architectural rendering backgrounds
  • Luxury brand packaging
  • Clean, professional corporate identity

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Accessibility notes

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

Recommended combinations

Soft Stone

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

#5A5A5A · #EEEEEE · #8B8B8B

Layered Calm

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

#B4B4B4 · #D1D1D1 · #EEEEEE

Deep Neutral

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

#8B8B8B · #5A5A5A · #B4B4B4

CSS variables

:root {
  --coastal-driftwood-grey-5-1: #5A5A5A;
  --coastal-driftwood-grey-5-2: #8B8B8B;
  --coastal-driftwood-grey-5-3: #B4B4B4;
  --coastal-driftwood-grey-5-4: #D1D1D1;
  --coastal-driftwood-grey-5-5: #EEEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey-5": {
        1: "#5A5A5A",
        2: "#8B8B8B",
        3: "#B4B4B4",
        4: "#D1D1D1",
        5: "#EEEEEE",
      }
    }
  }
}

Related searches

weathered grey color paletteminimalist neutral schemecalm coastal grey hexserene design colorsmonochromatic grey web design

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#8B8B8B
·
Color 3#B4B4B4
·
Color 4#D1D1D1
·
Color 5#EEEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.3:1AA18
4.5:1AA
5.9:1AA
2
2:1Fail
1.6:1Fail
2.2:1Fail
2.9:1Fail
3
3.3:1AA18
1.6:1Fail
1.4:1Fail
1.8:1Fail
4
4.5:1AA
2.2:1Fail
1.4:1Fail
1.3:1Fail
5
5.9:1AA
2.9:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Seagrass Sway
Silent Harbor Mist
Cloud Forest Mist
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Dune Breeze