Back to palettes

Palette

Pewter Cloud Veil

A soft, brooding monochromatic blend reflecting heavy clouds and the metallic sheen of pewter.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pewter Cloud Veil 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 Pewter Cloud Veil.

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

Data visualization

#2C3C48#5A6A78#8B9BAB#C1D1D8#F2F7F9

Palette guide

How to use Pewter Cloud Veil

Overview

The Pewter Cloud Veil palette presents a soft, brooding monochromatic blend that reflects heavy clouds and the metallic sheen of pewter. This sophisticated collection ranges from the deep, cool blue-grey of #2C3C48 to the ethereal lightness of #F2F7F9, with balanced mid-tones such as #8B9BAB. It's an excellent choice for designers and developers aiming for a modern, minimalist, or subtly moody aesthetic. The seamless transition between shades allows for elegant depth and dimension in UI design, while its inherently calm nature makes it suitable for environments that demand focus and understated luxury. This palette effortlessly communicates refinement and contemporary style.

Best used for

  • Modern minimalist web design
  • Luxury product branding
  • High-tech interfaces
  • Architectural visualization
  • Sophisticated editorial layouts
  • Professional corporate websites

Suggested color roles

primary

Use #2C3C48 for strong foundational elements like headers, footers, or primary navigation, providing a solid anchor.

secondary

Employ #5A6A78 for secondary information, subheadings, or background elements that need more depth than the lightest shade.

accent

Apply #8B9BAB for subtle highlights, active states, or graphic elements, offering a gentle lift.

background

Utilize #F2F7F9 as a clean, airy background, ensuring excellent readability and a spacious feel.

text

For body text, #2C3C48 offers optimal contrast on lighter backgrounds, or use a near-black for general text.

Accessibility notes

  • Ensure #2C3C48 text on #F2F7F9 background meets WCAG AA contrast ratios for all users.
  • Verify that interactive elements using mid-tones like #5A6A78 or #8B9BAB have sufficient contrast against their backgrounds.
  • Avoid using #C1D1D8 for small text on light backgrounds due to potential low contrast.
  • Consider larger font sizes or bolder weights for text rendered in lighter palette colors.

Recommended combinations

Cloud Depth

Creates a strong, balanced look for main content areas with clear hierarchy.

#2C3C48 · #5A6A78 · #F2F7F9

Veiled Layers

Excellent for subtle background textures, layered cards, or soft informational panels.

#8B9BAB · #C1D1D8 · #F2F7F9

Pewter Accent

Provides a sophisticated, monochromatic blend for distinct UI components or branding.

#2C3C48 · #8B9BAB · #C1D1D8

CSS variables

:root {
  --pewter-cloud-veil-1: #2C3C48;
  --pewter-cloud-veil-2: #5A6A78;
  --pewter-cloud-veil-3: #8B9BAB;
  --pewter-cloud-veil-4: #C1D1D8;
  --pewter-cloud-veil-5: #F2F7F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pewter-cloud-veil": {
        1: "#2C3C48",
        2: "#5A6A78",
        3: "#8B9BAB",
        4: "#C1D1D8",
        5: "#F2F7F9",
      }
    }
  }
}

Related searches

pewter color palettecloud grey schememoody monochrome designsophisticated blue-greyminimalist UI colors

Palette colors

Hex values

Color 1#2C3C48
·
Color 2#5A6A78
·
Color 3#8B9BAB
·
Color 4#C1D1D8
·
Color 5#F2F7F9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4:1AA18
7.2:1AAA
10.5:1AAA
2
2:1Fail
2:1Fail
3.6:1AA18
5.2:1AA
3
4:1AA18
2:1Fail
1.8:1Fail
2.6:1Fail
4
7.2:1AAA
3.6:1AA18
1.8:1Fail
1.5:1Fail
5
10.5:1AAA
5.2:1AA
2.6:1Fail
1.5:1Fail

Similar palettes

More like Pewter Cloud Veil

View all monochrome
Dusky Meadow Mist
Misty Greyscale Vista
Misty Horizon Calm
Misty Moor Haze
Misty Moorland Walk
Silent Fog Horizon