Palette

Cloud Grey Serene

A peaceful gradient of cool grays, reminiscent of a quiet, misty morning landscape.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#A9A9A9#C0C0C0#D3D3D3#E6E6FA

Palette guide

How to use Cloud Grey Serene

Overview

The Cloud Grey Serene palette offers a peaceful gradient of cool grays, reminiscent of a quiet, misty morning landscape, accented by a hint of soft blue. Ranging from the sophisticated depth of #708090 to the airy lightness of #E6E6FA, with versatile mid-tones like #A9A9A9, #C0C0C0, and #D3D3D3, this collection embodies minimalism and calm. It's an excellent choice for designers and developers seeking to create clean, sophisticated, and understated digital or physical environments. Leverage these serene hues to build modern websites, tranquil branding, or pristine interfaces that convey elegance and professionalism, promoting a sense of quiet refinement.

Best used for

Minimalist user interfaces
Sophisticated corporate websites
Architectural firm branding
Luxury product showcases
Meditation app designs
Contemporary art exhibitions

Suggested color roles

primary

Use #708090 as the dominant, anchoring color for main headers, navigation, or strong brand elements. It provides a solid, cool foundation.

secondary

Employ #A9A9A9 for supporting sections, subheadings, or secondary content. It offers a softer yet substantial presence.

accent

Apply #C0C0C0 for subtle highlights, interactive states, or decorative elements. Its light grey provides gentle contrast and refinement.

background

Utilize #E6E6FA for clean, expansive backgrounds. This very light, almost white with a hint of blue, creates an airy, serene canvas.

text

For body text on light backgrounds like #E6E6FA or #D3D3D3, #708090 provides excellent readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

Ensure #708090 text on #E6E6FA or #D3D3D3 backgrounds meets WCAG contrast standards.
Avoid using #C0C0C0 or #D3D3D3 text on #E6E6FA, as the contrast will be insufficient for legibility.
Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Misty Morning

Ideal for a sophisticated, calming theme. #708090 for primary, #A9A9A9 for secondary, and #E6E6FA for a serene background.

#708090 · #A9A9A9 · #E6E6FA

Silvered Calm

Excellent for subtle gradients or layered elements, creating depth without harshness.

#A9A9A9 · #C0C0C0 · #D3D3D3

Soft Horizon

Creates an airy, expansive feel. #708090 for grounding, #D3D3D3 for main content, and #E6E6FA as a soft background.

#708090 · #D3D3D3 · #E6E6FA

CSS variables

:root {
  --cloud-grey-serene-1: #708090;
  --cloud-grey-serene-2: #A9A9A9;
  --cloud-grey-serene-3: #C0C0C0;
  --cloud-grey-serene-4: #D3D3D3;
  --cloud-grey-serene-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-grey-serene": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#C0C0C0",
        4: "#D3D3D3",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#A9A9A9

Color 3#C0C0C0

Color 4#D3D3D3

Color 5#E6E6FA

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.7:1Fail

3.3:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

1.9:1Fail

2.2:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

2.7:1Fail

1.6:1Fail

1.2:1Fail

3.3:1AA18

1.9:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Cloud Grey Serene

Cloud Grey Serene

See it in context.

Ready when you are.

Built with Cloud Grey Serene.

How to use Cloud Grey Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Morning

Silvered Calm

Soft Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Grey Serene