A color palette generator for harmonies and random schemes
The Color Palette Generator builds harmonious colour schemes from any starting colour. Choose a harmony — complementary, analogous, triadic, split-complementary, tetradic, square or monochromatic — and the palette appears instantly. Or switch to Random, lock the colours you love and press the Space bar to reroll the rest.
Export any palette as CSS custom properties, a Tailwind CSS config snippet, JSON or a PNG image. The address bar keeps a shareable link, so a teammate opens exactly the same colours. Hues can rotate on the classic HSL colour wheel or on the perceptual OKLCH wheel, which keeps perceived lightness steadier from one hue to the next.
How to use the Color Palette Generator
- Type a base colour in any CSS format — HEX, rgb(), hsl() or a name like “orchid” — or click the colour square to pick one.
- Choose a Harmony. Each swatch shows its HEX code and its role, such as “Base” or “+120°”.
- Switch Colour wheel to OKLCH if you want hues that look equally light.
- For a random scheme choose “Random (with locks)”, lock any colour you want to keep, then press Space or “Generate palette”.
- Click a swatch to copy its HEX, pick CSS, Tailwind, JSON or HEX list and press “Copy code”, or use “Download PNG” and “Copy link” to share.
Color Palette Generator features
Seven colour harmonies
Complementary, analogous, triadic, split-complementary, tetradic (rectangle), square and monochromatic, calculated from your exact base colour.
Two colour wheels
Rotate hues in HSL like a painter’s wheel, or in OKLCH, which keeps perceived lightness and maps any out-of-range colour back into sRGB.
Random palettes with locks
Random mode creates five colours with a spread of light, mid and dark tones. Lock the ones you like and regenerate the rest.
Developer-ready exports
CSS custom properties, a Tailwind theme.extend.colors block and JSON listing HEX, RGB, HSL and OKLCH for every colour.
PNG image and shareable link
Download a 1600 × 900 PNG with HEX labels, or copy a link that restores the same palette, harmony and locks.
Use any swatch as the new base
The crosshair button on each colour makes it the base, so you can wander through related schemes.
Colour harmonies explained
Harmonies are fixed angles around the colour wheel, measured from your base colour. The table shows the angles this generator uses and what each scheme tends to feel like.
| Harmony | Hue angles | Character and typical use |
|---|---|---|
| Complementary | 0°, 180° | Maximum contrast — call-to-action buttons, sports branding |
| Analogous | −30°, 0°, +30° | Calm and natural — backgrounds, illustrations |
| Triadic | 0°, 120°, 240° | Vibrant yet balanced — playful brands, charts |
| Split-complementary | 0°, 150°, 210° | Strong contrast with less tension than complementary |
| Tetradic (rectangle) | 0°, 60°, 180°, 240° | Rich; let one colour dominate |
| Square | 0°, 90°, 180°, 270° | Bold and even; keep three as accents |
| Monochromatic | One hue, five lightness levels | Elegant, cohesive and easy to keep readable |
HSL or OKLCH colour wheel?
Rotating the hue in HSL keeps the saturation and lightness numbers the same, but not how bright the colours look. Pure yellow, hsl(60, 100%, 50%), appears far lighter than pure blue, hsl(240, 100%, 50%): their OKLCH lightness is about 97% versus 45%. A triadic HSL palette therefore often has one colour that shouts and one that disappears.
Rotating in OKLCH keeps perceived lightness and chroma, so palettes feel evenly weighted. Some rotated colours would fall outside what a screen can show, so the tool lowers their chroma with the CSS Color 4 gamut-mapping method rather than clipping them.
Turning a palette into a real design
- Follow the 60-30-10 guideline: one dominant colour for about 60% of the area, a secondary colour for 30% and an accent for 10%.
- Check every text and background pair in the Contrast Checker — WCAG AA asks for 4.5:1 for body text.
- Give each palette colour a full light-to-dark range with the Color Shades Generator for hover states, borders and backgrounds.
- Blend two palette colours into a background with the Gradient Generator.
Color Palette Generator FAQ
How does the color palette generator choose colours?
For harmonies it rotates your base colour’s hue by fixed angles (for example 120° and 240° for triadic) while keeping saturation and lightness, either in HSL or in OKLCH. Random mode picks a hue family and spreads five colours across light, mid and dark tones.
What is a complementary colour?
It is the colour directly opposite on the colour wheel, 180° away. On the HSL wheel the complement of red #FF0000 is cyan #00FFFF. Complementary pairs give the strongest contrast, so use one as the main colour and the other sparingly.
How do I save or share a palette?
The page address updates as you work, so bookmarking it or pressing “Copy link” saves the exact palette, harmony and locks. You can also download a PNG or copy the CSS, Tailwind or JSON export.
How do I use the palette in Tailwind CSS?
Choose the Tailwind tab and paste the block into tailwind.config.js (Tailwind v3) to get classes such as bg-palette-1 and text-palette-3. In Tailwind v4, paste the CSS variables from the CSS tab into an @theme block instead.
Why doesn’t the Space bar do anything?
Space is ignored while you are typing in a box or when a button or menu has focus, so it never interferes with forms. Click an empty part of the page and press Space again.
Can I build a random palette around my own colour?
Yes. In Random mode, typing a base colour places it in the first slot and locks it; the other colours are then generated to go with its hue.