Color Palette Generator
Generate color palettes from any hex color. Create Tailwind-style shades (50–950) or color harmonies like complementary, analogous, and triadic. Export as CSS variables, Tailwind config, or SCSS variables.
#6366F1
hsl(239°, 84%, 67%) · rgb(99,102,241)
50
#f6f6f8
100
#ececf4
200
#d0d0ec
300
#9e9fe6
400
#595ce8
500
#191deb
600
#0d10ca
700
#0a0c9e
800
#0c0e6e
900
#0c0d46
950
#090a2a
:root {
--color-primary-50: #f6f6f8;
--color-primary-100: #ececf4;
--color-primary-200: #d0d0ec;
--color-primary-300: #9e9fe6;
--color-primary-400: #595ce8;
--color-primary-500: #191deb;
--color-primary-600: #0d10ca;
--color-primary-700: #0a0c9e;
--color-primary-800: #0c0e6e;
--color-primary-900: #0c0d46;
--color-primary-950: #090a2a;
}Features
Tailwind-style shades
11-step scale (50–950) with per-shade saturation adjustments for natural results
6 harmony modes
Complementary, analogous, triadic, split-complementary, tetradic, monochromatic
CSS variables export
Output as :root { --color-name-shade: #hex; } ready to paste
Tailwind config
Export as a tailwind.config.js colors object for instant integration
SCSS variables
Output as $name-shade: #hex; SCSS variable declarations
One-click copy
Click any swatch or use the quick-copy row to grab individual hex values
How to use
- 1
Pick a base color
Click the color swatch or type a hex code to set your starting color.
- 2
Choose palette mode
Select Shades for a full 50–950 scale, or pick a harmony like Analogous or Triadic.
- 3
Copy swatches
Click any color swatch to copy its hex. Use the quick-copy strip below for fast access.
- 4
Export
Enter a palette name, choose CSS / Tailwind / SCSS format, and click Copy to get the export code.
Frequently asked questions
Can I generate a palette from a brand color?
Yes. Enter your exact brand hex color and use Shades mode to generate all 11 variants. The tool adjusts saturation per shade so lighter tones don't look washed out and darker tones don't lose vibrancy.
What is HSL and why does this tool use it?
HSL stands for Hue, Saturation, Lightness. It is easier to manipulate perceptually than RGB because you can change lightness without affecting hue. This tool converts hex to HSL internally, adjusts the lightness (and sometimes saturation) for each shade, then converts back to hex.
Why does my exported Tailwind config have single-quoted color names?
Tailwind color names that include numbers (like "500") need to be quoted in JavaScript objects. The generated output uses valid JavaScript syntax that works with any Tailwind v3 or v4 config.
Can I use the CSS variables with Tailwind?
Yes. In Tailwind v4, you can reference CSS custom properties in your theme. In Tailwind v3, you can add them via the extend.colors object using a function that returns var(--color-name-shade). The Tailwind export is the easiest path for v3.