Color Palette Generator
Generate harmonious colour palettes from any base colour.
Generate beautiful colour palettes from a single base colour: complementary, analogous, triadic, split-complementary and tetradic harmonies, plus shade, tint and tone ramps. Copy any swatch as hex or export a whole group as CSS variables. Runs fully in your browser — nothing is uploaded.
How to use Color Palette Generator
Choose a harmony
Pick a color harmony rule such as monochrome, analogous, complementary, triadic or tetradic, or leave it on Auto to let the free online color palette generator surprise you.
Set a base color
Type a hex code or use the picker to set your base brand color, and the tool instantly builds a cohesive five-color scheme around it.
Generate palettes
Press the Space bar or the Generate button to create fresh, balanced color palettes instantly in your browser until one feels right.
Lock and reshuffle
Click the lock icon on any swatch to keep that color fixed, then regenerate the rest so you can build a scheme around colors you already love.
Explore shades and tones
Select a swatch to view its shades, tints and saturation tones, helping you fine-tune the perfect light-to-dark color ramp.
Copy or export
Copy all hex codes, ready-to-paste CSS variables or JSON, or load a curated palette, so your color scheme drops straight into any project.
Frequently asked questions
How do I generate a colour palette?
Pick a generation rule (or leave it on Auto), then press Generate or hit the Space bar. Each press creates a fresh, balanced 5-colour palette. Lock any colours you want to keep and reshuffle the rest.
What do the harmony rules mean?
They set how the hues relate on the colour wheel: Monochrome (one hue), Analogous (neighbours), Complementary (opposites), Split, Triadic (evenly spaced thirds) and Tetradic (four-way). Auto picks a rule at random for variety.
How do I export the palette?
Use Copy for the hex list, CSS for ready-to-paste custom properties (--color-1 …), or JSON. You can also click any individual swatch's hex to copy just that colour.
Is my data uploaded anywhere?
No. Every palette is generated in your browser with JavaScript — nothing is sent to or stored on a server.
How do I create a color palette from a base colour?
Set your Base colour with the picker or by typing a hex code, choose a harmony rule, and the color palette generator builds a cohesive 5-colour scheme around it. Lock the colours you like and press Space to reshuffle the rest until the whole palette feels right.
Can I get the hex codes and CSS variables for my palette?
Yes. Use Copy to grab all five hex codes, CSS to copy ready-to-paste custom properties (--color-1 … --color-5), or JSON for use in code. You can also click any swatch's hex to copy that single colour.
How do I lock a colour and generate the rest?
Hover a swatch and click the lock icon to keep that colour fixed, then press Generate or the Space bar — every unlocked colour is replaced while the locked one stays put. It's the quickest way to build a palette around a brand colour you already have.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.