Palette

Greyscale Aura

A refined gradient of grays and near-blacks, offering a timeless and effortlessly sophisticated aesthetic.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Greyscale Aura 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 Greyscale Aura.

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

Data visualization

#36454F#5D6D7E#95A5A6#CAD3C6#25323E

Palette guide

How to use Greyscale Aura

Overview

The Greyscale Aura palette offers a refined gradient of grays and near-blacks, perfect for creating a timeless and effortlessly sophisticated aesthetic. This collection, featuring deep charcoal like #25323E, classic gray #36454F, a soft silver #95A5A6, and a light, airy #CAD3C6, provides designers and developers with a versatile foundation for minimalist and elegant interfaces. Its subtle shifts in tone allow for depth and visual hierarchy without introducing additional hues, making it ideal for professional branding, clean web layouts, and sophisticated print materials. Use #5D6D7E for balanced mid-tones.

Best used for

Minimalist branding and logos
Corporate websites and professional portfolios
Elegant UI/UX design
Photography and art exhibition websites
Print materials like brochures and business cards
Modern architectural visualizations

Suggested color roles

primary

Use #36454F as a strong, reliable base for headers or main content blocks, providing a sophisticated anchor.

secondary

Employ #5D6D7E for secondary sections, subheadings, or background elements that need to stand out subtly from the primary.

accent

Leverage #CAD3C6 as a delicate accent for subtle highlights, interactive states, or lightweight graphic elements.

background

A lighter shade like #CAD3C6 works beautifully as a clean, unobtrusive background, offering excellent readability.

text

For body text, use the deep #25323E against lighter backgrounds like #CAD3C6 for optimal contrast and readability.

Accessibility notes

Ensure sufficient contrast between #25323E text and lighter backgrounds like #CAD3C6 for WCAG AA compliance.
Avoid using #95A5A6 for small text on #5D6D7E backgrounds, as contrast might be insufficient.
Utilize #36454F or #25323E for critical UI elements to ensure they are easily discernible.
Test color pairings with contrast checkers, especially for interactive elements and form fields.

Recommended combinations

Elegant Base

Ideal for a sophisticated website footer or a dark-mode theme where #CAD3C6 provides clear text contrast.

#25323E · #36454F · #CAD3C6

Soft Contrast

Excellent for subtle section dividers, card backgrounds, or secondary information panels, offering gentle visual separation.

#5D6D7E · #95A5A6 · #CAD3C6

Deep & Light

Perfect for a professional header with a light background and strong, readable text.

#36454F · #CAD3C6 · #25323E

CSS variables

:root {
  --greyscale-aura-1: #36454F;
  --greyscale-aura-2: #5D6D7E;
  --greyscale-aura-3: #95A5A6;
  --greyscale-aura-4: #CAD3C6;
  --greyscale-aura-5: #25323E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "greyscale-aura": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#95A5A6",
        4: "#CAD3C6",
        5: "#25323E",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5D6D7E

Color 3#95A5A6

Color 4#CAD3C6

Color 5#25323E

Accessibility

Contrast checker

1.9:1Fail

3.9:1AA18

6.4:1AA

1.3:1Fail

1.9:1Fail

2.1:1Fail

3.5:1AA18

2.5:1Fail

3.9:1AA18

2.1:1Fail

1.7:1Fail

5.1:1AA

6.4:1AA

3.5:1AA18

1.7:1Fail

8.5:1AAA

1.3:1Fail

2.5:1Fail

5.1:1AA

8.5:1AAA

Similar palettes

More like Greyscale Aura

Minimalist Urban Echo

Selene's Crater Dust