How to use this tool
- Enter a base color in HEX format.
- Choose output format (CSS variables, hex map) and copy options.
- Copy the generated palette for use in CSS, Tailwind config, or design tokens.
About Palette Generator
This utility helps you build color scales from a single base color, useful when defining design tokens or migrating brand colors into a structured palette. Output is deterministic: the same base color always produces the same shades and tints.
Common use cases
- Generating Tailwind-style color scales for a custom theme
- Creating CSS custom property palettes for component libraries
- Exporting hex values for design handoff or style guides
FAQ
- What does this palette generator do?
- It takes a base HEX color and produces a full scale of lighter tints and darker shades, with 500 as the base. Output includes HEX values and CSS variable declarations suitable for design systems.
- Does this tool send my colors to a server?
- No, all processing happens in your browser. Your base color and generated palette never leave your device.
- Can I use shorthand HEX values like #fff?
- No, only full six-digit HEX format (#RRGGBB) is supported. Use a color converter first if you have shorthand or other formats.
- Why does my palette look different from Tailwind's default colors?
- This tool uses a simple HSL-based interpolation. Tailwind and other frameworks may use different algorithms or hand-tuned values, so results can vary slightly.