Free Color Palette Generator
Build seed-based color palettes with harmony modes, locks and editable HEX, RGB and HSL values. Check contrast and export CSS variables or JSON.
Build your palette
Lock any swatch to preserve it when regenerating. Edit with a color picker or six-digit HEX value.
Palette and contrast
AA normal text requires 4.5:1; large text requires 3:1. Check the colors actually used together.
How to use the Color Palette Generator
- Choose a seed color and harmony mode, then Generate.
- Lock colors to keep them when regenerating; edit any swatch and choose HEX, RGB or HSL to copy.
- Review contrast against black, white and the seed, then download CSS variables or a JSON palette.
Practical example
A blue seed in complementary mode introduces warm orange hues. Lock your brand blue before regenerating accent shades.
What inputs and outputs are supported?
| Input and limits | HEX seed color; analogous, complementary, triadic, monochromatic or split-complementary harmony |
|---|---|
| Output | Five colors; HEX/RGB/HSL copy; CSS variables or JSON |
Limits, assumptions and troubleshooting
Harmony uses HSL hue offsets; regenerated unlocked colors vary saturation and lightness around the seed. Contrast uses WCAG relative sRGB luminance. A ratio of 4.5:1 meets the normal-text AA contrast threshold; 3:1 applies to large text; 7:1 is the normal-text AAA threshold. These ratios assess the selected color pair, not the accessibility of an entire design. HSL values are rounded for display, so exporting HEX preserves the actual color exactly.
Is my data private?
Input processing and output creation run on your device. This tool does not upload inputs, filenames or outputs, and analytics are disabled. The page loads normal website styles and fonts. Reset releases the current work; download a copy before leaving. This tool does not persist your input in browser storage.
Provided by Toolcross. Read our privacy policy or contact us with a reproducible issue. Updated .
Frequently asked questions
What does locking do?
Locked swatches keep their color when you generate again, even if you change seed or harmony. You can still edit them manually.
Can I export to CSS?
Yes. Download a :root block containing --color-1 through --color-5, or export a JSON array.