Palette

Cloud Soft Canvas

A gentle, barely-there collection of whites and greys, like a pristine cloud formation or blank canvas.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F3F5#E1E5E7#D2D6D9#C3C7C9#B4B8BB

Palette guide

How to use Cloud Soft Canvas

Overview

The Cloud Soft Canvas palette is a gentle, barely-there collection of whites and greys, like a pristine cloud formation or blank canvas. Ranging from the soft depth of #B4B8BB to the airy lightness of #F0F3F5, with subtle transitions through #C3C7C9, #D2D6D9, and #E1E5E7, 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, pristine branding, or refined interfaces that convey calm and professionalism without overwhelming the user, fostering a sense of spaciousness and purity.

Best used for

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

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

For body text on backgrounds like #F0F3F5 or #E1E5E7, 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.

#B4B8BB · #C3C7C9 · #F0F3F5

Clean Canvas

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

#D2D6D9 · #F0F3F5 · #E1E5E7

Airy Interface

Perfect for a very light, spacious UI. #C3C7C9 for interactive elements, with #E1E5E7 and #F0F3F5 for layered backgrounds.

#C3C7C9 · #E1E5E7 · #F0F3F5

CSS variables

:root {
  --cloud-soft-canvas-1: #F0F3F5;
  --cloud-soft-canvas-2: #E1E5E7;
  --cloud-soft-canvas-3: #D2D6D9;
  --cloud-soft-canvas-4: #C3C7C9;
  --cloud-soft-canvas-5: #B4B8BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-soft-canvas": {
        1: "#F0F3F5",
        2: "#E1E5E7",
        3: "#D2D6D9",
        4: "#C3C7C9",
        5: "#B4B8BB",
      }
    }
  }
}

Hex values

Color 1#F0F3F5

Color 2#E1E5E7

Color 3#D2D6D9

Color 4#C3C7C9

Color 5#B4B8BB

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Cloud Soft Canvas

Cloud Soft Canvas

See it in context.

Ready when you are.

Built with Cloud Soft Canvas.

How to use Cloud Soft Canvas

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Layers

Clean Canvas

Airy Interface

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Soft Canvas