Grey Color Palette: 7 Modern Schemes (Warm & Cool) with Hex Codes

Grey is the quiet workhorse of design. The right grey color palette brings structure, calm, and a clean, modern feel to almost any interface — which is why greys form the backbone of nearly every website, app, and brand system. (Whether you spell it "grey" or "gray," the colour is the same.) Get your greys right and everything else in your design looks more polished.

This guide covers seven modern grey palettes with hex codes, the difference between warm and cool greys, and copy-paste CSS. Build your own neutral scale anytime on the PaletteCSS palette browser.

Warm grey vs cool grey

Not all greys are created equal. The undertone changes the entire mood:

• Cool greys have a blue undertone. They feel modern, technical, and crisp — great for SaaS, tech, and minimalist design.
• Warm greys (sometimes called "greige") have a beige or brown undertone. They feel soft, inviting, and organic — great for lifestyle, interiors, and editorial design.
• Neutral greys have no strong undertone — the safest choice for pure structure and text.

Mixing a warm grey background with cool grey text (or vice versa) is a common mistake that makes a design feel slightly "off." Pick a temperature and stay consistent. For the fundamentals, see our colour theory basics guide.

7 grey color palettes (with hex codes)

1. Modern Neutral

The classic UI grey scale — clean and dependable.

#F8F9FA · #E9ECEF · #CED4DA · #6C757D · #343A40

2. Warm Greige

Soft, warm greys for an inviting, editorial feel.

#F5F3F0 · #E0DBD4 · #C4BDB2 · #8C8579 · #5C564E

3. Cool Slate

Blue-tinged greys for a crisp, technical look.

#F1F3F5 · #D3D9DF · #9AA5B1 · #5D6B7A · #2E3A46

4. Charcoal & Silver

High-contrast neutral scale for bold, minimal design.

#FFFFFF · #D9D9D9 · #A6A6A6 · #595959 · #1A1A1A

5. Soft Grey UI

The gentle Material-style grey ramp for interfaces.

#FAFAFA · #EEEEEE · #BDBDBD · #757575 · #212121

6. Blue Grey

Moody, sophisticated greys with a clear blue cast.

#ECEFF1 · #CFD8DC · #90A4AE · #546E7A · #263238

7. Greige Minimal

Warm, muted, and calm — perfect for portfolios.

#F4F1EC · #DAD4C8 · #B3AB9C · #807868 · #4A453B

How to use a grey palette in CSS

Greys are the perfect candidate for a numbered CSS variable scale:

:root {
  --grey-50:  #F8F9FA;
  --grey-200: #E9ECEF;
  --grey-400: #CED4DA;
  --grey-600: #6C757D;
  --grey-900: #343A40;
}

body {
  background: var(--grey-50);
  color: var(--grey-900);
}

This kind of scale is exactly how design systems like Tailwind CSS palettes structure their neutrals.

Tips for designing with grey

• Use more than one grey. A good UI needs several steps — light backgrounds, mid borders, dark text.
• Avoid pure black. Very dark grey (#1A1A1A or #212121) reads as "black" but is softer on the eyes than #000000.
• Add one accent. A single brand colour against a grey scale instantly draws the eye to buttons and links.
• Keep undertones consistent. Do not mix warm and cool greys in the same design.

Frequently asked questions

What is a good grey hex code?

For a versatile mid grey, #6C757D works well; for backgrounds try #F8F9FA, and for dark text use #343A40. Together they form a clean neutral scale.

What is the difference between warm and cool grey?

Cool grey has a blue undertone and feels modern and technical; warm grey (greige) has a beige undertone and feels soft and inviting. Neutral grey has no strong undertone.

Is it spelled grey or gray?

Both are correct — "grey" is the British spelling and "gray" is the American spelling. They refer to the same colour.

Build your own neutral scale. Browse color palettes on PaletteCSS, explore website color palettes, or copy any grey hex in one click.