Color Palette Generator
Generate five-color palettes at random or from complementary, analogous, triadic, split-complementary or monochromatic rules. Lock colors you like and copy the HEX codes.
#264653
#2A9D8F
#E9C46A
#F4A261
#E76F51
#264653
#2A9D8F
#E9C46A
#F4A261
#E76F51
Click a color to copy its HEX value. Locked colors stay when you generate again, and the chosen harmony is built around the first locked color.
About the Color Palette Generator
Choosing colors that work together is easier with a starting point. This generator creates five-color palettes either completely at random or from classic color-wheel rules. Each rule places hues at fixed angles from a base hue: complementary adds the opposite side of the wheel (180°), analogous uses neighbors 30° and 60° away, triadic is built on three hues 120° apart and split-complementary uses the two hues next to the complement. Saturation and lightness vary a little so the colors aren’t flat copies of each other. Monochromatic keeps one hue and steps the lightness from dark to light.
When you find a color you like, lock it. Locked colors keep their value and position when you generate again, and the selected harmony is built around the first locked color, so the new colors relate to it instead of to a random hue. You can also fine-tune any color with the small picker under its swatch.
For example, set the first color to your brand color, lock it, choose Analogous and click Generate a few times until the neighbors suit you. Copy All then gives you all five codes in one line, separated by commas, ready to paste into a stylesheet or design file.
A palette that looks good isn’t automatically accessible. Before using two of the colors for text and background, test the pair with the Contrast Checker, and run a screenshot of the palette through the Colorblind Simulator to see how it holds up for people with color vision deficiencies.
How to use the Color Palette Generator
- 1
Pick a harmony
Click Random, Complementary, Analogous, Triadic, Split Comp. or Monochromatic; a new palette appears straight away.
- 2
Generate more
Click Generate for another palette that follows the same rule.
- 3
Lock and adjust
Click Lock under a color, or the lock icon on its swatch, to keep it. Use the picker under a swatch to change a color by hand.
- 4
Copy the colors
Click a swatch to copy its HEX code, or Copy All to copy all five.
What it can do
Six modes
Random plus complementary, analogous, triadic, split-complementary and monochromatic harmonies.
Locks that anchor the harmony
Locked colors stay, and the rule is applied relative to the first locked color.
Manual adjustment
A color picker under each swatch for fine-tuning.
HEX and HSL shown
Each color’s HEX code is listed below the palette, with its HSL values on wider screens.
One-click copying
Copy a single HEX code or the whole palette.
Limitations
- Palettes always have five colors.
- Colors come from simple HSL rules with some randomness; they aren’t checked for contrast or accessibility.
- There is no export to swatch files, CSS variables or framework configs; copy the HEX codes instead.
- Palettes aren’t saved. Reloading the page starts a new random palette.
- Saturation and lightness stay within set ranges, so very pale pastels and near-black colors rarely appear.
Privacy
Palettes are generated by JavaScript in your browser; nothing is sent to a server.
Frequently asked questions
What does locking a color do?
A locked color keeps its value and position when you click Generate. If a harmony other than Random is selected, the new colors are arranged around the first locked color according to that rule.
Which harmony should I start with?
Analogous and monochromatic palettes are calm and cohesive, which suits interfaces and documents. Complementary and triadic palettes have more contrast, which suits accents and illustrations. Random is good for unexpected ideas.
How do I get the colors into my CSS?
Click Copy All and paste the codes into your stylesheet, for example as custom properties such as --color-primary: #264653;.
Can I start from my own brand color?
Yes. Set the first swatch to your color with the picker under it, lock it, choose a harmony and click Generate.
Why is the palette different every time I open the page?
A fresh random palette is generated when the page loads, and palettes aren’t stored. Copy the codes you want to keep.
Ratings & Reviews
Rate Color Palette Generator
Help others by sharing your experience. Your rating is shown without your name.
More Design Tools
View all →Color Picker
Pick a color and copy it as HEX, RGB or HSL
Font Preview
Preview and compare Google Fonts with your own text
Colorblind Simulator
Approximate how an image looks with seven types of color blindness
Contrast Checker
Check the WCAG contrast ratio between text and background colors