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 Colour Picker for the full workflow.
Open the tool: Palette Generator →
From generated palette to finished page: a small-site case study
A neighbourhood pottery studio needs a website, and the palette generator produces a pleasant earthy set in thirty seconds: deep clay red, warm sand, muted olive, off-white, near-black. The instructive part is the distance between that swatch strip and a finished page... a distance most palette tutorials skip.
First assignment pass: the off-white becomes the page background and the near-black the body text... the two least glamorous colours carry 90% of the surface area, and choosing them first anchors everything. The clay red, the palette's personality, is rationed ruthlessly: buttons, links, the logo mark. Sand fills cards and section backgrounds; olive takes secondary buttons and footer. The 60-30-10 distribution emerges not as doctrine but because every other allocation tried looked like a paint catalogue.
Then reality testing. The olive-on-sand combination, lovely in the swatch strip, fails contrast for text and gets demoted to decorative borders. Clay red on white passes for large text only, so small links darken one step. A success-message green has to be invented... generated palettes never include functional colours... by pulling olive toward green at matching saturation so the alert looks native.
Total time from swatch to coherent system: an evening. The generator contributed the harmony; the case study's lesson is that assignment, rationing and contrast testing... the unglamorous middle... is where a palette becomes a design.