Color System Generator
Generate a 50–950 tonal scale from one base color and export CSS variables, Tailwind config, or an SCSS map.
A QUICK WALKTHROUGH
How to use this tool
- Choose a base color.
- Select CSS variables, Tailwind, or SCSS output.
- Copy the generated scale.
Fixed interpolation model
The 500 stop is the base color. Stops below 500 linearly interpolate each sRGB channel toward white; stops above 500 linearly interpolate toward black. This is a tonal scale, not perceptual-uniform color interpolation.
Export formats
CSS custom properties, a Tailwind colors extension fragment, or an SCSS map are generated locally. Names and values are deterministic.
Contrast is not guaranteed
The scale does not promise accessible text or UI contrast. Check each color with its real foreground, background, typography, and state.
GOOD TO KNOW
Common questions
Does this use OKLCH?
No. It deliberately uses linear interpolation of 8-bit sRGB channels for predictable output.
Are these colors accessible?
No guarantee is made; evaluate the actual combinations separately.
Is anything uploaded?
No. Generation and copying run in the browser.