Color Palette Generator
Build a beautiful, coordinated colour palette from any base colour using real
colour-theory harmonies. Lock the colours you like, press
space to shuffle the rest, browse tints & shades, and copy
the result as CSS variables, JSON or a plain hex list. Everything
runs in your browser — nothing is uploaded.
#000000 #000000 #000000 #000000 #000000 Tints & shades of the selected colour
Lighter (tints) on the left, darker (shades) on the right. Click any swatch to copy its hex — perfect for hover states, borders and backgrounds on the same hue.
How to use the colour palette generator
- Set a base colour — pick it with the colour box, type a hex code, or press Shuffle for a random starting point.
- Choose a harmony — analogous for calm, complementary for punch, triadic or tetradic for variety, monochromatic for a single-hue scheme, or Auto to explore.
- Lock & shuffle — click the lock on the swatches you want to keep, then press space or Shuffle to regenerate only the rest.
- Copy or export — click a swatch to copy its hex, grab the tints & shades for variations, or export the whole palette as CSS variables, JSON or a hex list.
Colour harmonies explained
| Harmony | Wheel positions | Feel & best for |
|---|---|---|
| Analogous | base ± 20–40° | Calm and unified — nature scenes, gentle brands, backgrounds. |
| Monochromatic | one hue, varied lightness | Elegant and minimal — single-colour brands, clean UIs. |
| Complementary | base & +180° | Maximum contrast — calls to action, sport, energetic designs. |
| Split-complementary | base, +150°, +210° | Strong contrast, easier to balance than pure complementary. |
| Triadic | base, +120°, +240° | Vibrant and balanced — playful, illustrative, kids' brands. |
| Tetradic (square) | base, +90°, +180°, +270° | Rich and varied — use one dominant colour and three accents. |
What you can build with it
- A website or app theme — a primary, a few accents and neutral tints/shades for surfaces and borders.
- A brand colour system — lock your brand colour, then find harmonious secondaries.
- Slides & infographics — a coordinated set of distinct colours for charts and sections.
- Design tokens — export as JSON or CSS variables straight into your code or design system.
- Illustration & art — explore harmonies quickly before committing to a scheme.
Frequently asked questions
What is a colour palette generator?
It is a tool that builds a set of colours that look good together. You start from one base colour (pick it, type a hex code, or hit shuffle for a random one) and choose a harmony rule from colour theory — such as complementary or analogous. The generator then computes four or five colours whose hues and lightness are mathematically related to the base, so the result is a coordinated palette you can use for a website, brand, slide deck or illustration rather than a random pile of colours.
What do the harmony rules mean?
They are positions on the colour wheel (the hue, 0–360°). Analogous uses colours next to each other (±20–40°) for a calm, unified look. Complementary uses the opposite colour (+180°) for high contrast. Split-complementary uses the two colours either side of the complement (+150° and +210°) — strong contrast that is easier to balance. Triadic uses three evenly spaced colours (+120°, +240°). Tetradic (square) uses four (+90°, +180°, +270°). Monochromatic keeps a single hue and only varies lightness for a subtle, elegant scheme. "Auto" picks a random base and rule each time so you can explore quickly.
How do I lock a colour and shuffle the rest?
Click the lock icon on any swatch to keep it fixed. Then press the Shuffle button (or tap the spacebar) and every unlocked swatch is regenerated around a fresh base hue while the locked ones stay exactly as they are. This is the fastest way to find a palette: lock the one or two colours you love, shuffle until the others fit, then export. Unlock at any time to bring a swatch back into the shuffle.
What is the difference between a tint, a shade and a tone?
A tint is a colour mixed with white (lighter); a shade is mixed with black (darker); a tone is mixed with grey (less saturated). The tints-and-shades strip under the palette shows the lighter and darker versions of your selected colour at fixed lightness steps, which is exactly what you need for hover states, borders, backgrounds and text on the same hue. Every value is computed from the colour you picked, so it always matches your palette.
How do I use these colours in my CSS or design tool?
Every swatch shows its HEX code and copies on click. To take the whole palette at once, use the export buttons: "CSS variables" gives you a ready-to-paste :root block (--color-1 … --color-5), "JSON array" gives ["#…","#…"] for code or design tokens, and "Hex list" gives a plain newline-separated list you can drop into Figma, Sketch or a style guide. HEX works everywhere; if you need RGB or HSL, click a swatch through to the colour converter.
Is anything uploaded, and is it free?
It is completely free with no sign-up, and nothing is uploaded. All the colour maths — converting between HEX, RGB and HSL, rotating hues on the wheel and computing tints and shades — runs in your own browser with local JavaScript, so it works offline once the page has loaded and your colours never leave your device.