Color Palette Generator

About this tool

Enter a base color in any format, or pick one, and the tool builds an 11-step scale from 50 (lightest) to 950 (darkest) like those in Tailwind CSS. It works in OKLCH, a color space where equal changes in lightness look equal, so the steps are evenly spaced to the eye while keeping the hue of your color; chroma is trimmed at the very light and dark ends and reduced where a color would fall outside what screens can show. The step closest in lightness to your color is your exact color, marked with a dot. Below the scale are color harmonies made by rotating the hue: complementary, analogous, triadic, split-complementary and two tetradic schemes, with the same lightness and as much of the chroma as fits. Each swatch shows black or white text, whichever has more contrast, and clicking a swatch copies its hex code. The scale exports as CSS variables, a Tailwind colors object, an SCSS map or JSON. Grey bases have no hue, so their harmonies are all the same color, and the tool says so. Everything runs in your browser.

How to use it

1. Type or pick a base color, or press Random.
2. Look at the scale: your exact color is marked with a dot.
3. Choose a harmony row to see matching colors.
4. Name the palette, pick CSS, Tailwind, SCSS or JSON, and press Copy.

Common problems

My color is not exactly at step 500

The scale puts your exact color at the step closest to its lightness. A pale color lands near 100 and a dark one near 800.

The complementary color looks dull

Some hues cannot be as vivid at the same lightness on a screen, so chroma is reduced until the color fits. Try a different base lightness.

The text on a swatch is black on a mid-tone color

Black or white is chosen by the higher WCAG contrast. Mid-blues often have more contrast with black than with white.