Color Scheme Generator
Generate complementary, split-complementary, triadic, analogous, tetradic, square or monochromatic colour harmonies from one hex colour, in HEX, RGB and HSL.
Click any swatch to copy its hex
Every swatch in HEX, RGB and HSL · Click a value to copy it
--color-1: #ff0000; --color-2: #00ffff;
Contrast between the colours
Each cell is the ratio between its row and its column.
| #ff0000 | #00ffff | |
|---|---|---|
| #ff0000 | — | 3.19 |
| #00ffff | 3.19 | — |
Bold: passes AA for normal text.
Tints and shades of every colour
Lightest at the left, darkest at the right, the colour itself in the middle. Click one to copy it.
The palette on a sample page
The first colour as the header, the second as the heading and the button, the third as a link, the last as a badge; text on a colour is black or white, whichever reads better, and a colour too light to read as text on the white page is shown in its nearest readable shade.
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. Split-complementary swaps that opposite for the two colors either side of it, keeping the contrast but softening it. Triadic returns three colors evenly spaced 120° apart for balanced, vibrant palettes. Analogous returns neighbours 30° on either side for calm, cohesive combinations. Tetradic (rectangle) returns two complementary pairs 60° apart, and Square returns four colors spaced evenly 90° apart, both for rich, varied schemes. Monochromatic keeps the hue and returns lighter and darker versions of your color. 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. A table under the swatches gives each one as HEX, rgb() and hsl() as well, and dragging the base color round the color wheel above them moves the whole harmony. The Saturation and Lightness sliders set the base color’s saturation and lightness with its hue kept, and the rest of the scheme follows. Under the export, “Contrast between the colours” gives the WCAG contrast ratio of every pair of swatches, bold where it passes AA for normal text, and “Tints and shades of every colour” draws a light-to-dark ramp for each swatch, a click on any step copying it. Last, “The palette on a sample page” puts the colours on a small mock page — the first as its header, the second as a heading and a button, the third as a link and the last as a badge — with black or white text on each, whichever reads better. To see one of the colours in more formats than HEX, rgb() and hsl(), OKLCH and CMYK among them, use the Color Converter.
How the harmonies are calculated
Your base color is converted to HSL, and every scheme but monochromatic 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°, split-complementary by 150° and 210°, triadic by 120° and 240°, analogous by −30° and +30°, tetradic by 60°, 180° and 240°, and square by 90°, 180°, and 270°. Monochromatic keeps the hue and saturation and moves the lightness instead, up and down from yours, or all one way when your color is close to white or black. 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, split-complementary, triadic, analogous, and tetradic?
They are hue-based color harmonies. Complementary uses the one color directly opposite (180° away) for strong contrast. Split-complementary uses the two colors beside that opposite (150° and 210°) instead, which is softer. Triadic uses three colors evenly spaced 120° apart. Analogous uses close neighbours 30° to each side for a soft, unified look. Tetradic (rectangle) uses two complementary pairs 60° apart, and Square four colors spaced evenly 90° apart, both for a fuller palette. Monochromatic is the odd one out: one hue in several lightnesses.
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 — except in Monochromatic, which keeps the hue and changes the lightness.
Can I see RGB and HSL values, or pick the colour on a wheel?
Yes. A table under the swatches gives every colour as HEX, rgb() and hsl(), and clicking a value copies it. Above the swatches, a colour wheel draws the harmony as dots joined into its shape; drag or click it to move the base colour to that hue and saturation (the lightness stays), and the other dots follow. The arrow keys turn it a few degrees at a time.
Can I lighten the whole palette, check its contrast, or get tints and shades?
Yes. The Saturation and Lightness sliders set the base color’s saturation and lightness with its hue kept, and the other swatches follow, so the base color is still the first swatch. “Contrast between the colours”, under the export, is a table of every pair of swatches with its WCAG contrast ratio, bold where it passes AA for normal text — the contrast checker’s own maths. “Tints and shades of every colour” draws a light-to-dark ramp for each swatch with the color itself in the middle, and clicking a step copies its hex.
Can I see the palette used on a page?
Yes. “The palette on a sample page”, the last folded section, draws a small page in it: the first colour as the header, the second as a heading and a button, the third as a link and the last as a badge, each carrying black or white text, whichever has the higher contrast. It is a picture of a page on a fixed light background, so nothing in it can be clicked.