Color Palette Generator
Start from one colour and get harmonious palettes — complementary, analogous, triadic, shades, tints — as CSS variables, JSON or PNG.
How to Use Color Palette Generator in 3 Steps
Enter a base colour
Type any CSS colour — hex, rgb(), hsl(), oklch() or a name — or use the picker. The palette appears immediately.
Choose a harmony
Analogous, complementary, split-complementary, triadic and tetradic rotate the hue; shades, tints and tones step lightness or saturation. “Colours” in Settings sets how many steps you get.
Copy or export
Click any swatch to copy that one colour, copy the whole block as CSS custom properties, or download CSS, JSON or a PNG strip.
Color Palette Generator — Frequently Asked Questions
How are the harmonies calculated?
In HSL hue space: complementary is +180°, split-complementary ±150°, triadic ±120°, tetradic every 90°, analogous in 30° steps around the base. Shades move lightness towards black, tints towards white, tones reduce saturation. Hue-based harmonies are a starting point — always check contrast for text.
Why does “Colours” not change the complementary palette?
Complementary, split, triadic and tetradic have a fixed number of members by definition (2, 3, 3, 4). The count applies to analogous, shades, tints and tones.
Can I use these as Tailwind or design tokens?
Download the JSON for tokens, or copy the CSS variables and drop them in :root. The prefix is configurable, e.g. --brand gives --brand-1 … --brand-5.
Is the PNG useful for anything?
It is a horizontal strip with each colour and its code — handy for pasting into a brief, a Figma frame or a chat.
Is my input sent anywhere?
No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.