Color Tools
Gradient Generator
Build multi-stop linear and radial CSS gradients with angle control, curated presets and one-click CSS output.
Use Tool
Color Tools
Free Color Palette Generator Online
Generate harmonious five-colour palettes with Monochromatic, Complementary, Analogous and Triadic rules. Lock colours and copy HEX, RGB or CSS variables.
#4F46E5
CSS custom properties (:root)
How to Use the Color Palette Generator
Follow these three steps to process your assets directly in the browser.
1
Choose a harmony mode
Pick Random, Monochromatic, Complementary, Analogous or Triadic, or choose your own base colour.
2
Lock the swatches you like
Click the padlock on any column to freeze it, then regenerate to compute matching companions.
3
Copy HEX, RGB or CSS variables
Copy a single value with one click or export the full palette as :root custom properties.
Key Features of the Color Palette Generator
Five harmony engines
Deterministic HSL colour-wheel maths - no AI API, no waiting and no rate limits.
Per-swatch locking and editing
Freeze your brand colour and let the algorithm build accents and neutrals around it.
One-click HEX and RGB copy
Copy either notation for every swatch straight to the clipboard.
CSS variable export
Grab a ready-to-paste :root block for your stylesheet or design tokens file.
How the color palette generator works and best practices for modern web projects.
Understanding colour harmony rules
Strong interfaces rarely pick colours at random. They use geometric relationships on the HSL colour wheel:
- Monochromatic: one hue with varying saturation and lightness. Ideal for clean dashboards, type scales and cohesive card systems.
- Complementary: hues 180 degrees apart, giving high-contrast call-to-action colours against calm surfaces.
- Analogous: adjacent hues about 25-35 degrees apart, producing organic gradients and editorial layouts.
- Triadic: three hues spaced 120 degrees apart, useful for vibrant illustrations and multi-category data visualisation.
Applying the 60-30-10 rule
Turn a five-colour palette into a layout with the classic 60-30-10 proportion: use your lightest neutral for 60% of the viewport (backgrounds and cards), your deep structural shade for 30% (typography, headers, borders) and your vibrant accent for the final 10% (primary buttons, active states, badges).
Color Palette Generator — Frequently Asked Questions
Locked swatches stay frozen when you regenerate. The algorithm then uses your locked colour as the anchor hue and derives harmonious companions from it.
No. It uses pure client-side HSL and RGB colour-wheel maths, so results are instant, deterministic and free forever.
Yes. Every swatch has a native colour picker, and its HEX, RGB and name update immediately.