Back to palettes

Palette

Faded Seaside Cottage

Soft, weathered blues and grays evoke a charming, time-worn dwelling by the ocean.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A7F8E#9BB2C4#CEDBE7#E9F0F5#C6CEDA

Palette guide

How to use Faded Seaside Cottage

Overview

The Faded Seaside Cottage palette offers a tranquil, vintage aesthetic with its muted blues and grays. It evokes the serene calm of a weathered coastal dwelling. Designers can leverage this palette for projects requiring a soft, sophisticated, and slightly melancholic feel. The deep blue-gray of #6A7F8E provides a strong anchor, while #9BB2C4 and #C6CEDA offer versatile mid-tones. Lighter shades like #CEDBE7 and the near-white #E9F0F5 ensure ample contrast and breathability. This collection is ideal for creating a relaxed, inviting atmosphere, perfect for branding, UI, or print materials that aim for understated elegance and a touch of nostalgia. Its cool, desaturated tones are inherently soothing and timeless.

Best used for

  • Coastal-themed branding and websites
  • Vintage-inspired product packaging
  • Interior design concepts for bedrooms or living spaces
  • Serene mobile app interfaces
  • Editorial layouts for lifestyle magazines
  • Relaxed e-commerce sites for artisan goods

Suggested color roles

primary

#6A7F8E - Use this deep, muted blue-gray for main headings, prominent buttons, or large background sections to establish a grounded, sophisticated tone.

secondary

#9BB2C4 - A versatile mid-tone blue, excellent for subheadings, navigation elements, or as a supporting color in illustrations and graphics.

accent

#C6CEDA - This soft, slightly warmer gray-blue provides a subtle accent for interactive elements, highlights, or small decorative details without overpowering the calm mood.

background

#E9F0F5 - An almost-white, airy background color that provides spaciousness and excellent readability, ideal for main content areas.

text

#6A7F8E - For primary body text, using the darkest palette color ensures good readability against lighter backgrounds. Alternatively, a dark charcoal like #333333 can also work well for contrast.

Accessibility notes

  • Ensure sufficient contrast when using #CEDBE7 or #C6CEDA for text against #E9F0F5; check WCAG AA standards.
  • #6A7F8E provides strong contrast for text on #E9F0F5 and #CEDBE7 backgrounds, making it suitable for headings.
  • Avoid placing #CEDBE7 text on #C6CEDA backgrounds as their proximity in lightness will hinder readability.
  • Use a dedicated dark text color (e.g., #333333 or #000000) for body text on #E9F0F5 to guarantee optimal legibility.

Recommended combinations

Deep & Light Contrast

Ideal for clean, high-contrast UI, with the darkest as text, lightest as background, and mid-tone for accents.

#6A7F8E · #E9F0F5 · #9BB2C4

Muted Harmony

Excellent for subtle gradients, background patterns, or illustrations where a soft, blended look is desired.

#9BB2C4 · #CEDBE7 · #C6CEDA

Anchored Calm

Use #6A7F8E for strong anchors like footers or headers, #CEDBE7 for content blocks, and #E9F0F5 for the main background.

#6A7F8E · #CEDBE7 · #E9F0F5

CSS variables

:root {
  --faded-seaside-cottage-1: #6A7F8E;
  --faded-seaside-cottage-2: #9BB2C4;
  --faded-seaside-cottage-3: #CEDBE7;
  --faded-seaside-cottage-4: #E9F0F5;
  --faded-seaside-cottage-5: #C6CEDA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-seaside-cottage": {
        1: "#6A7F8E",
        2: "#9BB2C4",
        3: "#CEDBE7",
        4: "#E9F0F5",
        5: "#C6CEDA",
      }
    }
  }
}

Related searches

faded blue gray color schemetranquil coastal palettevintage seaside colorsmuted cottage aestheticrelaxed cool color design

Palette colors

Hex values

Color 1#6A7F8E
·
Color 2#9BB2C4
·
Color 3#CEDBE7
·
Color 4#E9F0F5
·
Color 5#C6CEDA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3:1Fail
3.6:1AA18
2.6:1Fail
2
1.9:1Fail
1.6:1Fail
1.9:1Fail
1.4:1Fail
3
3:1Fail
1.6:1Fail
1.2:1Fail
1.1:1Fail
4
3.6:1AA18
1.9:1Fail
1.2:1Fail
1.4:1Fail
5
2.6:1Fail
1.4:1Fail
1.1:1Fail
1.4:1Fail

Similar palettes

More like Faded Seaside Cottage

View all cool
Seaside Cottage Charm
Azure Coastline Calm
Coastal Cerulean Hues
Dusty Book Shelf
Faded Denim Comfort
Faded Denim Comfort