Back to palettes

Palette

Soft Greige Cloud

A serene grayscale selection with hints of greige for a quiet, contemplative mood.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A6C6B#8C8C8C#A8A8A8#C4C4C4#E0E0E0

Palette guide

How to use Soft Greige Cloud

Overview

The Soft Greige Cloud palette offers a serene grayscale selection with subtle hints of greige, cultivating a quiet and contemplative mood. Ranging from the deep #6A6C6B to the bright #E0E0E0, with balanced mid-tones like #A8A8A8, this collection is perfect for designers and developers seeking a sophisticated, minimalist aesthetic. Its monochromatic nature ensures harmony and elegance, making it highly versatile for corporate branding, architectural presentations, or any digital interface that values clarity and understated luxury. The varying shades provide ample opportunities for depth and visual hierarchy without introducing overt color.

Best used for

  • Corporate and professional websites
  • Minimalist portfolios and galleries
  • Architectural and interior design presentations
  • Editorial and magazine layouts
  • Sophisticated product branding
  • Clean, data-heavy dashboards

Suggested color roles

primary

Use #E0E0E0 as the foundational background for a bright, clean, and spacious canvas.

secondary

Apply #C4C4C4 for subtle content divisions, card backgrounds, or secondary information.

accent

Employ #6A6C6B as a strong, grounding accent for primary calls to action, headlines, or key icons.

background

The lightest shade, #E0E0E0, is ideal for primary backgrounds, ensuring content stands out clearly.

text

For optimal readability, use #6A6C6B for body text and headings on lighter backgrounds like #E0E0E0.

Accessibility notes

  • Ensure strong contrast for text; #6A6C6B on #E0E0E0 offers good readability for body copy.
  • Avoid using shades like #C4C4C4 or #A8A8A8 for critical text on #E0E0E0 due to insufficient contrast.
  • Differentiate interactive elements clearly with sufficient contrast or visual cues like borders/shadows.
  • For smaller text, always opt for the darkest shades on the lightest backgrounds to maintain legibility.

Recommended combinations

Minimal Contrast

Creates subtle shading and depth for backgrounds, borders, and secondary UI elements without harsh lines.

#E0E0E0 · #C4C4C4 · #A8A8A8

Strong & Light

Establishes a clear visual hierarchy, perfect for headlines, calls to action, and primary content on a light base.

#E0E0E0 · #8C8C8C · #6A6C6B

Mid-tone Blend

Harmonious mid-range grays for creating balanced sections, detailed components, or subtle data visualizations.

#C4C4C4 · #A8A8A8 · #8C8C8C

CSS variables

:root {
  --soft-greige-cloud-1: #6A6C6B;
  --soft-greige-cloud-2: #8C8C8C;
  --soft-greige-cloud-3: #A8A8A8;
  --soft-greige-cloud-4: #C4C4C4;
  --soft-greige-cloud-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-greige-cloud": {
        1: "#6A6C6B",
        2: "#8C8C8C",
        3: "#A8A8A8",
        4: "#C4C4C4",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

greige color paletteminimalist grey schemesophisticated neutralsmonochrome web designcalm grey tones

Palette colors

Hex values

Color 1#6A6C6B
·
Color 2#8C8C8C
·
Color 3#A8A8A8
·
Color 4#C4C4C4
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3:1AA18
4:1AA18
2
1.6:1Fail
1.4:1Fail
1.9:1Fail
2.5:1Fail
3
2.2:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
3:1AA18
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
4:1AA18
2.5:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Soft Greige Cloud

View all monochrome