Back to palettes

Palette

Stormy Coast Driftwood

Captures the raw, windswept beauty of a stormy coastline, with muted tones and worn textures.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Coast Driftwood 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 Stormy Coast Driftwood.

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

Data visualization

#778899#A2B2C2#8B7355#B0E0E6#F8F8FF

Palette guide

How to use Stormy Coast Driftwood

Overview

The "Stormy Coast Driftwood" palette is a unique and evocative collection that captures the raw, windswept beauty of a stormy coastline, blending muted cool tones with warm, weathered textures. It features the soft, cool greys of #778899 and #A2B2C2, contrasted beautifully with the earthy warmth of #8B7355 (driftwood brown). The light, ethereal #B0E0E6 adds a touch of misty sky, while #F8F8FF provides a crisp, near-white base. Designers and developers can leverage this palette to create natural, rugged, yet sophisticated interfaces and branding, ideal for projects aiming to convey authenticity, durability, and a connection to nature's serene power.

Best used for

  • Outdoor gear and apparel branding
  • Sustainable product design
  • Coastal home decor websites
  • Artisan craft showcases
  • Nature-inspired blogs
  • Rustic architectural designs

Suggested color roles

primary

#778899 provides a cool, stable primary color, excellent for main content blocks, headers, or navigation.

secondary

#A2B2C2 serves as a lighter, airy secondary, suitable for backgrounds of cards, subheadings, or secondary interactive elements.

accent

#8B7355 (driftwood brown) provides a warm, earthy accent, perfect for calls to action, important details, or visual anchors.

background

#F8F8FF offers a clean, crisp, near-white background, providing excellent contrast and a fresh feel.

text

For light backgrounds, #778899 or #8B7355 ensures strong readability. For darker elements, #F8F8FF provides clear, contrasting text.

Accessibility notes

  • Ensure #778899 or #8B7355 text on #F8F8FF background meets WCAG AA/AAA contrast.
  • #A2B2C2 text on #F8F8FF may not be sufficient for small text; use for large headings or accents.
  • #B0E0E6 as text color will require a very dark background for readability.
  • For interactive elements, ensure sufficient contrast, e.g., #8B7355 buttons on #F8F8FF.

Recommended combinations

Weathered Coast

Creates a clean base with a cool grey and a warm brown accent, evoking natural, weathered materials.

#F8F8FF · #778899 · #8B7355

Misty Shore

Ideal for soft, atmospheric gradients or layered UI elements, reminiscent of a misty coastal sky.

#A2B2C2 · #B0E0E6 · #778899

Driftwood Detail

Use #F8F8FF as background, #8B7355 for strong accents/buttons, and #A2B2C2 for subtle secondary text.

#F8F8FF · #8B7355 · #A2B2C2

CSS variables

:root {
  --stormy-coast-driftwood-1: #778899;
  --stormy-coast-driftwood-2: #A2B2C2;
  --stormy-coast-driftwood-3: #8B7355;
  --stormy-coast-driftwood-4: #B0E0E6;
  --stormy-coast-driftwood-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-driftwood": {
        1: "#778899",
        2: "#A2B2C2",
        3: "#8B7355",
        4: "#B0E0E6",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

coastal grey brown paletteweathered wood colorsstormy beach neutral palettenatural rugged color schemecool warm contrast design

Palette colors

Hex values

Color 1#778899
·
Color 2#A2B2C2
·
Color 3#8B7355
·
Color 4#B0E0E6
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.2:1Fail
2.5:1Fail
3.4:1AA18
2
1.7:1Fail
2.1:1Fail
1.5:1Fail
2.1:1Fail
3
1.2:1Fail
2.1:1Fail
3.1:1AA18
4.2:1AA18
4
2.5:1Fail
1.5:1Fail
3.1:1AA18
1.4:1Fail
5
3.4:1AA18
2.1:1Fail
4.2:1AA18
1.4:1Fail

Similar palettes

More like Stormy Coast Driftwood

View all cool
Arctic Ocean Depths
Coastal Tempest Gloom
Stormy Coast Drift
Stormy Coast Horizon
Stormy Horizon Drama
Stormy Nordic Coast