Color Palette Generator
Create harmonious color palettes from a base color using the classic color-theory rules: analogous, complementary, monochromatic, triadic, split-complementary and square. Pick a color with the picker or type its hex code and get a balanced combination instantly; copy any color with one click or the whole palette as CSS variables. Everything happens in your browser, with no accounts and no connection.
How to create a color palette
- Pick the base color with the picker or type its hex code (for example, #12b886).
- Choose the harmony type: analogous, complementary, monochromatic, triadic, split-complementary or square.
- The palette is generated instantly following the color wheel.
- Click any swatch to copy its hex code, or copy the whole palette as CSS variables.
- Press “Random” to explore combinations from a random color.
Frequently asked questions
What is a harmonious color palette?
It is a set of colors that work well together because they hold a specific relationship on the color wheel. Instead of picking colors at random, you start from a base color and rotate its hue by set angles —or vary its lightness— to get balanced, pleasing combinations.
Which harmonies can I generate?
Six classic color-theory rules: analogous (neighboring hues), complementary (opposite hues), monochromatic (one hue at different lightnesses), triadic (three evenly spaced hues), split-complementary and square (four hues every 90°). Each one has a distinct character: some softer, others higher in contrast.
What is a complementary combination?
It uses two colors that sit opposite on the color wheel (180° apart), like blue and orange. It is the highest-contrast combination: it grabs attention and works well to highlight an element, though it is best to use one as an accent and the other as the main color.
And an analogous palette?
It takes neighboring hues on the color wheel (either side of the base color, in steps of about 30°). Because they share a color family, the result is harmonious and calm; it is the rule behind many brand designs and soft backgrounds. It is this tool’s default harmony.
What is the difference between triadic, square and split-complementary?
Triadic uses three hues 120° apart (very balanced and lively). Square uses four hues every 90°, for rich palettes with two complementary pairs. Split-complementary starts from the base color and takes the two neighbors of its complement: it keeps good contrast but is less tense than pure complementary.
What is a monochromatic palette?
It is a scale of a single hue (and saturation) at different lightnesses, from lightest to darkest. It gives a very cohesive, elegant feel, ideal for interface states (hover, active), shadows and visual hierarchy without introducing new colors.
How do I use the palette in my project?
Click any swatch to copy its hex code to the clipboard, or copy the whole palette as CSS variables (:root { --color-1: …; }) to paste straight into your stylesheet. The same hex values work in any design editor.
Is anything uploaded to a server?
No. The palette is computed entirely in your browser with JavaScript; the color you pick never leaves your device and the tool works offline once loaded.