Back to palettes

Palette

Seafoam Timberline

Subtly weathered tones of driftwood and seafoam, capturing the quiet, understated beauty of a windswept coast.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seafoam Timberline 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 Seafoam Timberline.

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

Data visualization

#9E9D8E#B4B5AD#D1D2C9#EDEEE8#5A6D7D

Palette guide

How to use Seafoam Timberline

Overview

The Seafoam Timberline palette evokes the quiet, understated beauty of a windswept coast, blending subtly weathered tones of driftwood and seafoam. With a core of muted greys like #9E9D8E and #B4B5AD, anchored by the deep slate #5A6D7D, and brightened by the soft #EDEEE8, this scheme is inherently neutral and calm. Designers can utilize this palette to convey sophistication, natural elegance, or a minimalist aesthetic. Developers will find these earthy tones excellent for creating serene and grounded user interfaces, prioritizing readability and a timeless feel. This palette is ideal for brands that value authenticity, durability, and a connection to natural, weathered elements.

Best used for

  • Architectural firms and interior design
  • Rustic furniture and home decor brands
  • Outdoor apparel and adventure gear websites
  • Nature-inspired photography portfolios
  • Minimalist websites and blogs
  • Sustainable product design and eco-conscious brands

Suggested color roles

primary

Use #5A6D7D as a deep slate blue-grey for main headings, navigation, or strong brand elements, conveying stability.

secondary

Apply #9E9D8E for supporting content, subheadings, or background textures, adding a muted, earthy feel.

accent

Employ #B4B5AD for subtle highlights, interactive states, or delicate graphic elements, maintaining a soft touch.

background

Utilize #EDEEE8 as a very light off-white background, providing a clean and natural canvas.

text

For optimal readability, use #5A6D7D or a deep charcoal on light backgrounds like #EDEEE8.

Accessibility notes

  • The contrast of #5A6D7D on #EDEEE8 is good for most text sizes.
  • Use #9E9D8E for larger text or headings on #EDEEE8, as its contrast might be low for small body text.
  • Avoid using #B4B5AD or #D1D2C9 for small text on #EDEEE8 due to insufficient contrast.
  • Ensure interactive elements in lighter tones have clear visual cues beyond color alone for accessibility.

Recommended combinations

Weathered Coast

Creates a clear, readable design with dark text on a light, soft background, accented by a muted grey-green.

#EDEEE8 · #5A6D7D · #9E9D8E

Timber Texture

Combines various light to mid-greys for subtle layering and textural depth, reminiscent of aged wood.

#9E9D8E · #B4B5AD · #D1D2C9

Understated Elegance

Uses a clean base with warm grey accents and a deep blue-grey for emphasis, creating a sophisticated look.

#EDEEE8 · #B4B5AD · #5A6D7D

CSS variables

:root {
  --seafoam-timberline-1: #9E9D8E;
  --seafoam-timberline-2: #B4B5AD;
  --seafoam-timberline-3: #D1D2C9;
  --seafoam-timberline-4: #EDEEE8;
  --seafoam-timberline-5: #5A6D7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seafoam-timberline": {
        1: "#9E9D8E",
        2: "#B4B5AD",
        3: "#D1D2C9",
        4: "#EDEEE8",
        5: "#5A6D7D",
      }
    }
  }
}

Related searches

muted neutral palettedriftwood grey colorscoastal minimalist designearthy serene hex codesarchitectural color scheme

Palette colors

Hex values

Color 1#9E9D8E
·
Color 2#B4B5AD
·
Color 3#D1D2C9
·
Color 4#EDEEE8
·
Color 5#5A6D7D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.3:1Fail
2:1Fail
2
1.3:1Fail
1.4:1Fail
1.8:1Fail
2.6:1Fail
3
1.8:1Fail
1.4:1Fail
1.3:1Fail
3.5:1AA18
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
4.6:1AA
5
2:1Fail
2.6:1Fail
3.5:1AA18
4.6:1AA

Similar palettes

More like Seafoam Timberline

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Hues
Coastal Dune Grass
Coastal Fog Drift