Color Scheme Generator
Generate complementary, triadic, analogous, and tetradic color schemes from any hex color and copy each swatch instantly — runs 100% in your browser with no upload.
Click any swatch to copy its hex
--color-1: #ff0000; --color-2: #00ffff;
🔒 Color schemes are generated in your browser — nothing is uploaded.
What this color scheme generator does
Pick or paste a base hex color, choose a harmony type, and this tool instantly shows the matching colors that go with it. Complementary gives you the single color opposite on the wheel for high-contrast accents. Triadic returns three colors evenly spaced 120° apart for balanced, vibrant palettes. Analogous returns neighbours 30° on either side for calm, cohesive combinations. Tetradic returns four colors spaced 90° apart for rich, varied schemes. Every result shows its exact hex code, and a single click copies that value to your clipboard so you can drop it straight into CSS, a design file, or a style guide.
How the harmonies are calculated
Your base color is converted to HSL, and each scheme is built by rotating only the hue while keeping saturation and lightness fixed, then converting back to a hex code. Complementary rotates the hue by 180°, triadic by 120° and 240°, analogous by −30° and +30°, and tetradic by 90°, 180°, and 270°. The base color you entered is always kept as the first swatch, unchanged. Because the math is deterministic, the same input color and scheme always produce the same palette. You can type standard 6-digit hex, shorthand like #f00, or a value without the leading hash, and the color picker stays in sync with the text field.
Frequently asked questions
What is the difference between complementary, triadic, analogous, and tetradic?
They are hue-based color harmonies. Complementary uses the one color directly opposite (180° away) for strong contrast. Triadic uses three colors evenly spaced 120° apart. Analogous uses close neighbours 30° to each side for a soft, unified look. Tetradic uses four colors spaced 90° apart for a fuller palette.
Does the scheme keep my exact base color?
Yes. The base color you enter is returned unchanged as the first swatch, and only the hue is rotated to create the other colors, so their saturation and lightness match the original.
Is my color or any data uploaded to a server?
No. The entire scheme is generated locally with JavaScript in your browser. Nothing you enter or copy is sent, stored, or logged anywhere.