Palette

Grey Cloud Reflection

Soft, soothing grays and blues mimicking the serene, muted tones of an overcast sky reflected in still water.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A98A8#B0BAC4#CFD8DF#E6EDF2#6F7B8C

Palette guide

How to use Grey Cloud Reflection

Overview

The Grey Cloud Reflection palette evokes the serene, muted tones of an overcast sky mirrored in still water, offering a cool and calming array of blue-grays. From the near-white #E6EDF2 to the deep #6F7B8C, with harmonious mid-tones like #B0BAC4 and #8A98A8, this palette is perfect for designs seeking a tranquil, minimalist, 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 convey a sense of calm, spaciousness, and modern refinement across various digital and print applications, enhancing focus and visual harmony.

Best used for

Wellness apps and meditation platforms
Minimalist art showcases
Calm lifestyle blogs
Sophisticated tech interfaces
Architectural visualization
Contemplative brand identities

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Accessibility notes

Ensure #6F7B8C text on #E6EDF2 backgrounds provides sufficient WCAG AA contrast.
Avoid using #E6EDF2 or #CFD8DF for small text, especially on similar light backgrounds, due to low contrast.
When using mid-tones like #B0BAC4 for text, ensure the background provides sufficient differentiation.
Always verify contrast ratios for all interactive elements and crucial information using accessibility tools.

Recommended combinations

Water Mirror

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

#E6EDF2 · #B0BAC4 · #8A98A8

Misty Depths

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

#6F7B8C · #B0BAC4 · #8A98A8

Sky Reflection

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

#CFD8DF · #8A98A8 · #6F7B8C

CSS variables

:root {
  --grey-cloud-reflection-1: #8A98A8;
  --grey-cloud-reflection-2: #B0BAC4;
  --grey-cloud-reflection-3: #CFD8DF;
  --grey-cloud-reflection-4: #E6EDF2;
  --grey-cloud-reflection-5: #6F7B8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grey-cloud-reflection": {
        1: "#8A98A8",
        2: "#B0BAC4",
        3: "#CFD8DF",
        4: "#E6EDF2",
        5: "#6F7B8C",
      }
    }
  }
}

Hex values

Color 1#8A98A8

Color 2#B0BAC4

Color 3#CFD8DF

Color 4#E6EDF2

Color 5#6F7B8C

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

2.5:1Fail

1.5:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2:1Fail

1.4:1Fail

1.2:1Fail

3:1Fail

2.5:1Fail

1.7:1Fail

1.2:1Fail

3.6:1AA18

1.5:1Fail

2.2:1Fail

3:1Fail

3.6:1AA18

Similar palettes

More like Grey Cloud Reflection

Grey Cloud Reflection

See it in context.

Ready when you are.

Built with Grey Cloud Reflection.

How to use Grey Cloud Reflection

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Water Mirror

Misty Depths

Sky Reflection

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Grey Cloud Reflection