How to use the Color Palette Generator
- 1. Pick a base colourUse the picker, type a hex, rgb() or hsl() value, or try a random one.
- 2. Choose a harmonyComplementary, analogous, triadic, split complementary, tetradic or monochromatic.
- 3. Get the codeCopy CSS custom properties or a Tailwind colour scale, or download the CSS.
How the palettes are built
Colour harmonies come from positions on the colour wheel. The tool converts your colour to HSL (hue, saturation, lightness) and rotates the hue: 180° for complementary, ±15° and ±30° for analogous, 120° steps for triadic, 150° and 210° for split complementary, 90° steps for tetradic. Saturation and lightness stay the same, so the colours feel related. Monochromatic keeps the hue and changes lightness instead. Everything runs in your browser; nothing you type or choose is uploaded.
The shade scale gives you tints and shades for backgrounds, borders and hover states. Steps 50 to 400 mix your colour with white (95% down to 30%), 500 is your colour, and 600 to 950 mix it with black (15% up to 75%). Each swatch also shows whether white or black text reads better on it, with the WCAG contrast ratio.
Worked example
With the default base #ff5421 and Complementary, the palette is #ff5421 and #21ccff, an orange and a sky blue opposite each other on the wheel. The shade scale runs from #fff6f4 (50) through #ff8764 (400) and #ff5421 (500) to #66220d (900) and #401508 (950). Black text reads better on the base colour, at 6.54:1.
Using the colours well
- A common split is 60% neutral, 30% primary and 10% accent.
- Check text on every colour with the contrast column or our colour contrast checker.
- Don't use colour alone to carry meaning, such as red and green for errors and success; add icons or words.
Frequently asked questions
Can I use the shade scale in Tailwind?
Yes. Paste the generated object into theme.extend.colors in tailwind.config.js and use classes like bg-brand-500.
Why do some harmony colours look harsh?
Very saturated bases give saturated partners. Use the 100–300 shades of a partner colour for large areas.
Is the colour palette generator free?
Yes. You can open the colour palette generator and fill in every option without signing up. When you get the palette for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.