Back to palettes

Palette

Cloud Petal Hues

Subtle shades of light grey and white, like delicate cloud petals drifting across a serene sky.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Petal Hues 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 Petal Hues.

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

Data visualization

#F8F8F8#E8E8E8#D8D8D8#C8C8C8#B8B8B8

Palette guide

How to use Cloud Petal Hues

Overview

The Cloud Petal Hues palette offers subtle shades of light grey and white, like delicate cloud petals drifting across a serene sky. Ranging from the soft depth of #B8B8B8 to the airy lightness of #F8F8F8, with gentle transitions through #C8C8C8, #D8D8D8, and #E8E8E8, 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 purity and spaciousness.

Best used for

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

Suggested color roles

primary

Use #B8B8B8 as the deepest grey for subtle anchors like light dividers or very light typography on bright backgrounds. It offers the most contrast.

secondary

Employ #C8C8C8 for supporting sections, subtle background variations, or light borders. It provides a gentle contrast.

accent

Apply #D8D8D8 for interactive elements, hover states, or soft highlights. It adds a touch of subtle distinction.

background

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

text

For body text on backgrounds like #F8F8F8 or #E8E8E8, a very dark charcoal (#333333) or black is essential for readability, as palette colors are too light for text.

Accessibility notes

  • This palette is extremely light. Almost all text-on-color combinations within the palette will fail WCAG contrast standards.
  • Always use a very dark charcoal or black text color for all body text and critical information to ensure readability.
  • The palette is best for backgrounds and subtle layering, not for text-heavy interfaces without external dark text colors.
  • Use a contrast checker diligently for any text elements, even if using an external dark color, to ensure sufficient contrast against the chosen background shade.

Recommended combinations

Soft Layers

Ideal for creating subtle, layered backgrounds in web or print, evoking softness and depth.

#B8B8B8 · #C8C8C8 · #F8F8F8

Clean Canvas

Excellent for defining subtle sections or borders. #D8D8D8 for light lines, #F8F8F8 as the main background.

#D8D8D8 · #F8F8F8 · #E8E8E8

Airy Interface

Perfect for a very light, spacious UI. #C8C8C8 for interactive elements, with #E8E8E8 and #F8F8F8 for layered backgrounds.

#C8C8C8 · #E8E8E8 · #F8F8F8

CSS variables

:root {
  --cloud-petal-hues-1: #F8F8F8;
  --cloud-petal-hues-2: #E8E8E8;
  --cloud-petal-hues-3: #D8D8D8;
  --cloud-petal-hues-4: #C8C8C8;
  --cloud-petal-hues-5: #B8B8B8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-petal-hues": {
        1: "#F8F8F8",
        2: "#E8E8E8",
        3: "#D8D8D8",
        4: "#C8C8C8",
        5: "#B8B8B8",
      }
    }
  }
}

Related searches

monochromatic white grey palettesubtle cloud color schememinimalist light UIairy grey branding colorssoft white background scheme

Palette colors

Hex values

Color 1#F8F8F8
·
Color 2#E8E8E8
·
Color 3#D8D8D8
·
Color 4#C8C8C8
·
Color 5#B8B8B8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.6:1Fail
1.9:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.9:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Cloud Petal Hues

View all monochrome
Cloud Dancer Ballet
Arctic Snow Fur
City Grayscale View
Cloudspun Linen
Monochromatic Graphite
Monochromatic Ink Wash