Build color harmonies from one base color: complementary, analogous, triadic and more. Runs on your device.
The page turns your base color into HSL (hue, saturation, lightness) and walks around the color wheel by fixed angles, keeping saturation and lightness the same. Complementary gives the base and the color 180 degrees across the wheel. Triadic gives three colors 120 degrees apart. Split-complementary gives the base plus the two colors beside its complement, at 150 and 210 degrees. Tetradic, in its square form, gives four colors 90 degrees apart. Analogous gives 3 to 7 neighbours 30 degrees apart, with the base in the middle; with an even count, one extra color goes on the + side. The base color is always kept exactly as you typed it, and each swatch is labelled with its turn, such as +120 deg.
A monochromatic palette keeps the hue and saturation of the base and changes only the lightness. The page spreads 3 to 7 lightness steps evenly from 15% to 90%, then puts your exact base color in the step nearest to its own lightness, so the base is always one of the colors. A dark base lands near the dark end and a pale one near the light end. Each swatch says its lightness, such as Lightness 90%.
HSL is a simple model of color. It is not perceptual, so two colors with the same lightness number can look different in brightness, yellow looking lighter than blue, for example. Results are rounded to whole RGB values. A grey, black or white base has no hue, so in the schemes that turn the hue every swatch comes out the same grey. The page does not check contrast between the colors; use a contrast checker before putting text on a swatch. It makes harmonies from a typed color only.
Each color is a swatch showing its HEX code. Click a swatch to copy the code. The table gives HEX, RGB and HSL for every color with its role, and the CSS block holds the colors as custom properties, --color-1 and so on, inside :root, ready to paste. Nothing you type is stored or sent; the palette is worked out in your browser. A base that is not 3 or 6 hex digits shows a message under the box and no palette.
Analogous colors sit next to each other on the wheel, 30 degrees apart here, so they look calm and close. Triadic colors are 120 degrees apart, three colors spread evenly around the wheel, so they look livelier. Triadic always gives 3 colors; analogous gives 3 to 7.
It uses the base and the two colors on either side of its complement, at 150 and 210 degrees from the base. It keeps the contrast of a complementary pair with less tension. The page gives exactly 3 colors.
Yes, as typed, except that a 3 digit code is written with 6 digits. In the monochromatic scheme it replaces the step nearest to its own lightness. In the other schemes it is the color marked Base.
The base is probably a grey, black or white. These have saturation 0 and no hue, so turning the hue does not change them (monochromatic still varies the lightness). Pick a base with some color in it, such as #5E60CE.
Copy the block and paste it into your stylesheet. It defines --color-1, --color-2 and so on on :root. Then use them as color: var(--color-2) or background: var(--color-1) anywhere on the page.