Palette

Seaside Driftwood Shingles

A calming array of cool grays, reflecting the weathered textures of coastal driftwood and old shingle houses.

NeutralCalm5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Driftwood Shingles 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 Seaside Driftwood Shingles.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#A6A9AD#818385#5C5E60#37383A#BCC2C7

Palette guide

How to use Seaside Driftwood Shingles

Overview

The "Seaside Driftwood Shingles" palette presents a calming array of cool grays, from the light #BCC2C7 to the deep #37383A. Inspired by the weathered textures of coastal driftwood and old shingle houses, this palette offers a sophisticated, natural, and subdued aesthetic. It's perfectly suited for designs that aim to convey stability, timelessness, and a quiet, understated elegance, reflecting the serene beauty of a rugged coastline. This collection is highly versatile for creating modern, minimalist, and grounded visual experiences.

Best used for

Architectural and urban design presentations
Sophisticated branding and corporate identity
Modern tech interfaces and dashboards
Urban and minimalist fashion brands
Contemporary art and photography displays
Calm and professional digital experiences

Suggested color roles

primary

Use #BCC2C7 for a clean, cool background, providing a sense of spaciousness and modernity.

secondary

Apply #A6A9AD for content blocks, card backgrounds, or secondary navigation elements.

accent

Utilize #818385 for subtle interactive elements, borders, or soft highlights, maintaining elegance.

background

Employ #BCC2C7 to establish a light, modern, and serene foundational canvas.

text

For primary body text, use #37383A, ensuring excellent readability and a sophisticated, deep contrast.

Accessibility notes

Use #37383A for text on #BCC2C7, #A6A9AD, and #818385 for strong contrast and readability.
Avoid using light text on #5C5E60 or #37383A unless it is pure white for maximum contrast.
Ensure interactive elements in #5C5E60 stand out clearly against their backgrounds for usability.
Maintain consistent text contrast across different gray shades to ensure legibility throughout the design.

Recommended combinations

Light Base

Ideal for clean, modern web design, subtle gradients, and layered UI elements.

#BCC2C7 · #A6A9AD · #818385

Deep Contrast

Combine for strong text on a light background, with a dark accent for emphasis.

#BCC2C7 · #37383A · #5C5E60

Layered Greys

Effective for complex UI components, adding depth and sophisticated visual separation.

#A6A9AD · #818385 · #5C5E60

CSS variables

:root {
  --seaside-driftwood-shingles-1: #A6A9AD;
  --seaside-driftwood-shingles-2: #818385;
  --seaside-driftwood-shingles-3: #5C5E60;
  --seaside-driftwood-shingles-4: #37383A;
  --seaside-driftwood-shingles-5: #BCC2C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-driftwood-shingles": {
        1: "#A6A9AD",
        2: "#818385",
        3: "#5C5E60",
        4: "#37383A",
        5: "#BCC2C7",
      }
    }
  }
}

Hex values

Color 1#A6A9AD

Color 2#818385

Color 3#5C5E60

Color 4#37383A

Color 5#BCC2C7

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

5:1AA

1.3:1Fail

1.6:1Fail

1.7:1Fail

3.1:1AA18

2.1:1Fail

2.8:1Fail

1.7:1Fail

1.8:1Fail

3.6:1AA18

5:1AA

3.1:1AA18

1.8:1Fail

6.5:1AA

1.3:1Fail

2.1:1Fail

3.6:1AA18

6.5:1AA

Similar palettes

More like Seaside Driftwood Shingles

View all Neutral

Clouded Moon Reflection

Coastal Fog Morning

Coastal Seagrass Whisper

Foggy Pine Retreat

Misty Morning Haze

Oceanic Driftwood Shore