Color Palette Generator
Pick a base color and instantly generate color-theory harmonies — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — as live swatches you can copy as HEX, RGB, HSL, CSS variables or a Tailwind config.
Complementary
The base color and its opposite on the wheel (hue + 180°) — the highest-contrast pairing.
Analogous
The base flanked by its two neighbors on the wheel (hue ± 30°) — a calm, cohesive scheme.
Triadic
Three colors spaced evenly 120° apart (hue, +120°, +240°) — vibrant yet balanced.
Tetradic (Rectangle)
Four colors forming a rectangle on the wheel (hue, +90°, +180°, +270°) — two complementary pairs.
Split-Complementary
The base plus the two colors either side of its complement (hue +150° and +210°) — strong contrast that is easier to balance.
Monochromatic
A single hue rendered as a light-to-dark lightness ramp — an effortlessly harmonious scale.
Export palette
Copy the selected harmony as ready-to-paste CSS custom properties or a Tailwind color config.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}About the Color Palette Generator
A color palette generator turns a single base color into a set of colors that work together, using the geometry of the color wheel. Color-theory harmonies are simply defined relationships between hues: colors sitting opposite each other, next to each other, or evenly spaced around the wheel. This tool takes your base color, reads its hue, saturation and lightness (HSL), and rotates the hue by fixed amounts to build six classic schemes — complementary (hue + 180°), analogous (hue ± 30°), triadic (120° apart), tetradic or rectangle (90° apart), split-complementary (either side of the complement), and monochromatic (one hue, varied lightness). Each palette is shown as live swatches so you can see the relationships instead of just reading numbers, and every color comes with its HEX, RGB and HSL values ready to copy. When you have a scheme you like, export it as CSS custom properties or a Tailwind color config and drop it straight into a project. It is built for designers, developers, illustrators and anyone choosing colors for a website, brand, chart, slide deck or interior — a fast way to move from one color you love to a whole balanced palette.
How to use this generator
- 1 Pick a base color with the swatch picker, or type any hex value (for example #3498DB or #39F) into the field.
- 2 Browse the six harmony sections — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — each shown as live color swatches.
- 3 Copy any single color as HEX with its per-swatch button; each swatch also displays the matching RGB and HSL values.
- 4 Choose a palette and a format in the export box to copy CSS custom properties or a Tailwind color config, then paste it into your project.
How color harmonies work (the color wheel)
Every harmony is a rotation of the base color's hue around the 360° color wheel, keeping its saturation and lightness the same. Working in HSL (hue, saturation, lightness) makes this easy: only the hue changes. Complementary — hue + 180°. The two colors sit directly opposite, giving the strongest contrast. Analogous — hue − 30°, hue, hue + 30°. Neighboring colors that blend smoothly and feel harmonious. Triadic — hue, hue + 120°, hue + 240°. Three colors at the points of an equilateral triangle: vivid but balanced. Tetradic (rectangle) — hue, hue + 90°, hue + 180°, hue + 270°. Two complementary pairs for a rich, four-color scheme. Split-complementary — hue, hue + 150°, hue + 210°. The base with the two hues flanking its complement — nearly the contrast of complementary, but gentler. Monochromatic — one hue at several lightness levels, from light tints to dark shades. For example, the base #3498DB has a hue of about 204°. Its complement is 204° + 180° = 24° (an orange), its triadic partners are at 324° and 84°, and its split-complements are at 354° and 54°. The math is done in HSL and converted back to HEX for each swatch.
Frequently asked questions
What is a complementary color?
A complementary color is the color directly opposite another on the color wheel — a hue rotation of 180°. Blue and orange, red and green, and yellow and purple are complementary pairs. Placed side by side they create the strongest possible contrast, which makes each color look more intense, so complementary pairs are popular for calls to action, accents and anything that needs to stand out. This generator finds a complement by taking your base color's hue and adding 180°.
How do you make a color palette?
Start from one base color you like, then use color-theory relationships to derive the rest instead of guessing. Pick a harmony that suits the mood: analogous or monochromatic schemes feel calm and unified, while complementary, triadic and split-complementary schemes add contrast and energy. Keep saturation and lightness consistent so the colors feel like a set, and limit yourself to a handful of colors plus neutrals. This tool automates that process — enter a base color and it generates six ready-made palettes you can copy as HEX, RGB, HSL, CSS variables or a Tailwind config.
What is a triadic color scheme?
A triadic color scheme uses three colors spaced evenly around the color wheel, 120° apart — for example red, blue and yellow. Triadic palettes are vibrant and full of contrast while still feeling balanced, because the three hues are equally distant from one another. A common approach is to let one color dominate and use the other two as accents. In this generator the triadic palette is your base color plus the hues at +120° and +240°.
What is an analogous color scheme?
An analogous color scheme uses colors that sit next to each other on the wheel, typically within about 30° of the base hue — such as blue, blue-green and green. Because the hues are so close, analogous palettes look smooth, natural and harmonious, which is why they appear so often in nature (sunsets, foliage, the ocean). They have less contrast than complementary schemes, so it helps to choose one color to dominate. This tool builds an analogous palette from the hues at −30°, the base, and +30°.
Related design & color tools
The palette generator pairs naturally with the color converter for translating any swatch between HEX, RGB, HSL, HSV and CMYK, the contrast checker for making sure your chosen colors are readable and WCAG-accessible, the CSS gradient generator for blending palette colors into smooth backgrounds, and the aspect ratio calculator for the rest of your design workflow.