Color systems
How to generate a color palette
A useful palette is more than five attractive swatches. Start from a purposeful base color, choose a color relationship, then assign each result a role and test it in context.
Open the color palette generatorChoose a base color
Begin with the color that has the strongest constraint. It might be an existing brand color, a product color, or the main accent for actions. Record the exact HEX value so the palette can be reproduced.
Do not choose every interface color at once. A restrained system often needs a neutral background, readable text, one main accent, and a few supporting states before it needs more hues.
Pick a color relationship
| Scheme | How it works | Useful for |
|---|---|---|
| Analogous | Uses neighbouring hues | Calm, closely related accents |
| Complementary | Combines opposite hues | Strong separation and emphasis |
| Triadic | Uses hues about 120° apart | Broader variety with balance |
| Shades and tints | Changes lightness around one hue | Single-color scales and states |
A generated relationship is a starting point. You can reduce saturation, adjust lightness, or replace a swatch when the output competes with content.
Assign roles instead of names
Label colors by purpose: text, muted text, surface, primary action, focus, success, and error. Role-based names survive redesigns better than names such as “blue 2.”
Palette quality = visual relationship + clear roles + tested contrast
Use the lightest and darkest colors for structural contrast, then use stronger chromatic colors sparingly. Not every generated swatch needs to appear with equal frequency.
Test the palette in real components
- Check body text and small labels against their actual backgrounds.
- Test buttons in default, hover, focus, active, and disabled states.
- View the palette on both large and small screens.
- Check charts or status colors without relying on hue alone.
- Test transparency over the real surface, not a white preview.
Generated palettes do not guarantee accessible pairs. Use the Color Contrast Checker for every text and background combination that matters.
Generate a starting palette with ToolPixels
The free Color Palette Generator creates five colors from an opaque base HEX color using analogous, complementary, triadic, or shades-and-tints schemes. Each color is available in HEX, RGB, and HSL.