Color Palette Generator from HEX
Generate tints, shades, complement colors, and copy-ready CSS variables from a single HEX value. Useful for design tokens, dashboards, content pages, and quick UI experiments.
Brand colors
Start with a product, brand, or accent HEX value.
UI experiments
Generate token drafts before checking contrast and applying components.
Example
A green base color can produce lighter tints, darker shades, and a complement swatch.
Assumption
The entered HEX value is the base color for a token draft.
Limitation
The tool does not verify brand fit, contrast compliance, color blindness safety, or final theme balance.
Can I use three-digit HEX?
Yes. Three-digit HEX values are expanded to six digits.
Does it generate CSS variables?
Yes. Copy the generated variables and rename them for your design system.
Should I still check contrast?
Yes. Use Contrast Checker for foreground and background pairs.
Does it upload colors?
No. Everything runs locally.
Suggested workflow
Color design path
Convert the base color, generate a palette, then check accessibility.