Color Palette Generator (Complementary, Analogous, Triadic)
Pick one base color and get a matching palette: complementary, analogous, triadic, split-complementary, tetradic, square or monochromatic. Click any swatch to copy its HEX code, or export the whole palette as CSS variables or JSON. Everything runs in your browser, and nothing is sent to a server. Need to convert formats? Use the Color Converter. To check whether the colors are readable together, try the Contrast Checker.
🔒 Runs in your browser · Your data is never sent to a server
Palette
How to use
- Choose a base color with the color picker or the HEX field.
- Select a harmony type such as complementary or triadic.
- Click a swatch to copy its HEX, or copy the CSS variables or JSON for the whole palette.
Notes
- Schemes are calculated by rotating the hue in the HSL color space. Perceived brightness differs between hues, so check the contrast before using a palette.
- Analogous colors sit 30 degrees either side of the base color. Monochromatic keeps the base hue and saturation and varies lightness in five steps.
- Gray colors have no saturation, so rotating the hue gives the same color.
Glossary
Complementary
Two colors directly opposite each other (180 degrees) on the color wheel. They create strong contrast.
Analogous
Colors that sit next to each other on the color wheel. They feel cohesive and calm.
Triadic
Three colors spaced evenly (120 degrees apart) around the color wheel. Balanced and vibrant.
Split-complementary
A base color plus the two colors on either side of its complement (150 and 210 degrees). Softer contrast than a plain complement.
Tetradic / Square
Four-color schemes: tetradic forms a rectangle on the wheel (0, 60, 180, 240 degrees), square forms a square (0, 90, 180, 270 degrees).
FAQ
What is the difference between complementary, analogous and triadic?
Complementary colors are opposite on the color wheel (180 degrees), analogous colors are neighbors (±30 degrees), and triadic colors are 120 degrees apart. Use complementary for strong contrast and analogous for a cohesive look.
How do I use the generated palette?
Click a swatch to copy its HEX code. You can also export the whole palette as CSS variables (:root { --color-1: … }) or JSON and paste it into a stylesheet or design tokens.
How is the monochromatic palette calculated?
It keeps the hue and saturation of your base color and sets HSL lightness to 20, 35, 50, 65 and 80%. The same five steps are used whatever the base lightness is.
Why do all colors look the same when I use gray?
Gray has zero saturation and no real hue, so rotating the hue changes nothing. Start from a saturated color instead.
Share this page