Color Palette Generator
My Color Palette Generator is a free tool that creates 5-color palettes in your browser. Press Generate (or the space bar), lock the colors you like, and copy each color as HEX, RGB or CSS variables, or export the palette as a PNG, with no sign-up.
Press Space to generate · click 🔓 to lock a color · click a code to copy HEX, RGB, HSL, CSS or Tailwind
Last updated:
How to make a color palette in 5 steps
- Generate. Press Generate for a random 5-color palette.
- Lock. Lock any color you want to keep.
- Repeat. Generate again until the rest fit.
- Check contrast. Check text contrast with the contrast checker.
- Export. Copy HEX/RGB/CSS or export PNG.
Every palette you see is saved in this browser, and the address bar updates with a ?p= link so you can bookmark or share the exact colors. Colour palette generator, color scheme generator, palette maker: whatever you call it, the steps are the same.
Tip: start with the color you already know you need, such as a logo color, a product photo or a brand accent. Paste it into the address as /?p= followed by its six-digit code, or pick it in the HEX color picker and press “Add to a palette”. It arrives locked, and every Generate builds the other four colors around it.
Color harmony: four rules that always work
Use the Mode menu above to generate palettes that follow a harmony rule. Each rule picks hues by their position on the color wheel (0–360°):
- Complementary: two hues opposite each other, 180° apart, such as blue and orange. High contrast; use one as an accent. Try the complementary color generator to find the exact opposite of any HEX code.
- Analogous: hues next to each other on the wheel, within about 30–60°, such as yellow, orange and red. Calm and natural; add a darker or lighter shade for contrast.
- Triadic: three hues evenly spaced 120° apart, such as red, yellow and blue. Lively and balanced when one color leads and the others support it.
- Monochromatic: one hue in several lightness levels. Always cohesive and easy to read; good for dashboards and minimal brands.
The 60-30-10 rule
Once you have a palette, balance it: use the main color for about 60% of the design (backgrounds, large areas), the secondary color for about 30% (cards, sections, navigation) and an accent color for the last 10% (buttons, links, highlights). Neutrals such as off-white or near-black usually take the 60% role so the brand color can shine as the 30% or 10%.
Before you ship, test every text and background pair with the contrast checker: WCAG AA asks for 4.5:1 for normal text.
More color tools
- Random color generatorOne random HEX color or a 5-color palette per click.
- HEX color pickerPick any color and copy HEX, RGB and HSL.
- Color palette from imageExtract 5–10 colors from a photo, in your browser.
- Color contrast checkerWCAG 2 AA/AAA ratio for text and background.
- Pastel color paletteGenerate soft pastel palettes; 12 ready-made sets.
- Complementary color generatorFind the opposite color plus split, analogous and triadic matches.
- HEX to RGB converterConvert HEX ↔ RGB ↔ HSL, with the formula.
- CSS gradient generatorLinear or radial gradient CSS from 2–3 stops.
- CSS color paletteCopy :root custom properties from your swatches.
- Word cloud generatorPaste text; frequent words appear largest. PNG download.
Frequently asked questions
How do I choose colors that go well together?
Start with one base color, then use a color-harmony rule. Complementary colors sit opposite on the color wheel, analogous colors sit next to each other, and triadic colors are evenly spaced, 120° apart. Then balance them with the 60-30-10 rule: 60% main color, 30% secondary, 10% accent.
How many colors should a color palette have?
Most websites, brands and slide decks work well with three to five colors: one or two neutrals for backgrounds and text, one main brand color, and one or two accents for buttons and highlights. More than five usually looks busy unless the extra colors are lighter or darker shades of the same hues.
What is a HEX color code?
A HEX code is a six-digit code that describes a color for screens, written as # followed by three pairs of characters for red, green and blue. Each pair runs from 00 to FF (0–255 in decimal), so #FF0000 is pure red and #FFFFFF is white. HEX gives 16,777,216 possible colors.
How do I make sure my palette is readable?
Check the contrast between text and background colors. WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 pt, about 24 px, or 14 pt bold, about 18.7 px). Level AAA asks for 7:1 and 4.5:1. Use the free contrast checker to test any two HEX colors.
Can I lock a color and change the others?
Yes. Click the lock icon on any swatch and it stays fixed when you press Generate or the space bar, while the unlocked swatches change. Unlock it to let it change again. Your last palette and locks are saved in this browser, so they are still there when you come back.
Is this color palette generator free to use for commercial projects?
Yes. The tool is free with no sign-up, and colors themselves can't be owned. You can use any palette you generate in personal or commercial work. Your palettes are saved only in your browser's local storage and are never uploaded to a server.