The ChrysoKit Palette Generator builds harmonised colour palettes from a base colour, using the standard colour-wheel relationships and a few extras.
Why use it
Picking colours from a wheel is a quick way to get a palette that just feels right. The tool covers six harmony rules and gives you the result as HEX, RGB and ready-to-paste CSS variables.
How to use the Palette Generator
- Pick a base colour or paste a HEX value.
- Choose a harmony rule.
- Read the resulting palette as swatches.
- Copy the palette in HEX, RGB or as a CSS variables block.
Features worth knowing
Six harmony rules
Complementary, split-complementary, analogous, triadic, tetradic, and monochromatic. Each one applies a different geometric relationship on the colour wheel.
Copy to CSS variables
One click copies the palette as a clean :root { --c1: ...; --c2: ...; } block ready to paste into a stylesheet.
Live preview
Each harmony rule shows its swatches immediately; you can compare two rules side by side.
Pro tips
- Analogous palettes (neighbours on the wheel) feel calm; triadic palettes feel energetic. Pick by mood, not by chance.
- Monochromatic is the safest starting point if you are unsure, it cannot clash.
- Run the final palette through the Contrast Checker before shipping. Pretty does not always mean readable.
- Five colours is usually plenty. Anything more and the design starts to fight itself.
Privacy first. The Palette Generator runs entirely in your browser.
Use the Palette Generator as the first step in any colour-driven design. Pair it with the Contrast Checker and the Color Picker for the full workflow.
Open the tool: Palette Generator →