Back to palettes

Palette

Cloud Grey Mirage

A soft, monochromatic spectrum of greys and whites, like watching clouds drift across an expansive sky.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A0AEC0#BCCCDC#CFD8DC#ECEFF1#F7FAFC

Palette guide

How to use Cloud Grey Mirage

Overview

The Cloud Grey Mirage palette presents a soft, monochromatic spectrum of greys and whites, like watching clouds drift across an expansive sky. Ranging from the subtle depth of #A0AEC0 to the airy lightness of #F7FAFC, with gentle transitions through #BCCCDC, #CFD8DC, and #ECEFF1, this collection is the epitome of minimalist elegance. It's an excellent choice for designers and developers aiming for a clean, sophisticated, and understated aesthetic. Leverage these serene hues to create modern websites, minimalist branding, or pristine interfaces that convey calm and professionalism without overwhelming the user, fostering a sense of spaciousness.

Best used for

  • Minimalist web design
  • High-tech product branding
  • Modern corporate interfaces
  • Art and photography portfolios
  • Luxury real estate marketing
  • Clean editorial layouts

Suggested color roles

primary

Use #A0AEC0 for main navigation, bold typography, or elements requiring a subtle anchor. It provides the deepest grey in this light palette.

secondary

Employ #BCCCDC for secondary content areas, dividers, or subtle background variations. It offers a gentle contrast to the primary.

accent

Apply #CFD8DC for interactive elements, hover states, or soft highlights. Its slightly warmer tone can add a touch of subtle distinction.

background

Utilize #F7FAFC for clean, open backgrounds. This almost-white shade creates an expansive, airy canvas, promoting readability.

text

For body text on light backgrounds like #F7FAFC or #ECEFF1, #A0AEC0 provides good readability. Consider a very dark charcoal (#333333) for critical text contrast.

Accessibility notes

  • Ensure #A0AEC0 text on #F7FAFC or #ECEFF1 backgrounds meets WCAG contrast standards. Many combinations will require careful checking.
  • Avoid using #BCCCDC or #CFD8DC text on the lighter backgrounds, as contrast will likely be insufficient.
  • This monochromatic palette requires diligent contrast checking for all text and interactive elements.
  • For body text, consider using a darker grey or charcoal outside the palette if WCAG AA compliance is difficult to achieve with palette colors alone.

Recommended combinations

Subtle Depth

Ideal for a clean, professional look. #A0AEC0 for headers, #BCCCDC for secondary content, and #F7FAFC as a pristine background.

#A0AEC0 · #BCCCDC · #F7FAFC

Mirage Layers

Excellent for layered UI elements or subtle gradients, creating depth without strong contrast.

#BCCCDC · #CFD8DC · #ECEFF1

Airy Canvas

Perfect for a very light, spacious design. #A0AEC0 for key text, with #ECEFF1 and #F7FAFC for layered backgrounds.

#A0AEC0 · #ECEFF1 · #F7FAFC

CSS variables

:root {
  --cloud-grey-mirage-1: #A0AEC0;
  --cloud-grey-mirage-2: #BCCCDC;
  --cloud-grey-mirage-3: #CFD8DC;
  --cloud-grey-mirage-4: #ECEFF1;
  --cloud-grey-mirage-5: #F7FAFC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-grey-mirage": {
        1: "#A0AEC0",
        2: "#BCCCDC",
        3: "#CFD8DC",
        4: "#ECEFF1",
        5: "#F7FAFC",
      }
    }
  }
}

Related searches

monochromatic grey palettesubtle cloud color schememinimalist white grey UIcalm neutral web designairy grey branding colors

Palette colors

Hex values

Color 1#A0AEC0
·
Color 2#BCCCDC
·
Color 3#CFD8DC
·
Color 4#ECEFF1
·
Color 5#F7FAFC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
2:1Fail
2.2:1Fail
2
1.4:1Fail
1.1:1Fail
1.4:1Fail
1.6:1Fail
3
1.6:1Fail
1.1:1Fail
1.3:1Fail
1.4:1Fail
4
2:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
5
2.2:1Fail
1.6:1Fail
1.4:1Fail
1.1:1Fail

Similar palettes

More like Cloud Grey Mirage

View all monochrome
Monochromatic Mist
Ghostly Fog Hues
Monochromatic Foggy City
Monochrome Ash Veil
Monochrome Charcoal Depth
Monochrome Dawn Haze