CSS Color Generator
Build a tint to shade palette from a single base colour, and get it as ready-to-paste CSS custom properties for your design token naming. Copy and paste ready.
How to use
- Paste the base colour.
- Set how many steps you want and the name prefix.
- Copy the CSS block into your stylesheet.
A CSS color generator turns one base colour into a scale of lighter and darker steps, written as custom properties. That is how most design systems define a palette, so the scale can be reused by name rather than by hand-picked hex values.
CSS
Questions about css color generator
- How many steps should I use?
- Nine covers a full scale from a near-white tint to a deep shade. Fewer is fine for a component that only needs a light and a dark state.
- How do I pick the prefix?
- Match your existing tokens, so the palette slots into the naming you already use.
- Do the steps keep the hue?
- Yes. Hue and saturation stay fixed, and only lightness changes, which keeps the family recognisable.
Related tools
- Color Converter Convert a color between HEX, RGB, HSL, HSV, and CMYK, including an alpha channel, and get...
- CSS Formatter Re-indent CSS so each declaration sits on its own line and nested at-rules are indented, w...
- CSS Minifier Remove comments and redundant whitespace from CSS to shrink the file, keeping strings and...