Palette Generator
Build harmonious color palettes — complementary, analogous, triadic — plus a full Tailwind-style 50–950 shade scale.
About the Palette Generator
Palette Generator turns one base color into a coordinated set you can actually ship. Pick a starting hex, choose a harmony rule, and it returns both a small harmony group and a full 11-step shade scale numbered 50 through 950, the same stops Tailwind uses. It solves the gap between picking a color you like and having every tint, shade, and matching accent a real interface needs.
You set the base color two ways: type a hex value into the text field or use the native color picker swatch next to it. The tool loads chroma-js in the browser, reads your color in HSL, and rotates the hue to build each harmony. Analogous shifts by -30, 0, and +30 degrees; triadic uses 0, 120, 240; tetradic adds 90 and 270; complementary flips 180. Monochromatic instead keeps the hue and varies saturation and lightness.
The shade scale is built by interpolating from white through your base to black in OKLCH space, then forcing stop 500 to equal your exact base color. Every color is free to use, needs no account, and never leaves your machine. Nothing is uploaded and no palette is stored on a server. Click any swatch to copy its hex, or use the button to copy all 11 shades as CSS custom properties.
How to use the Palette Generator
- 1Type a hex value into the Base color field, or click the swatch beside it to pick visually.
- 2Choose one of the six Harmony buttons: complementary, analogous, triadic, tetradic, split-complementary, or monochromatic.
- 3Read the harmony group at the top; it updates instantly when you change the base or the rule.
- 4Click any harmony swatch or any Tailwind-style shade to copy its uppercase hex to your clipboard.
- 5Click Copy as CSS variables to grab all 11 shades as a :root block of --c-50 through --c-950.
What you can use it for
Seeding a Tailwind theme
You have a brand color but need the full 50 to 950 range for your config. Paste the hex, copy the CSS variables, and map each --c-stop into your theme so buttons, borders, and hover states share a ramp.
Choosing an accent pair
You need a second color that reads as intentional next to your primary. Switch between complementary and split-complementary, compare the swatches, and copy the hex that sits best against your base.
Single-hue UI surfaces
For a calm, one-color panel you want tints and shades on the same hue. Pick monochromatic and you get five steps that hold the hue steady while shifting saturation and lightness.
Quick mockup fills
While sketching a layout you want three or four colors that already agree. Choose triadic or tetradic, then click each swatch to copy it into your file.
Why the shades are built in OKLCH
The color space you blend in decides what the middle looks like. Mixing from white to a saturated blue to black in plain sRGB tends to produce muddy, uneven middles: some steps look nearly identical while others jump. That happens because sRGB values are not spaced to match how your eye reads lightness, so equal numeric steps are not equal visual ones.
This tool interpolates in OKLCH instead. OKLCH splits a color into lightness, chroma, and hue on axes tuned to human perception, so even increments produce even-looking steps. That is why the 50 to 950 ramp reads as a smooth progression rather than one that clumps or skips.
Frequently asked questions
Does my color data get uploaded anywhere?
No. The tool runs in your browser using chroma-js, which loads client-side. Your base color, harmony group, and shade scale are computed locally and copied through your clipboard. Nothing is sent to a server and no palette is saved after you close the tab.
Why is stop 500 exactly my base color but the others are not?
The scale interpolates from white through your base to black across 11 steps, then overwrites the middle step so 500 matches your input hex precisely. The other ten stops are interpolated points, so 400 or 600 are near neighbors, not hand-picked values.
What color formats can I paste into the base field?
Anything chroma-js accepts as valid, including hex codes and CSS color names. If the value is not recognized you see a Not a valid color message and no palette. The native color picker only syncs when your text is a 7-character hex like #3b82f6.
Why does monochromatic show five colors instead of a harmony group?
Monochromatic keeps a single hue, so there is no second hue to display. Instead the tool builds five steps around your base by adjusting saturation and lightness, giving tints and shades of the same color.
What does the Copy as CSS variables button output?
A :root rule containing all 11 shades as custom properties named --c-50 through --c-950, each set to its hex value. Paste it into a stylesheet and reference the stops with var(--c-500).