Color palette generator
Create a harmonious palette from one color: complementary, analogous, triadic, monochromatic, plus shades from 50 to 950. Export to CSS, SCSS, Tailwind.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Find colors that go together from a single one: six harmonies (complementary, analogous, triadic, split complementary, tetradic, monochromatic) and a full 50 to 950 shade scale as in Tailwind. One click copies a color code; the palette exports as CSS variables, SCSS, Tailwind or JSON, and as an image.
When to use it
A project's brand colors
From a logo's color, the complementary harmony gives an accent color for buttons and links.
Design system
The 50 to 950 scale provides every shade needed for backgrounds, borders, hover states and text, with consistent names.
Presentations and documents
An analogous or monochromatic palette makes charts and slides harmonious effortlessly.
How to use
- Pick your base color (or a random one).
- Choose a harmony and tap a color to copy its code.
- Copy the palette as CSS variables, SCSS, Tailwind or JSON.
How it works
Colors are computed in HSL (hue, saturation, lightness): the tool rotates the base color's hue according to the chosen harmony and adjusts lightness for light and dark variants.
The shade scale keeps the base hue and saturation and sets each step's lightness (97% for 50, 14% for 950), with slightly reduced saturation at the extremes, like hand-crafted palettes.
Tips for best results
- Apply the 60-30-10 rule: one dominant color, one secondary, one accent.
- Keep a bright color for actions (buttons) and calm colors for the rest.
- Check text contrast on each background color before adopting it.
- Name colors by their role (primary, accent) rather than their hue.
Common problems and fixes
The colors look dull
Your base color has low saturation: pick a more vivid base, the harmonies inherit it.
Dark yellow turns brown
That's expected: darkened yellow becomes brown. For dark yellow shades, shift the hue slightly toward orange.
Copying doesn't work
Some browsers block the clipboard outside HTTPS or without a direct click; use the code blocks.
Frequently asked questions
What is a color harmony?
A rule for choosing colors on the color wheel: opposite (complementary), neighboring (analogous), 120° apart (triadic)… These combinations are pleasing to the eye and have been used for centuries in painting.
What are the 50 to 950 shades for?
They range your color from lightest to darkest, like Tailwind CSS palettes: 50 for backgrounds, 500 for the main color, 900 for text.
How do I use the palette on my site?
Copy the CSS variables (--primary-500…) into your stylesheet, or the Tailwind configuration into tailwind.config.js.
Are the colors accessible?
The swatch text automatically switches to black or white for the best contrast. Check your text/background pairs with the contrast checker.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.