Palette

Seaside Cottage Grey

Muted, airy greys and gentle whites, bringing the quiet, refreshing feel of a seaside cottage.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F716F#8FA7A7#C2D4D4#E0EFEF#F7FDFD

Palette guide

How to use Seaside Cottage Grey

Overview

The Seaside Cottage Grey palette offers a serene collection of muted, airy grays and gentle whites, capturing the quiet, refreshing feel of a seaside cottage. This neutral palette features hex codes such as #5F716F (Deep Blue-Gray), #8FA7A7 (Mid-Tone Gray), #C2D4D4 (Light Aqua-Gray), #E0EFEF (Pale Gray), and #F7FDFD (Near White). It's an excellent choice for designers and developers seeking a minimalist, sophisticated, and tranquil aesthetic. The subtle variations in gray, from deep and grounding to light and ethereal, provide depth and texture while maintaining an overall sense of calm and openness, perfect for modern and elegant design projects.

Best used for

Modern minimalist web design and user interfaces
Architectural visualization or design portfolios
Spa or wellness brand identity and marketing materials
High-end furniture or decor e-commerce websites
Photography websites as a clean, unobtrusive backdrop
UI/UX for productivity or calm-focused applications

Suggested color roles

primary

Use #5F716F (Deep Blue-Gray) as a strong, grounding base for main headings, navigation, or prominent brand elements.

secondary

Employ #8FA7A7 (Mid-Tone Gray) as a versatile mid-tone for subheadings, secondary buttons, or background elements that need subtle depth.

accent

Apply #C2D4D4 (Light Aqua-Gray) for subtle highlights, interactive states, or to introduce a hint of coolness without overpowering.

background

Utilize #F7FDFD (Near White) as a crisp, clean off-white that creates an expansive, airy, and bright canvas for content.

text

For main body text and headings on #F7FDFD, #5F716F ensures excellent readability. A dark charcoal like #333333 is recommended for general body text.

Accessibility notes

Ensure #5F716F and #8FA7A7 have excellent contrast against #F7FDFD for all text elements to ensure readability.
#C2D4D4 and #E0EFEF have low contrast with #F7FDFD; avoid using them for essential text or small font sizes.
Use a contrast checker to verify readability for text on any of the lighter gray shades, especially for smaller fonts.
Darker grays on lighter grays will generally provide better contrast than light grays on light grays within this palette.

Recommended combinations

Ocean Mist

A strong, calming combination perfect for hero sections, primary content, or establishing a sophisticated, minimalist brand presence.

#5F716F · #8FA7A7 · #F7FDFD

Whispering Sands

Creates a very soft, ethereal feel, ideal for layered backgrounds, subtle card designs, or elements requiring minimal visual impact.

#C2D4D4 · #E0EFEF · #F7FDFD

Deep Horizon

For a more nuanced and sophisticated interface, suitable for infographics, data visualization, or elements requiring subtle depth and texture.

#5F716F · #C2D4D4 · #8FA7A7

CSS variables

:root {
  --seaside-cottage-grey-1: #5F716F;
  --seaside-cottage-grey-2: #8FA7A7;
  --seaside-cottage-grey-3: #C2D4D4;
  --seaside-cottage-grey-4: #E0EFEF;
  --seaside-cottage-grey-5: #F7FDFD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-cottage-grey": {
        1: "#5F716F",
        2: "#8FA7A7",
        3: "#C2D4D4",
        4: "#E0EFEF",
        5: "#F7FDFD",
      }
    }
  }
}

Hex values

Color 1#5F716F

Color 2#8FA7A7

Color 3#C2D4D4

Color 4#E0EFEF

Color 5#F7FDFD

Accessibility

Contrast checker

2:1Fail

3.4:1AA18

4.4:1AA18

5:1AA

2:1Fail

1.7:1Fail

2.2:1Fail

2.5:1Fail