Free color palette generator
Choose a harmony, generate a five-color palette, then lock any colors worth keeping. Every swatch is editable and copyable; the full set can be shared in one URL or copied as CSS variables.
How PIQE builds a usable palette
A useful palette needs differences in role as well as hue. PIQE deliberately spreads the five colors across dark, middle, light, soft, and accent values. That gives you a plausible text color, surface color, border or secondary color, primary accent, and quiet background before you make any manual changes.
The harmony choice controls how hues relate. Analogous colors stay near one another on the color wheel and feel calm. Complementary colors place emphasis across the wheel. Triadic colors create three distinct families. Balanced mode introduces enough separation for interface work without forcing a textbook scheme.
Generation is a starting point, not an accessibility guarantee. Lock the strongest colors, regenerate the weak ones, then send the intended foreground and background to the contrast checker. A beautiful set can still fail when two similar lightness values are placed together.
How to use the palette generator
- Pick a harmony that matches the mood: analogous for calm, complementary for energy, or balanced when you are unsure.
- Generate until one or two colors fit the project, then lock those swatches before generating again.
- Edit a swatch with the color picker when a brand color must be exact.
- Assign roles before decorating: darkest for text, lightest for surface, one vivid color for primary action.
- Copy the CSS variables and test every text/background pair that will appear in the final design.
Role-based palette examples
| Situation or input | Result or choice | Why it matters |
|---|---|---|
| Editorial site | Ink · paper · muted line · link · highlight | Keep the article surface quiet and reserve the strongest chroma for links and small emphasis. |
| Product UI | Text · canvas · border · primary · status | One action color is easier to learn than several equally loud accents. |
| Poster | Background · headline · illustration · secondary type · spark | A poster can tolerate stronger contrast, but the information hierarchy still needs distinct roles. |
Practical tips for a better result
- Judge colors at the size they will be used. A tiny accent can be more saturated than a page background.
- Place the palette on a neutral white or gray canvas while comparing it; surrounding colors change perception.
- Use the 60–30–10 rule as a rough allocation, not a mathematical obligation.
- Save the shared URL before major edits so you can return to a known version without an account.
What this tool cannot know
A useful result includes knowing the limits of the calculation.
- Generated palettes do not know your brand, audience, printing process, or display conditions.
- A harmony describes hue relationships; it does not prove readable contrast.
- HEX colors describe sRGB screen values. Printed output requires a color-managed proof.
Frequently asked questions
Is the palette generator free for commercial work?
Yes. The tool is free and the generated color values are not restricted by PIQE. You are responsible for checking any separate brand or trademark context in which you use them.
How do I save a palette without an account?
Use Share to copy a URL containing the five HEX values, or copy the CSS variables into your project. PIQE does not store a private library or require an account.
Does a generated palette automatically meet WCAG?
No. Accessibility depends on the particular foreground and background pair, text size, and UI role. Send the intended pair to the contrast checker before publishing.
Related color tools
Contrast checker
Check a foreground and background against WCAG 2.2 AA and AAA ratios for normal text, large text, and interface components.
Open tool →Gradient generator
Build a linear or radial gradient with two to five colors, adjust the angle, preview it live, and copy production-ready CSS.
Open tool →Color mixer
Mix two HEX colors at any ratio, copy the result, and compare a six-step blend scale from the first color to the second.
Open tool →