Color Palette Generator
Build a matching color scheme from any base color — complementary, analogous, triadic and more, with HEX, RGB and HSL codes.
Change the swatch count to widen or tighten this palette.
How it works
Pick a base color — with the swatch picker, by typing a hex code, or by rolling a random one — and the color palette generator instantly builds a matching color scheme around it. Your color is converted to HSL, and each harmony rule simply rotates the hue: complementary sits 180° away, triadic splits the wheel into thirds, analogous stays within ±60°, while monochromatic and tints & shades keep the hue and walk the lightness instead. Every swatch shows its HEX, RGB and HSL value; click a swatch to copy it, or grab the whole palette as a list or as ready-to-paste CSS custom properties. All of the math runs in your browser with JavaScript — no account, no ads and nothing sent to a server.
Frequently asked questions
How do I create a color palette from one color?
Enter your base color as a hex code or pick it with the color swatch, then choose a harmony rule. The tool converts your color to HSL and rotates the hue to build the scheme: complementary sits 180° away, split complementary at 150° and 210°, triadic every 120°, tetradic every 90°, and analogous stays within ±30° steps. Monochromatic and tints & shades keep the hue and vary the lightness instead, so the palette always matches the color you started from.
What is the difference between complementary and analogous colors?
Complementary colors sit on opposite sides of the color wheel, so they create maximum contrast — great for a call-to-action button against a background. Analogous colors are neighbours on the wheel (usually within 60°), so they blend smoothly and feel calm and cohesive — better for backgrounds, gradients and illustrations. A common approach is an analogous palette for most of the interface plus one complementary accent.
Can I export the palette as CSS variables?
Yes. Every palette is written out as a :root block of CSS custom properties (--color-1, --color-2, …) that you can copy with one click or download as color-palette.css. Use the "Copy as" selector to switch the exported values between HEX, RGB and HSL, and click any individual swatch to copy just that color. Everything is generated in your browser — nothing is uploaded and no account is needed.