Back to palettes

Palette

Soft Cloud Drift

A gentle progression of soft whites and light grays, mimicking the serene, drifting patterns of clouds.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Cloud Drift 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 Soft Cloud Drift.

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

Data visualization

#F0F5F7#DDE4E6#C5CED2#A8B2B7#8F979C

Palette guide

How to use Soft Cloud Drift

Overview

The Soft Cloud Drift palette offers a gentle progression of soft whites and light grays, perfect for creating serene and minimalist designs. With hues ranging from the airy #F0F5F7 to the grounding #8F979C, and balanced by shades like #C5CED2, this palette mimics the tranquil patterns of clouds. Designers and developers can leverage these subtle neutrals to build clean user interfaces, provide calming backgrounds, or establish an ethereal brand identity. The understated elegance ensures versatility, allowing these colors to serve as a sophisticated foundation or a delicate accent in various digital and print applications.

Best used for

  • Minimalist user interfaces
  • Serene website backgrounds
  • Subtle corporate branding
  • Clean editorial layouts
  • Calming mobile applications
  • Ethereal product packaging

Suggested color roles

primary

Use #F0F5F7 as the dominant background or base color for an expansive, airy feel.

secondary

Apply #DDE4E6 for subtle sections, dividers, or light hover states, offering a gentle contrast.

accent

Employ #A8B2B7 for understated accents, icons, or secondary calls to action, providing slight depth.

background

The lightest shade, #F0F5F7, is ideal for primary backgrounds, ensuring a clean and soft canvas.

text

For body text, use #8F979C on lighter backgrounds like #F0F5F7 to ensure readability, or a dark charcoal/black for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter grays for text, e.g., #C5CED2 text on #DDE4E6 might be too low.
  • Utilize #8F979C for primary text on #F0F5F7 backgrounds to meet WCAG contrast guidelines.
  • Avoid using adjacent shades for interactive elements without clear hover or focus states.
  • Reserve the darkest color, #8F979C, for essential information when placed on very light backgrounds.

Recommended combinations

Airy Base

Creates a light, expansive, and clean foundational look suitable for web page backgrounds and card elements.

#F0F5F7 · #DDE4E6 · #C5CED2

Subtle Depth

Offers gentle contrast for headings, subheadings, and UI elements, providing structure without harshness.

#F0F5F7 · #A8B2B7 · #8F979C

Grayscale Harmony

Excellent for creating balanced sections or gradients where a smooth, neutral progression is desired.

#DDE4E6 · #C5CED2 · #A8B2B7

CSS variables

:root {
  --soft-cloud-drift-1: #F0F5F7;
  --soft-cloud-drift-2: #DDE4E6;
  --soft-cloud-drift-3: #C5CED2;
  --soft-cloud-drift-4: #A8B2B7;
  --soft-cloud-drift-5: #8F979C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-cloud-drift": {
        1: "#F0F5F7",
        2: "#DDE4E6",
        3: "#C5CED2",
        4: "#A8B2B7",
        5: "#8F979C",
      }
    }
  }
}

Related searches

neutral UI palettesubtle grey color schememinimalist web design colorscalm background colorsethereal grey palette

Palette colors

Hex values

Color 1#F0F5F7
·
Color 2#DDE4E6
·
Color 3#C5CED2
·
Color 4#A8B2B7
·
Color 5#8F979C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2:1Fail
2.7:1Fail
2
1.2:1Fail
1.2:1Fail
1.7:1Fail
2.3:1Fail
3
1.5:1Fail
1.2:1Fail
1.4:1Fail
1.9:1Fail
4
2:1Fail
1.7:1Fail
1.4:1Fail
1.4:1Fail
5
2.7:1Fail
2.3:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Soft Cloud Drift

View all neutral
Arctic Fox Fur
Celestial Dust
Cloudscape Horizon View
Cloudy Day Serene
Coastal Stone Hearth
Dusky Bloom Hues