Skip to content
ColorPlum

Palettes · theme palettes

Gray color palettes: hex codes for neutral, warm and cool grays

Five gray palettes with hex codes: a neutral scale from #F5F5F5 to #262626, warm grays, cool grays, gray with an amber accent (#FFB300) and concrete. Contrast ratios for readable pairs are listed, with copy and PNG export.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

Neutral gray scale

  1. #F5F5F5Gray 50
  2. #D4D4D4Gray 300
  3. #A3A3A3Gray 400
  4. #525252Gray 600
  5. #262626Gray 800
  • #F5F5F5Gray 50
  • #D4D4D4Gray 300
  • #A3A3A3Gray 400
  • #525252Gray 600
  • #262626Gray 800

Preview

Neutral gray scale

Body text in gray 800 on gray 50, with gray 300 as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Gray 800 on Gray 50 13.88:1; Gray 800 on Gray 300 10.20:1; Gray 600 on Gray 50 7.16:1; Gray 800 on Gray 400 5.99:1

Warm grays

  1. #F5F2EEGreige white
  2. #D6CFC7Mushroom
  3. #A8A097Taupe gray
  4. #6F6860Warm slate
  5. #3D3935Espresso gray
  • #F5F2EEGreige white
  • #D6CFC7Mushroom
  • #A8A097Taupe gray
  • #6F6860Warm slate
  • #3D3935Espresso gray

Preview

Warm grays

Body text in espresso gray on greige white, with taupe gray as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Espresso gray on Greige white 10.25:1; Espresso gray on Mushroom 7.41:1; Warm slate on Greige white 4.91:1

Cool grays

  1. #F1F4F8Frost
  2. #CFD6DFCloud
  3. #9AA5B4Steel
  4. #5B6676Slate
  5. #2B323CGraphite
  • #F1F4F8Frost
  • #CFD6DFCloud
  • #9AA5B4Steel
  • #5B6676Slate
  • #2B323CGraphite

Preview

Cool grays

Body text in graphite on frost, with slate as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Graphite on Frost 11.72:1; Graphite on Cloud 8.82:1; Slate on Frost 5.27:1; Graphite on Steel 5.18:1

Gray with an accent

  1. #EEEEEELight
  2. #9E9E9EMid
  3. #424242Dark
  4. #FFB300Amber accent
  5. #212121Ink
  • #EEEEEELight
  • #9E9E9EMid
  • #424242Dark
  • #FFB300Amber accent
  • #212121Ink

Preview

Gray with an accent

Body text in ink on light, with amber accent as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Ink on Light 13.87:1; Ink on Amber accent 8.97:1; Dark on Light 8.66:1; Ink on Mid 6.01:1

Concrete

  1. #DEDBD6Raw
  2. #BDB8B1Cast
  3. #8E8A84Aggregate
  4. #5F5C58Wet
  5. #C96D3CCorten
  • #DEDBD6Raw
  • #BDB8B1Cast
  • #8E8A84Aggregate
  • #5F5C58Wet
  • #C96D3CCorten

Preview

Concrete

Body text in wet on raw, with corten as the accent.

Button

Readable text pairs (WCAG AA, 4.5:1 or more): Wet on Raw 4.81:1

Every palette here in 3D color space

Lightness runs up the pole and hue goes around it, so palettes that share a mood sit in the same region. Drag to turn it.

The 25 colors on this page in OKLab
  • Gray 50
  • Gray 300
  • Gray 400
  • Gray 600
  • Gray 800
  • Greige white
  • Mushroom
  • Taupe gray
  • Warm slate
  • Espresso gray
  • Frost
  • Cloud
  • Steel
  • Slate
  • Graphite
  • Light
  • Mid
  • Dark
  • Amber accent
  • Ink
  • Raw
  • Cast
  • Aggregate
  • Wet
  • Corten
On this page

Gray looks like the easy choice, and then you place two grays side by side and one looks greenish while the other looks pink. The reason is undertone: a gray with slightly more red and yellow feels warm, one with more blue feels cool, and a true neutral has equal parts. The palettes below separate these families.

The five palettes

  • Neutral gray scale runs gray 50 (#F5F5F5), gray 300 (#D4D4D4), gray 400 (#A3A3A3), gray 600 (#525252) and gray 800 (#262626). It is the one for user interfaces.
  • Warm grays begin at greige white (#F5F2EE) and mushroom, then taupe gray (#A8A097), warm slate and espresso gray (#3D3935). Good for living rooms and soft branding.
  • Cool grays use frost (#F1F4F8), cloud, steel, slate and graphite (#2B323C). They suit tech and medical designs.
  • Gray with an accent keeps three grays (#EEEEEE, #9E9E9E, #424242), adds ink (#212121) and a single amber (#FFB300) for the thing that matters.
  • Concrete is raw, cast, aggregate and wet gray with a rusty corten orange (#C96D3C), as in poured floors and industrial lofts.

Contrast across a gray scale

Gray is useful because you can predict readability from the steps. In the neutral scale, gray 800 on gray 50 measures 13.88:1, gray 800 on gray 300 reaches 10.20:1, and gray 600 on gray 50 gets 7.16:1. Even gray 800 on the midtone gray 400 clears 4.5:1 at 5.99:1. In warm grays, warm slate on greige white is 4.91:1, just over the line, so keep it for larger text. In cool grays, slate on frost is 5.27:1 and graphite on steel 5.18:1. Concrete is tight: wet on raw is 4.81:1, and corten is decoration only.

Worked example

You are drawing up a small dashboard for a bakery's weekly orders. Use gray with an accent. Set the page in light (#EEEEEE), card titles and numbers in ink (#212121), which gives 13.87:1, and table gridlines in mid (#9E9E9E). Use dark (#424242) for secondary labels at 8.66:1. Then give the amber (#FFB300) to a single item, the "Orders to pack today" count, and keep ink text on it at 8.97:1. Because everything else is gray, the eye goes straight to the one amber number. Press Copy CSS to get the five colors as variables for your stylesheet.

The charcoal gray page shows one dark gray in depth, the shade and tint generator builds your own ramp, and silver covers metallic grays.

Sources

  1. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org
  2. W3C, CSS Color Module Level 4: hex colors and color conversions (checked 2026-11-10) w3.org