Neutral Grays

Neutral Scale

A balanced neutral scale with a warm or cool cast, ready for UI hierarchy.

Why neutral

Neutrals carry ~80% of a UI; one clean scale is the key to a professional look.

Warm feels friendly, cool feels rational; pick one cast per system.

Split any color evenly by lightness into a light-to-dark ramp; export CSS variables.

One brand color in, get primary/secondary/accent/semantic plus a neutral scale.

Enter a base color and get a full 50–950 shade scale for design systems.

📘

Neutral scale builds a balanced warm/cool neutral gray ramp you can reuse as CSS variables.

Choose a warm or cool lean and the tool builds a stable 50–950 neutral ramp.
Copy HEX or export CSS variables.
Perfect for backgrounds, borders, dividers and text layers without inconsistent casts.

💡