Back to palettes

Palette

Coastal Linen Sands

Soft, sun-bleached hues reflecting the gentle interplay of sandy beaches and natural linen fabrics.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Linen Sands 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 Linen Sands.

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

Data visualization

#CFC9B5#DDD6C3#EDE3D0#B9B09F#A3998D

Palette guide

How to use Coastal Linen Sands

Overview

The Coastal Linen Sands palette (version 1) offers a collection of soft, sun-bleached hues that reflect the gentle interplay of sandy beaches and natural linen fabrics. Dominated by subtle beiges and warm greys, including the light #EDE3D0, the versatile #DDD6C3 and #CFC9B5, and the grounding #B9B09F and #A3998D. This palette is perfect for designs that prioritize natural elegance, calm, and a minimalist aesthetic. Developers will find these colors excellent for crafting eco-friendly branding, serene web interfaces, and inviting digital experiences that feel both organic and sophisticated.

Best used for

  • Minimalist brand identities
  • Eco-friendly product packaging
  • Natural beauty and skincare websites
  • Warm neutral interior design concepts
  • Textile and fabric design showcases
  • Content with organic textures

Suggested color roles

primary

Utilize #CFC9B5 as a warm, inviting primary color for main sections, headers, or card backgrounds.

secondary

Employ #B9B09F for secondary information, navigation, or to add a subtle, grounding mid-tone.

accent

Apply #A3998D sparingly for strong text, important icons, or as a deep footer/header color to provide clear contrast.

background

The lightest shade, #EDE3D0, is ideal for expansive backgrounds, offering a soft, natural, and clean canvas.

text

For optimal readability on lighter backgrounds, use #A3998D or a dark brown like #6B6155 to ensure clear text presentation.

Accessibility notes

  • Ensure #A3998D text has sufficient contrast against #EDE3D0 or #DDD6C3 backgrounds.
  • Avoid using #CFC9B5 or #DDD6C3 for small text on #EDE3D0, as contrast may be too low for readability.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.
  • This palette's subtle tones require careful contrast checks, especially for body text and interactive elements.

Recommended combinations

Natural Layers

Excellent for layered content blocks or a soft background with complementary light beige mid-tones.

#EDE3D0 · #DDD6C3 · #CFC9B5

Deep Texture

Create a sense of depth and hierarchy in UI elements, moving from a mid-tone to a darker, grounding shade.

#B9B09F · #A3998D · #CFC9B5

Subtle Contrast

Use a light background with a strong, grounding text color, balanced by a refreshing beige accent.

#EDE3D0 · #A3998D · #DDD6C3

CSS variables

:root {
  --coastal-linen-sands-1: #CFC9B5;
  --coastal-linen-sands-2: #DDD6C3;
  --coastal-linen-sands-3: #EDE3D0;
  --coastal-linen-sands-4: #B9B09F;
  --coastal-linen-sands-5: #A3998D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-linen-sands": {
        1: "#CFC9B5",
        2: "#DDD6C3",
        3: "#EDE3D0",
        4: "#B9B09F",
        5: "#A3998D",
      }
    }
  }
}

Related searches

neutral linen palettesandy beige colorsnatural calm schemesun bleached huesminimalist earth tones

Palette colors

Hex values

Color 1#CFC9B5
·
Color 2#DDD6C3
·
Color 3#EDE3D0
·
Color 4#B9B09F
·
Color 5#A3998D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
2
1.1:1Fail
1.1:1Fail
1.5:1Fail
1.9:1Fail
3
1.3:1Fail
1.1:1Fail
1.7:1Fail
2.2:1Fail
4
1.3:1Fail
1.5:1Fail
1.7:1Fail
1.3:1Fail
5
1.7:1Fail
1.9:1Fail
2.2:1Fail
1.3:1Fail

Similar palettes

More like Coastal Linen Sands

View all Neutral