About Color scale generator
Any color → 50–950 scale with CSS and Tailwind export
How to use
Turn one base color into a full 50 to 950 scale with ready-to-paste CSS and Tailwind output.
Color scale generator
Why a 50–950 scale
A scale gives one hue enough steps for surfaces, borders, text and states. Step 50 is the lightest tint, 950 the deepest shade, and 500 usually carries the brand color.
Even steps make a design system easier to reason about: the jump between neighbouring values stays predictable on every screen.
How the steps are built
Each step targets a lightness in OKLCH, so the ramp stays perceptually even instead of collapsing in the shadows. Chroma is reduced near both ends to keep tints clean and shades rich.
Frequently asked questions
Why is step 500 not exactly my color?
500 sits in the middle of the scale and is the safest default for buttons and links. Your input color may be lighter or darker, so it can land on a nearby step.
Can I use the exported CSS directly?
Yes. The CSS block defines --brand-50 through --brand-950. Rename the prefix to match your design system before pasting.
Does this work for grey colors?
Yes. Low-chroma colors produce a neutral ramp with almost no hue shift, which is useful for text, borders and disabled states.