Back to palettes

Palette

Seaside Cottage Charm

Light and airy colors, inspired by whitewashed cottages, ocean breezes, and sandy shores.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Cottage Charm 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 Seaside Cottage Charm.

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

Data visualization

#87CEEB#B0E0E6#F0F8FF#F5DEB3#A9A9A9

Palette guide

How to use Seaside Cottage Charm

Overview

The Seaside Cottage Charm palette (ID: seaside-cottage-charm) embodies light and airy colors, inspired by whitewashed cottages, ocean breezes, and sandy shores. This cool palette features hex codes such as #87CEEB (Sky Blue), #B0E0E6 (Powder Blue), #F0F8FF (Alice Blue), #F5DEB3 (Wheat), and #A9A9A9 (Medium Gray). It's an excellent choice for designers and developers creating fresh, serene, and classic coastal themes. The harmonious blend of blues, a warm sand tone, and a grounding gray, all set against a crisp off-white, evokes a sense of relaxation and timeless charm, perfect for projects that aim to feel breezy and inviting.

Best used for

  • Bed and breakfast websites in coastal locations
  • Interior design concepts for beach-style homes
  • Lifestyle product branding with relaxing themes
  • Travel blogs focusing on serene beach destinations
  • E-commerce platforms for home goods (nautical/coastal style)
  • Digital illustrations with a light, airy, and calming feel

Suggested color roles

primary

Use #87CEEB (Sky Blue) as a refreshing and inviting blue for main headings, calls to action, or prominent brand elements.

secondary

Employ #A9A9A9 (Medium Gray) to provide a stable, neutral contrast, suitable for secondary text, navigation, or subtle borders.

accent

Apply #F5DEB3 (Wheat) as a warm, sandy accent, perfect for subtle highlights, interactive states, or elements evoking beach textures.

background

Utilize #F0F8FF (Alice Blue) as a crisp, clean off-white that creates an expansive, airy, and bright canvas for content.

text

A dark charcoal like #333333 is recommended for main body text. Use #A9A9A9 for secondary text on light backgrounds, and #87CEEB for headings.

Accessibility notes

  • Text in #87CEEB and #A9A9A9 will have good contrast against #F0F8FF for readability.
  • #B0E0E6 and #F5DEB3 will require darker text for readability, especially for smaller font sizes and essential information.
  • The contrast between #B0E0E6 and #F0F8FF is low; use these for non-critical elements or larger graphical areas.
  • Always use a contrast checker to ensure WCAG AA compliance for text and interactive elements across the palette.

Recommended combinations

Ocean Sky

A bright, airy combination perfect for hero sections, clean interfaces, or any design aiming for a fresh, open, and serene feel.

#87CEEB · #B0E0E6 · #F0F8FF

Sandy Path

Creates a warm, grounded feel, ideal for footers, sidebars, or content blocks that require a subtle, natural texture and stability.

#F5DEB3 · #A9A9A9 · #F0F8FF

Breezy Day

A balanced mix of cool and warm, suitable for infographics, feature panels, or elements that need to convey both freshness and stability.

#87CEEB · #F5DEB3 · #A9A9A9

CSS variables

:root {
  --seaside-cottage-charm-1: #87CEEB;
  --seaside-cottage-charm-2: #B0E0E6;
  --seaside-cottage-charm-3: #F0F8FF;
  --seaside-cottage-charm-4: #F5DEB3;
  --seaside-cottage-charm-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-cottage-charm": {
        1: "#87CEEB",
        2: "#B0E0E6",
        3: "#F0F8FF",
        4: "#F5DEB3",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

classic coastal blue palettewhitewashed cottage colorsairy beach house designrelaxing nautical color schemelight blue gray web design

Palette colors

Hex values

Color 1#87CEEB
·
Color 2#B0E0E6
·
Color 3#F0F8FF
·
Color 4#F5DEB3
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
2
1.2:1Fail
1.3:1Fail
1.1:1Fail
1.6:1Fail
3
1.6:1Fail
1.3:1Fail
1.2:1Fail
2.2:1Fail
4
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.8:1Fail
5
1.3:1Fail
1.6:1Fail
2.2:1Fail
1.8:1Fail

Similar palettes

More like Seaside Cottage Charm

View all cool
Mediterranean Harbor Charm
Santorini Whitewash Breeze
Aegean Isle Horizon
Arctic Bloom Whisper
Arctic Blossom Chill
Arctic Glacier Edge