Back to palettes

Palette

Driftwood Shoreline Calm

Soft, muted tones reminiscent of worn sea glass and sun-bleached driftwood on a quiet beach.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Driftwood Shoreline Calm 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 Driftwood Shoreline Calm.

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

Data visualization

#8FBC8F#ADD8E6#B0E0E6#D3D3D3#A9A9A9

Palette guide

How to use Driftwood Shoreline Calm

Overview

The "Driftwood Shoreline Calm" palette offers soft, muted tones reminiscent of worn sea glass and sun-bleached driftwood on a quiet beach. This cool and serene collection includes a gentle seafoam green #8FBC8F, two light blues #ADD8E6 and #B0E0E6, a light gray #D3D3D3, and a medium gray #A9A9A9. It's ideal for designs seeking a peaceful, coastal, and understated aesthetic. Designers can utilize this palette for spa branding, eco-conscious products, or any digital interface that aims to evoke tranquility. Developers will find these hex codes excellent for creating harmonious user experiences, providing versatile options for backgrounds, accents, and subtle visual cues.

Best used for

  • Eco-friendly and sustainable brand identities
  • Spa, wellness, or meditation app interfaces
  • Coastal-themed home decor or textile designs
  • Nature photography websites or galleries
  • Minimalist product packaging for natural goods
  • Serene blog themes or personal websites

Suggested color roles

primary

#ADD8E6 - A light, calming sky blue, excellent for main content areas or large backgrounds to establish a serene coastal feel.

secondary

#8FBC8F - A gentle seafoam green, perfect for subheadings, navigation elements, or subtle graphic elements.

accent

#A9A9A9 - A medium gray, ideal for calls-to-action, important icons, or to provide a grounded, neutral contrast.

background

#D3D3D3 - A very light gray, offering a clean, airy, and versatile canvas that complements the cool tones.

text

#4F4F4F (medium-dark gray) - A balanced medium-dark gray ensures excellent readability and integrates smoothly with the muted palette.

Accessibility notes

  • Ensure sufficient contrast when pairing #ADD8E6 or #B0E0E6 with #D3D3D3 for text; a darker text color is recommended.
  • For body text, a dark color like #4F4F4F or black is crucial against all lighter backgrounds in this palette.
  • #A9A9A9 provides good contrast on #D3D3D3 for headings or important UI elements.
  • Avoid using #B0E0E6 as text on #ADD8E6, as the subtle difference may cause readability issues.

Recommended combinations

Sea Glass Blend

Creates a soft, layered background effect or subtle UI elements, evoking a smooth, watery feel.

#D3D3D3 · #ADD8E6 · #B0E0E6

Coastal Calm

Use for primary branding, headings, and a clean background to highlight the natural green and gray.

#8FBC8F · #A9A9A9 · #ADD8E6

Muted Depth

Ideal for content blocks, card backgrounds, or subtle visual hierarchy with a grounding effect.

#D3D3D3 · #A9A9A9 · #8FBC8F

CSS variables

:root {
  --driftwood-shoreline-calm-1: #8FBC8F;
  --driftwood-shoreline-calm-2: #ADD8E6;
  --driftwood-shoreline-calm-3: #B0E0E6;
  --driftwood-shoreline-calm-4: #D3D3D3;
  --driftwood-shoreline-calm-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "driftwood-shoreline-calm": {
        1: "#8FBC8F",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#D3D3D3",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

sea glass color palettedriftwood muted tonescalm beach aestheticcool gray blue greenserene coastal design

Palette colors

Hex values

Color 1#8FBC8F
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#D3D3D3
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
1.4:1Fail
1.1:1Fail
2
1.4:1Fail
1.1:1Fail
1:1Fail
1.5:1Fail
3
1.5:1Fail
1.1:1Fail
1:1Fail
1.6:1Fail
4
1.4:1Fail
1:1Fail
1:1Fail
1.6:1Fail
5
1.1:1Fail
1.5:1Fail
1.6:1Fail
1.6:1Fail

Similar palettes

More like Driftwood Shoreline Calm

View all neutral
Coastal Fog Whisper
Coastal Stone Hearth
Coastal Driftwood Grey
Coastal Linen Breeze
Coastal Stone Haze
Dusky Cloud Blanket