How to Choose a Neutral and Gray Color Palette

Every palette needs colors that step back. Neutrals — grays, near-whites, muted earth tones — occupy the largest area of most interfaces and printed materials, yet they get picked last and picked carelessly. A gray that looks fine in isolation can clash the moment it sits next to your brand blue or warm orange, because every gray carries an undertone, and that undertone either supports your chromatic colors or fights them. Choosing neutrals deliberately is the difference between a palette that feels coherent and one that feels assembled from parts.

What makes a color “neutral”

A neutral is not the same as a pure gray. In the HSL or OKLCH color model, pure gray has zero saturation — equal parts red, green, and blue. But the grays used in real design almost always carry a small push of hue. That push is called the undertone, and it is what separates a clinical, sterile gray from one that feels warm, cool, or natural.

Three families cover nearly every neutral palette you will encounter:

• Warm grays. A hint of red, orange, or yellow. Sometimes called “greige” (gray + beige) in interior and fashion contexts. They feel approachable and organic.
• Cool grays. A hint of blue or blue-violet. The default in most UI frameworks (Tailwind’s slate, Material’s blue-gray). They feel precise and technical.
• True grays. Zero or near-zero saturation. Rarely used alone because they tend to feel flat and lifeless next to saturated colors, but useful as reference points when building a scale.

The undertone is typically very low in saturation — 2 % to 8 % in HSL — but the human eye is remarkably sensitive to it. A 4 % blue undertone is invisible when you look at a single swatch, yet obviously cool when placed beside a warm beige. This is why you should always evaluate neutrals next to your chromatic palette, never in isolation.

Step 1: pick the undertone from your accent

Start with the chromatic color that dominates your palette — usually a primary brand or accent hue. The undertone of your neutrals should either match or complement that hue:

• Match (safe default). If your accent is a warm orange, use warm grays. The shared warmth makes the whole palette feel intentional. This is what most design systems do.
• Complement (deliberate contrast). A warm accent on cool grays creates visual tension — the accent pops harder because the background pushes the opposite temperature. This works when you want the accent to command attention, but it is easy to overdo.

If you have not settled on an accent yet, cool grays with a blue undertone are the safest default for screens. Blue-tinted grays sit naturally under black text, pair with most hues, and match the slight blue cast of modern displays. Start with a cool base and shift only if your brand direction requires warmth.

Once you know the undertone, take a single mid-tone gray — around lightness 50 in OKLCH — and feed it into the Tint & Shade Generator. The tool builds a full 50–900 scale from one input, keeping the undertone consistent across every step. That scale becomes your neutral system.

Step 2: build the scale and check the gaps

A usable neutral palette is a tint-to-shade scale — a ladder from near-white to near-black with even perceptual spacing. You need at least seven steps to cover common use cases:

• 50–100: page backgrounds, card surfaces, subtle hover states
• 200–300: borders, dividers, disabled text
• 400–500: placeholder text, secondary icons
• 600–700: body text on light backgrounds, active icons
• 800–900: headings, high-emphasis text

After generating the scale, check two things. First, even spacing: if the jump from 100 to 200 is barely noticeable but the jump from 400 to 500 is dramatic, the scale will feel unbalanced. Perceptually uniform models like OKLCH handle this better than HSL — the Color Code Converter can show you lightness values in both systems so you can spot unevenness. Second, contrast: steps 600 and above should pass WCAG AA (4.5:1) against your lightest background, and steps 200 and below should pass against your darkest surface. Run the pairs through the Contrast Checker before committing.

Step 3: add a dark-mode counterpart

If your product has a dark mode, you do not simply invert the scale. The background becomes step 900 or a custom near-black, and surfaces use 800 and 700 to communicate elevation — each layer slightly lighter than the one beneath it. Foreground text flips to steps 100–200. But the undertone stays the same: if your light-mode grays are warm, your dark-mode grays should be warm too. Mixing undertones across themes makes the switch feel jarring instead of seamless.

Generate a second scale from the same seed color in the Tint & Shade Generator, but this time note which steps you will use as backgrounds (800–900) and which as foreground (50–200). Verify contrast in both directions. Dark backgrounds are unforgiving — a gray that barely passed 4.5:1 on white often fails on #121212.

Step 4: proportion neutrals against accents

Neutrals should dominate the canvas. The 60-30-10 rule is a useful starting point: 60 % neutral, 30 % secondary (often a tinted neutral or a muted variant), 10 % accent. In practice, UI-heavy products push neutrals even higher — 70 % or more — because every button, card, and input field needs a restful background that does not compete with the content.

A common mistake is reaching for a mid-range gray (400–500) as a large background. Those middle steps are intended for small elements — icons, captions, borders. They carry enough contrast to read as “a color” rather than “space,” which makes them tiring at scale. Backgrounds should come from the extremes of the scale: 50–100 in light mode, 800–900 in dark mode. Reserve mid-tones for the elements that need to recede but still be visible.

Pairing neutrals with your harmonic palette

Neutrals are not a standalone system — they interact with every chromatic color you use. A few rules keep the relationship clean:

• Test primary-on-neutral and neutral-on-primary. Your brand blue on a warm gray card, and a warm gray label on a blue button. Both must pass contrast. Both must look intentional, not like a rendering error. The Contrast Checker handles the math; your eyes handle the “does this look right” question.
• Avoid mixing undertones within the same view. If your card backgrounds use warm grays, do not use a cool gray for the page behind them. The temperature conflict creates a dirty, muddy feeling that is hard to diagnose because each swatch looks fine alone.
• Let the neutral scale carry your color harmony. In a triadic or split-complementary palette, the three chromatic colors get the 10 % accent budget. The neutrals provide the other 90 %. If the neutrals are doing their job — cohesive undertone, correct contrast, clean spacing — the chromatic colors are free to be bold without the design feeling chaotic.

Three mistakes that ruin neutral palettes

1. Picking grays from a color picker instead of generating a scale. Eyeballing hex codes produces steps with inconsistent undertones and uneven lightness gaps. Two steps might look almost identical while the next jump is enormous. Always build from a single seed — the Tint & Shade Generator ensures every step shares the undertone and the perceptual distance is regular.

2. Ignoring undertone shift across the scale. In HSL, adding white to a warm gray pushes it pinker; adding black pushes it muddier. By step 900, your original warm undertone can look dirty brown instead of charcoal. OKLCH preserves hue more faithfully across lightness changes, which is why modern tools use it. When you convert your scale to hex with the Color Code Converter, compare the undertone at 100 and 900 visually — they should still read as the same family.

3. Using pure black #000000 and pure white #FFFFFF as endpoints. Pure black on a screen is not “darker neutral” — it is the absence of light, and it creates harsh contrast with any gray step adjacent to it. Most design systems cap their scale at around #111 or #1A1A1A for darkest and #FAFAFA for lightest. The slight offset from absolute extremes keeps the transitions smooth and reduces eye strain.

Choosing the right neutral for your project

There is no single correct gray. The right choice depends on context:

• Marketing and editorial sites: warm grays. They invite browsing, feel premium, and flatter photography.
• Dashboards and data products: cool grays. They recede behind charts and tables, and feel professional.
• Developer tools and code editors: true grays or very desaturated cool grays. Maximum neutrality so syntax highlighting does all the color work.
• E-commerce: match the undertone to your product photography. If you sell natural materials (wood, leather, linen), warm grays; if you sell electronics, cool grays.

Once you have chosen, commit. A neutral scale is a design decision, not a suggestion — use it for every gray in the product, from backgrounds to borders to placeholder text. The moment you introduce a second gray family (a cool divider on a warm card, a random #808080 from a library default), the palette starts looking unintended.

Exporting and maintaining the scale

After generating your neutral scale in the Tint & Shade Generator, export it as CSS custom properties: --neutral-50 through --neutral-900. This naming convention matches Tailwind, Material, and most token systems, so the scale drops into any framework without translation. For dark mode, create a second set or remap the same tokens — --surface: var(--neutral-900) in dark, --surface: var(--neutral-50) in light.

Revisit the scale when your brand color changes. A new accent hue might demand a new undertone, and a scale that harmonized with the old brand blue can clash with a new teal or coral. The rebuild is fast — drop the new seed into the generator, verify contrast, update the tokens — but skipping it leaves a subtle misfit that accumulates across every screen.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.