Back to palettes

Palette

Coastal Cliffs

Cool greys and subtle blues evoke the rugged beauty of weathered coastal cliffs.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#778899#A2B2C2#C7D1D9#DCE3E8#64727D

Palette guide

How to use Coastal Cliffs

Overview

The "Coastal Cliffs" palette offers a sophisticated range of cool grays and subtle blues, perfectly embodying the rugged beauty and serene calm of weathered seaside cliffs. From the deep, grounding #64727D to the airy, near-white #DCE3E8, this palette provides a harmonious gradient of muted tones. The inclusion of #778899, #A2B2C2, and #C7D1D9 creates a sense of depth and texture, allowing for elegant layering and subtle differentiation. This collection is ideal for designers seeking a minimalist, modern, and enduring aesthetic, reflecting strength and tranquility in equal measure.

Best used for

  • Modern architectural design presentations
  • Minimalist website interfaces
  • High-end tech or software branding
  • Contemporary art galleries or portfolios
  • Urban fashion and lifestyle brands
  • Corporate branding with a calm, stable feel

Suggested color roles

primary

Use #778899 for main sections, headers, or large UI elements, establishing a solid, calming foundation.

secondary

Apply #A2B2C2 for supporting content blocks, subheadings, or subtle background variations, maintaining a cohesive cool tone.

accent

The darkest shade, #64727D, serves well for strong accents, important icons, or call-to-action elements that require significant visual weight.

background

Employ #DCE3E8 as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use #64727D for body text and navigation links to ensure excellent readability against the lighter grays and blues.

Accessibility notes

  • Ensure #64727D text has excellent contrast against #DCE3E8 and #C7D1D9 backgrounds for WCAG AA compliance.
  • Avoid using #DCE3E8, #C7D1D9, or #A2B2C2 for text directly, as they are too light for readability on most backgrounds.
  • When using text on #778899, ensure it is a very light color like #DCE3E8 for optimal contrast.
  • Provide clear visual indicators beyond color for interactive elements, especially when using similar shades.

Recommended combinations

Stone Edge

Creates a strong, modern contrast, perfect for headers, footers, or sections needing a bold yet refined presence.

#64727D · #DCE3E8 · #778899

Misty Horizon

Ideal for subtle, layered backgrounds or soft UI elements, evoking a calm, expansive feel.

#A2B2C2 · #C7D1D9 · #DCE3E8

Rugged Depth

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#778899 · #64727D · #A2B2C2

CSS variables

:root {
  --coastal-cliffs-1: #778899;
  --coastal-cliffs-2: #A2B2C2;
  --coastal-cliffs-3: #C7D1D9;
  --coastal-cliffs-4: #DCE3E8;
  --coastal-cliffs-5: #64727D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-cliffs": {
        1: "#778899",
        2: "#A2B2C2",
        3: "#C7D1D9",
        4: "#DCE3E8",
        5: "#64727D",
      }
    }
  }
}

Related searches

cool grey blue paletteminimalist coastal colorsrugged stone hex codesserene neutral color schememodern gray design palette

Palette colors

Hex values

Color 1#778899
·
Color 2#A2B2C2
·
Color 3#C7D1D9
·
Color 4#DCE3E8
·
Color 5#64727D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
2.8:1Fail
1.4:1Fail
2
1.7:1Fail
1.4:1Fail
1.7:1Fail
2.3:1Fail
3
2.4:1Fail
1.4:1Fail
1.2:1Fail
3.2:1AA18
4
2.8:1Fail
1.7:1Fail
1.2:1Fail
3.8:1AA18
5
1.4:1Fail
2.3:1Fail
3.2:1AA18
3.8:1AA18

Similar palettes

More like Coastal Cliffs

View all neutral
Coastal Stone Pebble
River Stone Calm
River Stone Calm
River Stone Whisper
Riverbed Pebbles Smooth
Serene Pebble Path