Back to palettes

Palette

Coastal Linen Sands

Soft, muted tones reflecting the serene harmony of natural linen and sun-warmed beach sands.

NeutralMinimal5 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

#F5DEB3#FFFACD#D2B48C#ADD8E6#F0F8FF

Palette guide

How to use Coastal Linen Sands

Overview

The Coastal Linen Sands palette (version 2) offers a delightful harmony of warm sandy tones and soft, refreshing blues, reflecting the serene blend of natural linen and sun-warmed beach sands. It includes the inviting #FFFACD and #F5DEB3, complemented by the grounding #D2B48C, and balanced by the clear blues of #ADD8E6 and #F0F8FF. This palette is perfect for designs that evoke a natural, calm, and summery aesthetic. Developers will find these colors excellent for crafting beach-themed websites, natural product branding, and inviting digital experiences that feel both warm and refreshing.

Best used for

  • Beach resort and travel websites
  • Natural cosmetics and skincare branding
  • Children's clothing and toy design
  • Summer-themed marketing campaigns
  • Relaxed home decor and lifestyle blogs
  • Websites with a light, airy feel

Suggested color roles

primary

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

secondary

Employ #ADD8E6 for secondary information, navigation, or to introduce a refreshing, cool blue contrast.

accent

Apply #F5DEB3 as a subtle accent for highlights, decorative elements, or to add a touch of light warmth.

background

The creamy #FFFACD is ideal for expansive backgrounds, offering a soft, natural, and clean canvas.

text

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

Accessibility notes

  • Ensure #D2B48C text has sufficient contrast against #FFFACD or #F0F8FF backgrounds.
  • Avoid using #F5DEB3 or #FFFACD for small text on light backgrounds due to very low contrast.
  • Verify #ADD8E6 text contrast on #FFFACD, as light blue on light cream can be problematic.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.

Recommended combinations

Beach Day

Excellent for hero sections: a light background, a warm primary color, and a refreshing blue accent.

#FFFACD · #D2B48C · #ADD8E6

Sandy Sky

Create a soft, ethereal background effect with blue transitioning to a warm, sunlit tone.

#F0F8FF · #ADD8E6 · #F5DEB3

Warm Wash

Use for layered content blocks, moving from a clean base to a slightly darker, warm sand tone.

#FFFACD · #F5DEB3 · #D2B48C

CSS variables

:root {
  --coastal-linen-sands-2-1: #F5DEB3;
  --coastal-linen-sands-2-2: #FFFACD;
  --coastal-linen-sands-2-3: #D2B48C;
  --coastal-linen-sands-2-4: #ADD8E6;
  --coastal-linen-sands-2-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-linen-sands-2": {
        1: "#F5DEB3",
        2: "#FFFACD",
        3: "#D2B48C",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

warm coastal palettesandy beach colorslinen and sand schemenatural calm hueslight summer tones

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#FFFACD
·
Color 3#D2B48C
·
Color 4#ADD8E6
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail
2
1.2:1Fail
1.9:1Fail
1.4:1Fail
1:1Fail
3
1.5:1Fail
1.9:1Fail
1.3:1Fail
1.8:1Fail
4
1.2:1Fail
1.4:1Fail
1.3:1Fail
1.4:1Fail
5
1.2:1Fail
1:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Coastal Linen Sands

View all Neutral
Whispering Stone Garden
Artisan Ceramic Glaze
Minimal Pebble Shore
Monastic Scroll Hues
Zen Sand Garden
Zen Stone Garden