Back to palettes

Palette

Coastal Driftwood Grey

Weathered grays and muted tones, like driftwood softened by ocean breezes.

neutralminimal5 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#7B7B7B#9E9E9E#C1C1C1#E4E4E4

Palette guide

How to use Coastal Driftwood Grey

Overview

The "Coastal Driftwood Grey" palette offers a classic, versatile gradient of muted grays, reminiscent of weathered wood softened by ocean breezes. This monochromatic collection ranges from the deep, anchoring #5A5A5A to the airy, almost white #E4E4E4. The intermediate shades of #7B7B7B, #9E9E9E, and #C1C1C1 provide a smooth, consistent transition, ideal for creating depth and structure in any design. This palette is perfect for designers seeking a clean, modern, and understated aesthetic, conveying stability, sophistication, and a timeless appeal with its balanced neutral tones.

Best used for

  • Corporate and professional websites
  • Minimalist UI/UX design
  • Black and white photography showcases
  • Industrial design concepts
  • Modern art exhibition branding
  • Technical documentation or reports

Suggested color roles

primary

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

secondary

Apply #9E9E9E 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 #E4E4E4 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 #E4E4E4 and #C1C1C1 backgrounds for WCAG AA compliance.
  • Avoid using #E4E4E4 or #C1C1C1 for text directly, as they are too light for readability on most backgrounds.
  • When using text on darker shades like #7B7B7B, ensure a very light text color (e.g., white or #E4E4E4) is used.
  • This palette offers inherent contrast opportunities due to its gradient, making it easier to select accessible pairings.

Recommended combinations

Solid Foundation

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

#5A5A5A · #E4E4E4 · #7B7B7B

Layered Neutrals

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

#9E9E9E · #C1C1C1 · #E4E4E4

Deep Contrast

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

#7B7B7B · #5A5A5A · #9E9E9E

CSS variables

:root {
  --coastal-driftwood-grey-3-1: #5A5A5A;
  --coastal-driftwood-grey-3-2: #7B7B7B;
  --coastal-driftwood-grey-3-3: #9E9E9E;
  --coastal-driftwood-grey-3-4: #C1C1C1;
  --coastal-driftwood-grey-3-5: #E4E4E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-driftwood-grey-3": {
        1: "#5A5A5A",
        2: "#7B7B7B",
        3: "#9E9E9E",
        4: "#C1C1C1",
        5: "#E4E4E4",
      }
    }
  }
}

Related searches

monochromatic grey palettedriftwood color schememinimalist neutral colorsweathered grey hex codesmodern cool grey design

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#7B7B7B
·
Color 3#9E9E9E
·
Color 4#C1C1C1
·
Color 5#E4E4E4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
3.8:1AA18
5.4:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.3:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.1:1Fail
4
3.8:1AA18
2.4:1Fail
1.5:1Fail
1.4:1Fail
5
5.4:1AA
3.3:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Coastal Driftwood Grey

View all neutral
Coastal Pebble Smooth
Pebble Beach Stone
Ancient City Ruins
Ancient Roman Stone
Ancient Ruin Stone
Ancient Rune Stone