What is the difference between warm and cool neutrals?

Warm neutrals have a subtle red, orange, or golden hue shift — they feel cozy and natural. Cool neutrals lean toward blue or green tones and feel modern and clinical. Both are low-saturation, so they still read as "gray" but carry an underlying temperature.

How are the 10 steps calculated?

The tool distributes lightness evenly from ~97% (step 50) down to ~8% (step 900) while keeping your chosen hue and saturation fixed. This mirrors how popular design systems like Tailwind CSS and Radix UI construct their neutral scales.

What does the Saturation slider control?

It sets how much color bleeds into the neutrals. At 0% you get pure grays; at higher values the warm or cool tint becomes more visible. For most UI use cases, 4–12% works well.

Can I use the exported CSS variables directly in my project?

Yes. The CSS export wraps all 10 steps in a :root block as --neutral-50 through --neutral-900, compatible with any modern browser or CSS-in-JS setup.

What does the Tailwind export produce?

It generates a JavaScript object in the shape Tailwind expects inside tailwind.config.js — just paste it into your theme.colors or theme.extend.colors block.

Neutral Color Palette Builder

Pick a base hue, choose warm or cool bias, and instantly get a 10-step neutral tint-to-shade scale with hex codes and CSS export.

Scale Settings

Base Hue

Temperature Bias

Warm adds golden/red; Cool adds blue/green tint.

Saturation — 8%

0% (gray)30% (vivid)

10-Step Neutral Scale

Warm Neutral

Copied!

Summary

The Neutral Color Palette Builder generates professional 10-step tint-to-shade scales with a warm or cool temperature bias. Pick any base hue, adjust saturation, and toggle between warm (slightly golden/red) and cool (slightly blue/green) neutral profiles. Each step is labeled 50 through 900 in the style of Tailwind CSS design tokens, making it easy to drop into any design system or component library.

How it works

Choose a base color using the color picker or by typing a hex value.
Select the temperature bias — Warm adds a golden/red tint; Cool adds a blue/green tint.
Adjust the saturation slider to control how chromatic or gray the neutrals appear.
The 10-step scale (50 to 900) updates live from lightest tint to darkest shade.
Click any swatch to copy its hex code to your clipboard.
Use the CSS or Tailwind export buttons to grab the full scale as design tokens.

Use cases

Build a custom gray scale that harmonizes with your brand primary color.
Generate warm neutrals for earthy, cozy, or wooden design themes.
Create cool neutrals for tech, medical, or minimalist UI palettes.
Produce Tailwind-compatible color tokens for a design system.
Pair a neutral scale with an accent color for a cohesive landing page.
Test how warm vs. cool backgrounds affect readability and mood.
Export CSS variables for rapid prototyping in any framework.
Replace generic grays with on-brand neutrals in Figma or Sketch.

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu