COLOUR
Palette Generator
Generate harmonious color palettes — mono, analogous, complementary, triadic.
COLOR HARMONY
Build a palette
Palette guide
A good color palette is 80% of visual polish — in games, UI, branding, and art. This generator builds harmonious palettes from any base color using five classic color-theory schemes: monochromatic, analogous, complementary, triadic, and split-complementary. Click any swatch to copy its hex code.
It runs entirely in your browser, generating colors in HSL space where harmony is easy to compute.
The five harmony schemes
Color harmony comes from relationships on the color wheel:
- Monochromatic — one hue, varying lightness. Clean, safe, professional. Great for UI surfaces and depth.
- Analogous — the hue and its neighbors (±30°). Calm and natural, like a sunset gradient.
- Complementary — the hue and its exact opposite (+180°). Maximum contrast; use one color as the dominant and the other as accent.
- Triadic — three hues 120° apart. Balanced and vibrant; the classic primary-color triangle.
- Split-complementary — the hue plus the two neighbors of its complement. High contrast without the harshness of direct complements.
Using palettes in game and UI design
A common pattern: pick a base brand color, generate a complementary scheme for accents, and use the monochromatic variation of the base for backgrounds and depth layers. This tool gives you all of it from one starting color.
For UI, keep text and interactive elements in high-contrast pairs — a complementary palette is a good starting point, then verify with a contrast check (our color picker shows WCAG ratios).
Why HSL makes harmony easy
In HSL, hue is an angle on the color wheel, so "opposite" is literally +180°, "analogous" is ±30°, and "triadic" is +120°. The generator computes these in HSL space, then converts to the hex codes designers actually use. The math is the same one color-theory tools and design software apply.
Frequently asked questions
What is a complementary color?
The color directly opposite on the color wheel — 180° away in hue. For teal (#00D4AA), the complement is a coral red.
What is the difference between monochromatic and analogous?
Monochromatic uses one hue at different lightness levels; analogous uses neighboring hues. Mono is subtler; analogous adds gentle color variation.
How do I choose a base color?
Start from brand colors, the dominant color of your art, or the mood you want (cool = calm, warm = energetic). The generator then builds a full scheme around it.
Can I use these palettes commercially?
Yes — generated hex colors are not copyrightable. They are yours to use in games, apps, and branding.
Is my color data sent anywhere?
No — palette generation runs entirely in your browser. Nothing leaves your device.
Privacy note: palette generation and copying happen in your browser. Nothing is uploaded.