ToolStack

CSS Color Generator

Turn a base color into a 10-step shade scale and export it as CSS variables.

100% private — everything runs in your browser

Advertisement

How to Use

  1. 1

    Enter a base color or pick one visually.

  2. 2

    A 10-step scale from 50 (lightest) to 900 (darkest) is generated instantly.

  3. 3

    Click any swatch to copy that individual hex value.

  4. 4

    Copy the whole block of CSS custom properties for your project.

Examples

Scale from #3B82F6

Input

#3B82F6

Output

--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445

Ready for CSS

Input

Paste the copied block

Output

:root { --color-500: #3B82F6; … }

FAQ

How is the scale generated?

Steps 50–400 are blended towards white (tints), 600–900 towards black (shades) and 500 keeps your base color unchanged.

How do I use the variables?

Paste the block at the top of a stylesheet, then reference any step with var(--color-500) in your CSS.

Is my color sent to a server?

No — the scale is generated locally in your browser.

Related Tools

Gradient GeneratorCreate CSS linear and radial gradients visually and copy the CSS code.Color PickerPick any color and copy its HEX, RGB, HSL and HSV values instantly.Contrast CheckerCheck the WCAG contrast ratio between text and background colors instantly.HEX to RGBConvert HEX color codes to RGB values instantly — free and private.RGB to HEXConvert RGB values to a HEX color code instantly — free and private.Color ConverterConvert between HEX, RGB, HSL, HSV and HWB color formats in any direction.