Color Palette Generator
Generate a color palette from one colour: complementary, analogous, triadic, split complementary, tetradic or monochromatic, with HEX codes to copy.
Generate a color palette from one colour: complementary, analogous, triadic, split complementary, tetradic or monochromatic, with HEX codes to copy.
Start with the colour you already have, a brand colour, the blue of a logo or a shade you like, and this generator builds a colour scheme around it using the colour wheel. Pick the base colour with the swatch or type its HEX code, choose a harmony, and the palette fills the screen as big swatches. Tap any swatch to copy its HEX code, or press Copy CSS to copy the whole palette as CSS variables, ready for a stylesheet. Random rolls a new base colour (Space does the same on a keyboard) and keeps the harmony you chose, which is a quick way to explore ideas for a website, a presentation or a logo.
Each harmony is a rule for turning the base colour's hue around the wheel while keeping its saturation and lightness. Complementary adds the colour opposite, 180 degrees away, for the strongest contrast. Analogous takes the neighbours 30 degrees either side, calm and natural. Triadic spaces three colours 120 degrees apart. Split complementary uses the two colours beside the complement, at 150 and 210 degrees, with less tension than a straight complement. Tetradic makes a square of four colours 90 degrees apart. Monochromatic keeps one hue and steps the lightness, five shades from dark to light, with your colour among them.
A common way to use a scheme is the 60-30-10 rule: one colour for about 60 percent of a design (backgrounds, large areas), a second for 30 percent (cards, sections) and an accent for the last 10 percent (buttons, links). A complementary or split complementary palette gives a natural accent; a monochromatic one keeps everything calm. To take the colours from a photo instead of a colour wheel, use /color-palette-extractor/; to read the exact colour of one spot in a picture, use /color-picker/.
Everything happens in your browser. The colours you try, including an unreleased brand colour, are never sent anywhere.
Two colours on opposite sides of the colour wheel, such as blue and orange or red and cyan. Choose Complementary, set your colour as the base, and the second swatch is its complement with the same saturation and lightness.
Tap a swatch to copy its HEX code. Copy CSS copies the whole palette as custom properties in a :root block, named --color-1, --color-2 and so on, in the order shown.
The five shades are 15 lightness points apart. When your colour is very light or very dark there is no room for two lighter or two darker shades, so the ladder slides the other way instead of repeating white or black. Your colour is always one of the five.
No. The palette is calculated on your device, and nothing you type or pick is sent to a server.