Palette

Pewter Glimmer

A refined palette of cool metallic grays, reflecting the subtle sheen and timeless elegance of pewter.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A535F#6A7B8D#8B9DAF#AEC0D1#CFDDEE

Palette guide

How to use Pewter Glimmer

Overview

The Pewter Glimmer palette offers a refined collection of cool metallic grays, reflecting the subtle sheen and timeless elegance of pewter. Ranging from the deep, cool #4A535F to the luminous #CFDDEE, with harmonious mid-tones like #8B9DAF, this palette is perfect for designers and developers seeking a sophisticated and modern aesthetic. Its cool undertones convey professionalism and stability, making it highly versatile for corporate, luxury, or technology-focused projects. The subtle variations in shade allow for dynamic visual layering and a polished finish, ensuring designs appear sleek and thoughtfully composed. This palette truly embodies understated elegance and contemporary appeal.

Best used for

Luxury brand identity
Corporate website design
High-end tech product interfaces
Modern architectural portfolios
Elegant print materials
Automotive industry branding

Suggested color roles

primary

Designate #4A535F as the primary color for commanding headlines, navigation bars, or prominent brand elements.

secondary

Employ #6A7B8D for subheadings, secondary buttons, or larger sections, offering a gentle yet distinct presence.

accent

Apply #8B9DAF for subtle highlights, interactive states, or graphic details, adding a touch of understated brilliance.

background

Utilize #CFDDEE as a crisp, light background, ensuring maximum readability and a clean aesthetic.

text

For optimal legibility, use #4A535F for body text on lighter backgrounds, or a dark charcoal.

Accessibility notes

Ensure strong contrast between #4A535F text and #CFDDEE background to meet WCAG AA standards.
Verify that #6A7B8D and #8B9DAF have sufficient contrast when used as text on lighter shades like #CFDDEE.
Avoid using #AEC0D1 for small text on very light backgrounds as it may lack necessary contrast.
Use a contrast checker for all color pairings, especially for critical information or interactive elements.

Recommended combinations

Metallic Depth

Creates a sophisticated, layered look for hero sections or primary content blocks.

#4A535F · #6A7B8D · #CFDDEE

Glimmering Layers

Ideal for subtle background patterns, card elements, or soft informational overlays.

#8B9DAF · #AEC0D1 · #CFDDEE

Elegant Contrast

Provides a balanced, cool-toned combination for distinct UI components or brand accents.

#4A535F · #8B9DAF · #AEC0D1

CSS variables

:root {
  --pewter-glimmer-1: #4A535F;
  --pewter-glimmer-2: #6A7B8D;
  --pewter-glimmer-3: #8B9DAF;
  --pewter-glimmer-4: #AEC0D1;
  --pewter-glimmer-5: #CFDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pewter-glimmer": {
        1: "#4A535F",
        2: "#6A7B8D",
        3: "#8B9DAF",
        4: "#AEC0D1",
        5: "#CFDDEE",
      }
    }
  }
}

Hex values

Color 1#4A535F

Color 2#6A7B8D

Color 3#8B9DAF

Color 4#AEC0D1

Color 5#CFDDEE

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

4.2:1AA18

5.7:1AA

1.8:1Fail

1.6:1Fail

2.3:1Fail

3.2:1AA18

2.8:1Fail

1.6:1Fail

1.5:1Fail

2:1Fail

4.2:1AA18

2.3:1Fail

1.5:1Fail

1.4:1Fail

5.7:1AA

3.2:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Pewter Glimmer

Ancient Calligraphy Ink

Ancient Marble Ruins