PXLTools

Palette Generator

Generate palettes using color theory

H 160 · S 84 · L 39
H 280 · S 84 · L 39
H 400 · S 84 · L 39
CSS variables
--color-1: #10b981;
--color-2: #8110b9;
--color-3: #b98110;

How to use Palette Generator

  1. Pick a base color using the color picker or enter a hex value directly.
  2. Choose a color harmony — complementary for bold contrast, analogous for calm, triadic for balanced variety.
  3. Fine-tune saturation and lightness to match your design vibe.
  4. Click any swatch to copy its hex value, or expand the CSS variables section for a ready-to-use snippet.

Color theory basics

A color wheel arranges hues in a circle: red, orange, yellow, green, blue, purple, and back. Colors that sit opposite each other (complementary) create high contrast. Colors next to each other (analogous) feel harmonious. Evenly spaced colors (triadic, tetradic) give balanced variety.

Beyond the base harmony, saturation controls color intensity (gray to vivid) and lightness controls the brightness (black to white). Well-designed palettes rarely use pure primaries — slight desaturation and careful lightness adjustments make colors feel modern and refined.

For UI work, start with a single strong accent color plus neutrals. For illustrations or marketing, triadic and split-complementary palettes work well. For minimalist designs, monochromatic variations provide subtle depth without overwhelming the viewer.

Frequently Asked Questions

What harmony modes are supported?
Complementary (opposite colors), analogous (neighbors on the wheel), triadic (3 evenly-spaced), split-complementary, tetradic (4-color rectangle), and monochromatic (variations of one hue).
How does the color wheel work?
The wheel represents the HSL hue circle. Your base color sits at one point; the palette colors are derived by rotating around the wheel using set angles for each harmony type.
Can I use these palettes commercially?
Yes. Color theory formulas are not copyrightable. Use any generated palette however you like.
What if the colors look too bright or too dull?
Use the saturation and lightness sliders to tune the entire palette globally while preserving the harmony relationships.