Palette

Cloud Dancer Ballet

Subtle variations of white and light grey create an airy, delicate feel, like clouds in motion.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Dancer Ballet 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 Dancer Ballet.

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

Data visualization

#D3D3D3#E0E0E0#F0F0F0#F8F8F8#B0B0B0

Palette guide

How to use Cloud Dancer Ballet

Overview

The Cloud Dancer Ballet palette offers a sophisticated monochrome spectrum of whites and light greys, perfect for minimalist and elegant designs. Ranging from the almost-white #F8F8F8 to the slightly deeper #B0B0B0 (Light Grey), this collection provides subtle variations for depth and structure without introducing strong color. Designers and developers can use these hex codes to create clean, airy, and highly professional interfaces. The nuances between #F0F0F0 and #E0E0E0 are ideal for background layering, card elements, or subtle dividers, ensuring a polished and understated aesthetic that champions content.

Best used for

High-end fashion or luxury brand websites
Architectural and interior design portfolios
Minimalist art galleries or photography sites
Corporate reports and professional documents
Clean, content-focused blog designs
Modern, understated mobile application interfaces

Suggested color roles

primary

Employ #F0F0F0 as the main background for a clean, expansive canvas, allowing content to take center stage.

secondary

Use #E0E0E0 for secondary containers, card backgrounds, or subtle section breaks to add gentle visual hierarchy.

accent

Apply #B0B0B0 for delicate borders, dividers, or very subtle interactive elements where minimal contrast is desired.

background

The lightest shade, #F8F8F8, is perfect for the absolute outermost background, creating an ethereal, almost invisible base.

text

For best readability, use a dark charcoal or black text (e.g., #222222) against any of these light grey backgrounds.

Accessibility notes

Text using #B0B0B0 on #F8F8F8 will likely fail WCAG contrast requirements; always use a very dark text.
Ensure interactive elements have clear focus states, as color changes will be minimal within this palette.
Use generous spacing and clear typography to compensate for the low color contrast between elements.
Avoid using any of these shades for text unless it's very large, bold, and purely decorative.

Recommended combinations

Minimalist Base

Creates a clean, layered background for web pages or presentations.

#F8F8F8 · #F0F0F0 · #E0E0E0

Subtle Depth

Ideal for adding structure to cards, panels, or subtle UI components.

#D3D3D3 · #B0B0B0 · #E0E0E0

Ethereal Contrast

Provides gentle visual separation for content blocks or navigation items.

#F0F0F0 · #B0B0B0 · #D3D3D3

CSS variables

:root {
  --cloud-dancer-ballet-1: #D3D3D3;
  --cloud-dancer-ballet-2: #E0E0E0;
  --cloud-dancer-ballet-3: #F0F0F0;
  --cloud-dancer-ballet-4: #F8F8F8;
  --cloud-dancer-ballet-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-dancer-ballet": {
        1: "#D3D3D3",
        2: "#E0E0E0",
        3: "#F0F0F0",
        4: "#F8F8F8",
        5: "#B0B0B0",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#E0E0E0

Color 3#F0F0F0

Color 4#F8F8F8

Color 5#B0B0B0

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

2:1Fail

1.4:1Fail

1.6:1Fail

1.9:1Fail

2:1Fail

Similar palettes

More like Cloud Dancer Ballet

Monochromatic Graphite

Cloud Dancer Ballet

See it in context.

Ready when you are.

Built with Cloud Dancer Ballet.

How to use Cloud Dancer Ballet

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Minimalist Base

Subtle Depth

Ethereal Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Dancer Ballet