I’ve pushed a whole load of changes to my free colour palette generator! I’m using this tool regularly to test colour palettes as we go through a rebrand, and added features to help me with it.
Color Palette Toolkit is a small set of tools for working with colour in CSS and Tailwind: generate a 50–950 palette from a single swatch, mix two OKLCH stops into a gradient, or paste CSS and leave with utilities.
Palettes is the main one. You pick a color in hex or OKLCH and get a full ramp. The input isn’t just “shade 500” — you pin it to any stop and the rest of the scale bends around it, so that tile stays exact. Lightness, chroma, and hue follow tunable curves instead of a naive mix. Defaults are fitted to Tailwind v4’s own ramps; Soft, Vivid, Neutral, and Flat are one-click starting points if you want something airier or punchier.
One colour in, a whole colour chart out.
“One colour in, a whole colour chart out.”
You can blend a second color as another anchor, lock individual stops so they survive regeneration, and copy output as a Tailwind v4 @theme block, CSS variables, or a plain token map (handy for Mantine or Style Dictionary). Out-of-gamut stops have chroma pulled back to sRGB or Display P3 instead of clipping RGB, so hex and OKLCH stay in agreement. Contrast labels sit on the swatches; a live layout preview shows the ramp on real UI.
Convert takes declarations, a rule block, or an inline style and maps it to Tailwind classes — including borders, gradients, shadows, and arbitrary values when there’s no exact match. Gradient is two OKLCH stops, an angle dial, and copy-ready CSS plus a Tailwind class, with a few suggested pairings.
What’s new
The scale engine is the big change. Advanced mode now exposes the whole trajectory: light and dark endpoints, curve shape, saturation, chroma peak and falloff, hue drift at each end, plus a chart of the L / C / H curves. Pinning and auto-place by lightness are first-class, so a mid-tone on 700 compresses the lights and stretches the darks instead of just shifting a list.
There’s also a visual refresh — serif titles, a quieter header, and a denser palette workspace — plus token export, contrast on the ramp, and a stack bump to React 19 and Tailwind v4.
