ToolwebHow to use this tool
- Enter an opaque base color or choose one with the picker.
- Choose a scheme and a count of 3–12 colors.
- Click a swatch to copy it, or save the result file or CSS palette.
Create seven lightness steps
- Input and settings
- #4F46E5; tonal scale; 7 colors
- Result
- Seven HEX candidates sharing HSL hue/saturation, plus CSS variables
The middle step is not guaranteed to equal the input; the defined lightness range is divided evenly.
How the schemes are constructed
The tonal scale keeps hue and saturation while dividing HSL lightness between 8% and 92%. Analogous colors shift around the base hue. Complementary colors alternate opposing hue directions and also vary lightness.
Triadic candidates use three hue directions separated by 120 degrees. Monochromatic candidates vary saturation and lightness at one hue. With a zero-saturation grayscale base, changing hue alone can produce duplicate colors.
Export candidates, then evaluate real usage
The CSS export creates custom properties beginning with --palette-1. Rename them to meaningful role-based names in your project and separately select which colors will be paired as text and backgrounds.
Equal steps in HSL lightness are not guaranteed to appear equally bright to people. This generator supplies candidates, not a guarantee of brand fit or legibility. Check important pairs with the contrast tool and in the real interface.
Common questions
What does clicking a swatch copy?
It copies that swatch’s HEX value including the #. Use Copy all results or file export for the full palette.
Why must the base be opaque?
A transparent color’s appearance depends on its background. Decide on the intended composited appearance, then choose an opaque base color.