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.
Try a common palette base
Tint 80
#CFF1E6
Tint 60
#9FE3CD
Tint 35
#64D2AD
Base
#10B981
Shade 25
#0C8B61
Shade 45
#096647
Complement
#EF467E
Soft complement
#F699B8
--color-1: #CFF1E6;
--color-2: #9FE3CD;
--color-3: #64D2AD;
--color-4: #10B981;
--color-5: #0C8B61;
--color-6: #096647;
--color-7: #EF467E;
--color-8: #F699B8;Generated palettes are starting points. Check contrast, brand constraints, dark mode, and disabled states before using them in production UI.
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.
How are colors processed?
Palette generation is handled in the browser for this tool based on the current public implementation.
Suggested workflow
Color design path
Convert the base color, generate a palette, then check accessibility.