Back to palettes

Palette

Grey Cloud Cascade

Capturing the serene, layered beauty of clouds slowly drifting across a muted sky.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grey Cloud Cascade 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 Grey Cloud Cascade.

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

Data visualization

#A7B3BF#8C9AAA#6A7B8C#C4D0D9#56606C

Palette guide

How to use Grey Cloud Cascade

Overview

The Grey Cloud Cascade palette beautifully captures the serene, layered beauty of an overcast sky, offering a calming gradient of blue-grays. From the airy #C4D0D9 to the deep, atmospheric #56606C, with harmonious mid-tones like #A7B3BF and #6A7B8C, this monochromatic collection is perfect for designs seeking a minimalist, tranquil, and sophisticated feel. Designers and developers can leverage these shades to create serene user interfaces, contemplative branding, or elegant editorial layouts. It's an excellent choice for projects that aim to evoke a sense of calm, spaciousness, and modern refinement across various digital and print applications, enhancing focus and visual harmony.

Best used for

  • Meditation apps and calm UI
  • Minimalist art platforms
  • Calm lifestyle blogs
  • Sophisticated tech interfaces
  • Architectural renderings
  • Contemplative branding

Suggested color roles

primary

Use #56606C as a deep, foundational primary for headers, important text, or strong brand elements.

secondary

Apply #6A7B8C for subheadings, secondary buttons, or larger content blocks, offering a versatile mid-grey.

accent

Employ #A7B3BF as a subtle highlight for interactive elements, delicate details, or soft visual cues.

background

Utilize #C4D0D9 for light, clean main content backgrounds, or #A7B3BF for a slightly richer, calming canvas.

text

For optimal contrast, use black, dark charcoal, or #56606C for text on lighter backgrounds.

Accessibility notes

  • Ensure #56606C text on #C4D0D9 backgrounds provides sufficient WCAG AA contrast.
  • Avoid using #C4D0D9 for small text, especially on similar light backgrounds, due to low contrast.
  • When using mid-tones like #A7B3BF for text, ensure the background provides sufficient differentiation.
  • Always verify contrast ratios for all interactive elements and crucial information using accessibility tools.

Recommended combinations

Sky Layers

Creates a soft, atmospheric background with gentle transitions, ideal for conveying calm and depth.

#C4D0D9 · #A7B3BF · #6A7B8C

Cloud Depth

Perfect for strong headers and content blocks, offering clear readability against lighter supporting elements.

#56606C · #A7B3BF · #8C9AAA

Misty Horizon

Use for subtle graphic elements, borders, or section breaks that require a sophisticated, muted touch.

#8C9AAA · #6A7B8C · #C4D0D9

CSS variables

:root {
  --grey-cloud-cascade-1: #A7B3BF;
  --grey-cloud-cascade-2: #8C9AAA;
  --grey-cloud-cascade-3: #6A7B8C;
  --grey-cloud-cascade-4: #C4D0D9;
  --grey-cloud-cascade-5: #56606C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grey-cloud-cascade": {
        1: "#A7B3BF",
        2: "#8C9AAA",
        3: "#6A7B8C",
        4: "#C4D0D9",
        5: "#56606C",
      }
    }
  }
}

Related searches

cloud grey palettecalm blue grey colorsminimalist sky schemeatmospheric designserene grey branding

Palette colors

Hex values

Color 1#A7B3BF
·
Color 2#8C9AAA
·
Color 3#6A7B8C
·
Color 4#C4D0D9
·
Color 5#56606C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
1.4:1Fail
3:1Fail
2
1.3:1Fail
1.5:1Fail
1.8:1Fail
2.2:1Fail
3
2:1Fail
1.5:1Fail
2.8:1Fail
1.5:1Fail
4
1.4:1Fail
1.8:1Fail
2.8:1Fail
4.1:1AA18
5
3:1Fail
2.2:1Fail
1.5:1Fail
4.1:1AA18

Similar palettes

More like Grey Cloud Cascade

View all monochrome