Color Palette Generator
Pick a base color and instantly generate a smooth light-to-dark palette of shades, ready to copy into your design system.
🔒 Processed locally in your browser
Loading…
How to use
- Type a hex color code into the "Base Color" field, or click the color swatch picker to choose one visually.
- As soon as a valid color is recognized, a full palette of shades appears below it automatically — there's no button to press.
- The palette ranges from a very light tint down to a very dark shade, all sharing the same hue as your base color.
- Click any swatch to copy its hex code to your clipboard — a brief "Copied!" confirmation lets you know it worked.
Features
- Generates a smooth 9-step light-to-dark shade scale from any base color
- Keeps the same hue and saturation across every shade, just like Tailwind's own color scales
- Includes your exact base color in the palette, not just an approximation
- One-click copy for any swatch's hex code
- 100% client-side — your colors never leave your browser
Frequently asked questions
Does this tool send my color anywhere?
No. The whole palette is generated with simple JavaScript math directly in your browser — nothing is ever uploaded or sent to a server.
How are the shades calculated?
The tool converts your base color to HSL, then keeps the hue and saturation fixed while stepping the lightness evenly from very light down to very dark. Your exact base color is placed in the middle of the scale.
Can I use these palettes in Tailwind or other design systems?
Yes. The palette follows the same idea as Tailwind's 50/100/.../900 color scales — a light-to-dark ramp of one hue — so you can copy the hex codes straight into your own theme or CSS variables.
What color formats can I enter?
Hex codes only, with or without a leading #, either 3-digit shorthand (like #abc) or 6-digit (like #3b82f6). Use the color picker if you'd rather choose visually.
Why do I see an error message?
The text you typed doesn't match a recognizable hex color format. Make sure it looks like #3b82f6 (or 3b82f6, or the shorthand #abc).