Color tools
Color Palette Generator: Harmonies, Shades and Random Palettes
Free, no sign-up, works in your browser. Generate colour palettes at the press of a key, lock the colours you like, or build one from a base colour with analogous, complementary or triadic harmonies. Export as CSS variables, Tailwind or JSON.
or press Space. Lock the colours you like to keep them.
Build from a colour
Colour harmonies turn the hue around the colour wheel: analogous stays close, complementary uses the opposite side, triadic spaces three hues evenly.
Shades of #2F5BFF
Click a shade to copy it. Pick another colour in the palette to see its shades.
Export
Palettes are made on your device.
How to use the Color Palette Generator
- Press Generate (or the space bar) until you like a palette.
- Lock colours to keep them, or build from a base colour and harmony.
- Copy single colours or export the whole palette.
Frequently asked questions
- What are colour harmonies?
- Sets of colours chosen by their position on the colour wheel: analogous colours sit side by side, complementary colours face each other, and triadic colours are spaced evenly.
- What are shades and tints?
- Darker and lighter versions of one colour. The shade scale gives eleven steps from 50 (lightest) to 950 (darkest), like design systems use.
- How do I use the palette in my code?
- Export it as CSS variables, a Tailwind theme, JSON or a plain list of HEX codes.
- Is anything uploaded?
- No. Palettes are made on your device.
- Is the Color Palette Generator free?
- Yes. It's free to use, with no sign-up and nothing to install.
Related tools
- Color Palette from ImageUpload a photo, logo or screenshot to get its main colours as HEX codes, with how much of the image each one covers. Click anywhere on the image to pick an exact colour.
- Color Contrast CheckerCheck whether text is readable on its background with the WCAG contrast ratio, see AA and AAA results for normal text, large text and controls, and get the closest colour that passes.
- CSS Gradient GeneratorDesign a linear, radial or conic gradient with as many colour stops as you like, see it live, and copy the CSS. Download it as a PNG background in common sizes.
- HEX to RGB Color ConverterConvert a colour between HEX, RGB, HSL, HSV and CMYK in one step, including transparency. Paste a code in any format or pick a colour, then copy the format you need and check its text contrast.