Generate harmonious color schemes using color theory
Pick a base color and generate harmonious palettes using color theory rules like complementary, analogous, triadic, and split-complementary schemes. Useful for designers, developers, and anyone who needs a cohesive color set for a project.
Initializing in your browser…
You have one brand blue and need a coherent five-colour palette for a UI without guessing harmonious shades.
Base colour + scheme
#2563EB · "Analogous"
Generated palette
#25C7EB #2563EB #4025EB #8B25EB #EB25C7
An analogous scheme picks colours adjacent on the colour wheel (rotating hue while holding saturation/lightness), which reads as calm and cohesive, versus complementary, which maximises contrast. The tool computes the math on the wheel so the set is harmonious by construction, then gives you the hex codes ready for design tokens.
Pick a base color and generate harmonious palettes using color theory rules like complementary, analogous, triadic, and split-complementary schemes. Useful for designers, developers, and anyone who needs a cohesive color set for a project.
All claims verified accurate against the component. Harmony hue offsets all match the generatePalette switch (lines 207-281): complementary +180, triadic +120/+240, analogous -60/-30/0/+30/+60 (loop i=-2..2 times 30), split-complementary +150/+210, tetradic +90/+180/+270, compound +30/+180/+210. Monochromatic is 5 colors with Math.max(10, Math.min(90, l-30+i*15)). Full Shade Scale is 9 colors with newL=10+i*10.
WCAG math verified: getLuminance (lines 143-153) linearizes with the 0.03928 threshold and weights 0.2126/0.7152/0.0722; getContrastRatio returns (lighter+0.05)/(darker+0.05); checkContrast sets aa>=4.5, aaa>=7, aaLarge>=3, aaaLarge>=4.5. contrastColor defaults to '#ffffff'. Color-blindness covers protanopia/deuteranopia/tritanopia via matrices the code itself labels 'Simplified simulation matrices' (line 373); the content correctly hedges them as simplified linear approximations, no overclaim.
Workflow claims verified: locks restored by position on regenerate (lines 284-287), shuffle randomizes only unlocked swatches to random hex (lines 297-304), randomize base (randomColor). All 7 export formats verified (lines 326-352): HEX, RGB, HSL, CSS (--color-N), Tailwind keyed (i+1)*100, SCSS ($color-N), JSON (hex+rgb+hsl). PNG download via canvas at 200px per swatch with hex and HSL printed below (lines 392-417). URL state ?c= and ?s= (lines 51-66, 33-42). Third FAQ clarifying harmony does not auto-pass accessibility is present (lines 306-309). The detailedDescription paragraphs as written are accurate and require no changes.
Generate a balanced color scheme for a website header, buttons, and backgrounds.
Explore color harmonies when developing a brand palette from a primary brand color.
Create a cohesive slide deck by using colors from the same harmony group.
Complementary (opposite on the color wheel) creates strong contrast. Analogous (adjacent colors) feels more harmonious. Try both and see which fits your project.
Select your locked color as the base and switch between harmony rules, the base stays fixed while the derived colors change.
Conversions run on your device in JavaScript. The values you enter are never sent over the network.