Converters / TOOLKIT
Color Palette Generator
Create harmonious 5-color schemes and copy HEX codes with one click.
Free to use · No account needed
Click a color to copy its HEX code. Click the lock icon to keep a color while generating new ones.
How to use
- Choose a scheme type - Random, Monochromatic, Analogous, Complementary or Triadic.
- Click Generate palette - five harmonious colors appear instantly.
- Click any color to copy its HEX code, or Copy all HEX for the whole set.
- Lock a color you love and regenerate to explore variations around it.
Use cases
1. Use case: Design a website theme Generate a triadic or analogous palette, copy the five HEX codes, and drop them into your CSS design tokens for a cohesive brand look.
2. Use case: Plan a presentation or infographic Pick a monochromatic scheme for clean, professional slides - lock your brand color and regenerate shades that match it exactly.
Practical tips
A workable palette follows the 60-30-10 rule: a dominant neutral, a secondary support color, and one accent used sparingly. Lock your base brand color first and generate around it — palettes built in the wrong order drift away from the brand. Check text contrast before falling in love with a combination; light text on a mid-tone is the most common accessibility failure. Export the full set, not just the hero color. Like every tool on this site, the Color Palette Generator runs entirely in your browser: the data you enter never leaves your device, nothing is uploaded to a server, and the tool keeps working if your connection drops.
Common mistakes
Palettes fail through order of operations more than through taste:
- Building the palette before locking the brand color, then drifting away from the brand with every generated shade.
- Ignoring text contrast — light text on a mid-tone background is the most common accessibility failure in generated palettes.
- Using the accent color everywhere; the 60-30-10 rule only works while the accent stays rare.
- Exporting only the hero color and losing the rest of the set when the design moves into code.
Contrast, in numbers
A palette is only usable if its text survives on its backgrounds. Contrast ratio is the measurement that decides this: it compares the relative luminance of two colours and runs from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 sets the thresholds below, and they are the numbers worth checking before you ship a palette rather than after.
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| Non-text UI components (AA) | 3:1 | |
"Large text" means at least 24px, or at least 18.66px when bold — the size at which thinner strokes stop mattering as much. A colour pair that fails AA on body copy can still pass for a heading, so contrast is a property of the pair and the size together, not of the colour alone.
In practice the quickest way to build a compliant palette is to fix the background first, then choose text tones that clear the threshold, and only then pick the accent colours that carry no text at all. Accents can be low-contrast because they are decoration; text cannot.
Frequently asked questions
Does the Color Palette Generator send my data anywhere?
No. It runs entirely in your browser — your input is processed on your device and never uploaded. Refresh the page and it still works offline.
How many colors should a palette have?
How do I check that my palette is accessible?
How do I generate a color palette?
What do the palette types mean?
Can I keep a color while generating new ones?
Is my palette data stored or uploaded?
What contrast ratio do I need for accessible text?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). The enhanced AAA level raises those to 7:1 and 4.5:1. Non-text interface components such as icons and input borders need 3:1 at AA.
What counts as "large text" for contrast purposes?
At least 24px in regular weight, or at least 18.66px when bold. Above that size the thicker strokes make text legible at lower contrast, which is why the threshold drops from 4.5:1 to 3:1.
Does a high-contrast palette look bad?
Not necessarily — contrast constrains the text colours, not the accents. A palette can keep a soft, low-contrast accent for decoration as long as the text pairs themselves clear the threshold, which is why the two are worth choosing separately.