About this tool
A good color palette usually starts with a single color – such as your brand color. The generator derives matching companion colors following the classic rules of color theory: complementary, analogous, triadic, split complementary, tetradic or monochromatic. It calculates in the OKLCH color space, which is modelled on human vision – so colors look equally light and equally vivid.
For each color of the palette the tool creates a scale from 50 (almost white) to 950 (almost black), as known from Tailwind CSS, and exports it as CSS variables, SCSS, a Tailwind theme or JSON. Convert single colors to other formats with the Color Converter & Contrast Checker; colors from a photo come from the Colors from Image.
How it works
- Enter a base color, pick it with the color picker or let chance decide.
- Choose a harmony, e.g. triadic for three evenly spaced colors.
- Click a color of the palette to see its shades from 50 to 950.
- Give it a name, choose the export format and copy the code into your project.
Frequently asked questions
Which harmony is good for what?
Complementary creates strong contrast, good for accents and buttons. Analogous feels calm and coherent. Triadic and tetradic are lively and colorful but need a clear main color. Monochromatic stays within one hue and looks particularly elegant.
Why OKLCH instead of HSL?
In HSL, colors with the same lightness look differently bright – yellow glows, blue looks dark. OKLCH is perceptually uniform: equal values mean equal impressions. That is why rotated hues and shades fit together better.
What do the steps 50 to 950 mean?
It is the scale known from Tailwind CSS: 50 is a very light tone for backgrounds, 500 to 600 the strong main color, 900 and 950 very dark tones for text. Your base color is placed exactly on the step whose lightness fits best.
Are the colors accessible?
A palette alone does not guarantee sufficient contrast. Check text and background colors with the contrast checker in the Color Converter & Contrast Checker – WCAG requires at least 4.5 : 1 for normal text.