Palette

Coastal Linen Breezes

A fresh, tranquil blend inspired by a breezy day on the coast with clean linen sails.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D5E2DF#AABFB3#829C91#C7D4D7#F0F5F6

Palette guide

How to use Coastal Linen Breezes

Overview

The Coastal Linen Breezes palette offers a fresh and tranquil blend of soft greens and muted blues, reminiscent of a breezy day by the ocean with clean linen sails. Featuring shades from the airy #F0F5F6 to the grounding #829C91, including the light blue-green #D5E2DF, the refreshing #AABFB3, and the cool #C7D4D7. This palette is perfect for designs that aim for a clean, calm, and invigorating aesthetic. Developers will find these colors excellent for crafting eco-friendly branding, serene web interfaces, and inviting digital experiences that evoke peace and natural beauty.

Best used for

Spa and wellness branding
Eco-tourism and nature-focused websites
Spring fashion collections
Peaceful mobile application themes
Children's clothing and toy design
Sustainable living content

Suggested color roles

primary

Utilize #AABFB3 as a prominent, fresh green-blue for main sections, headers, or interactive elements.

secondary

Employ #C7D4D7 for secondary information, card backgrounds, or to introduce a subtle, cool blue-grey contrast.

accent

Apply #829C91 sparingly for strong calls-to-action, important icons, or as a deep footer/header color to provide grounding.

background

The lightest shade, #F0F5F6, is ideal for expansive backgrounds, offering a clean, airy, and ethereal canvas.

text

For optimal readability on lighter backgrounds, use #829C91 or a dark green like #4A5C55 to ensure clear text presentation.

Accessibility notes

Ensure #829C91 text has sufficient contrast against #F0F5F6 or #D5E2DF backgrounds.
Avoid using #C7D4D7 for small text on #F0F5F6, 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 lighter tones require careful contrast checks, especially for small font sizes.

Recommended combinations

Fresh Air

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

#F0F5F6 · #D5E2DF · #AABFB3

Ocean Greens

Create a gradient or tiered UI elements that transition from lighter blue-grey to a deeper, more profound green-blue.

#C7D4D7 · #AABFB3 · #829C91

Breezy Layers

Use a light background with a strong, grounding text color, balanced by a refreshing green-blue accent.

#F0F5F6 · #829C91 · #D5E2DF

CSS variables

:root {
  --coastal-linen-breezes-1: #D5E2DF;
  --coastal-linen-breezes-2: #AABFB3;
  --coastal-linen-breezes-3: #829C91;
  --coastal-linen-breezes-4: #C7D4D7;
  --coastal-linen-breezes-5: #F0F5F6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-linen-breezes": {
        1: "#D5E2DF",
        2: "#AABFB3",
        3: "#829C91",
        4: "#C7D4D7",
        5: "#F0F5F6",
      }
    }
  }
}

Hex values

Color 1#D5E2DF

Color 2#AABFB3

Color 3#829C91

Color 4#C7D4D7

Color 5#F0F5F6

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.3:1Fail

1.8:1Fail

2.2:1Fail

1.5:1Fail

1.9:1Fail

2.7:1Fail

1.1:1Fail

1.3:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

2.7:1Fail

1.4:1Fail

Similar palettes

More like Coastal Linen Breezes

Cerulean Shore Breeze

Coastal Linen Breezes

See it in context.

Ready when you are.

Built with Coastal Linen Breezes.

How to use Coastal Linen Breezes

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh Air

Ocean Greens

Breezy Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Linen Breezes