Back to palettes

Palette

Coastal Shell Treasure

Soft, muted tones reflecting the subtle colors of seashells and sun-bleached driftwood found on a peaceful shore.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Shell Treasure 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 Shell Treasure.

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

Data visualization

#F5F5DC#F0EAD6#E0E0E0#CDB891#8B7355

Palette guide

How to use Coastal Shell Treasure

Overview

The Coastal Shell Treasure palette offers a delicate collection of soft, muted tones, perfectly reflecting sun-bleached seashells and driftwood. With airy shades like #F5F5DC and #F0EAD6, it provides a clean, natural base. The versatile #E0E0E0 introduces a cool, balanced grey, while #CDB891 and the deeper #8B7355 provide grounding, earthy accents. This harmonious blend is ideal for designers seeking to create a serene, natural, and understated aesthetic. It's especially suited for projects that aim to convey calm, warmth, and a quiet connection to the natural elements of a peaceful shoreline, perfect for organic and elegant branding.

Best used for

  • Natural skincare and cosmetics packaging
  • Sustainable home goods branding
  • Coastal-themed cafes or bakeries
  • Handmade jewelry and crafts
  • Wedding invitations and decor
  • Minimalist web design

Suggested color roles

primary

Utilize #F0EAD6 as a dominant, warm neutral for main sections or branding elements.

secondary

Employ #E0E0E0 for secondary content blocks, navigation, or subtle graphical elements, adding a cool balance.

accent

Introduce #CDB891 as a warm accent for highlights, icons, or decorative touches.

background

Choose #F5F5DC for a light, airy background, or #F0EAD6 for a slightly warmer, soft canvas.

text

Use #8B7355 for body text and headings for excellent readability against lighter palette colors, or a dark charcoal.

Accessibility notes

  • The darker #8B7355 provides excellent contrast for text on #F5F5DC, #F0EAD6, and #E0E0E0.
  • Ensure sufficient contrast when using #F5F5DC for text on any background, as it is extremely light.
  • Avoid using #F0EAD6 for text on #E0E0E0 backgrounds; opt for a darker color for text.
  • Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Driftwood & Sand

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#8B7355 · #CDB891 · #F5F5DC

Muted Shoreline

Ideal for clean, minimalist interfaces with a soft warm background, a cool mid-tone, and strong dark text.

#F0EAD6 · #E0E0E0 · #8B7355

Shell Layers

Use for subtle visual layering, combining a cool grey with a warm beige and a lighter neutral for highlights.

#E0E0E0 · #CDB891 · #F0EAD6

CSS variables

:root {
  --coastal-shell-treasure-1: #F5F5DC;
  --coastal-shell-treasure-2: #F0EAD6;
  --coastal-shell-treasure-3: #E0E0E0;
  --coastal-shell-treasure-4: #CDB891;
  --coastal-shell-treasure-5: #8B7355;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-shell-treasure": {
        1: "#F5F5DC",
        2: "#F0EAD6",
        3: "#E0E0E0",
        4: "#CDB891",
        5: "#8B7355",
      }
    }
  }
}

Related searches

soft neutral coastal paletteseashell and sand colorscalm earthy beige tonesnatural organic designmuted beach aesthetic

Palette colors

Hex values

Color 1#F5F5DC
·
Color 2#F0EAD6
·
Color 3#E0E0E0
·
Color 4#CDB891
·
Color 5#8B7355
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.7:1Fail
4.1:1AA18
2
1.1:1Fail
1.1:1Fail
1.6:1Fail
3.7:1AA18
3
1.2:1Fail
1.1:1Fail
1.5:1Fail
3.4:1AA18
4
1.7:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
5
4.1:1AA18
3.7:1AA18
3.4:1AA18
2.3:1Fail

Similar palettes

More like Coastal Shell Treasure

View all neutral