How each harmony is calculated
Your base color is converted from hex to HSL (hue, saturation, lightness). The tool then rotates the hue around a 360 degree wheel and converts each result back to hex, keeping saturation and lightness the same. The relationships are fixed offsets from the base hue.
| Scheme | Hue offsets | Colors returned |
|---|---|---|
| Complementary | 0, +180 | 2 |
| Analogous | -30, 0, +30 | 3 |
| Triadic | 0, +120, +240 | 3 |
| Tetradic | 0, +90, +180, +270 | 4 |
| Monochromatic | 0 (hue fixed) | 5, at lightness 10, 30, 50, 70, 90, with the step nearest your base replaced by the base itself |
Worked example
The default base #6366f1 is hue 238.7, saturation 83.5 percent, lightness 66.7 percent. Rotating that hue gives:
- Analogous:
#63adf1,#6366f1,#a763f1 - Triadic:
#6366f1,#f16366,#66f163 - Complementary:
#6366f1and#f1ee63 - Monochromatic:
#04052f,#0d0f8c,#1519ea,#6366f1,#d0d1fb
What to know before using the output
- Complements are digital, not painterly. On the red-green-blue based HSL wheel the opposite of indigo is a yellow. A traditional red-yellow-blue art wheel would suggest orange, so a palette from here can differ from one in a painting guide.
- The monochromatic row is fixed steps plus your base. It spans lightness 10 to 90 percent at the base's saturation, and the step closest to your base lightness is swapped for your exact color, so the base is always in the row. In the example, the base (lightness 66.7) replaces the 70 percent step. The 10 percent step is near-black and the 90 percent step is near-white.
- Equal lightness is not equal brightness. HSL is not perceptually uniform. In the analogous example, the yellow-leaning and blue-leaning neighbors look noticeably different in weight even though their numbers match.
- Input rules. The base accepts 3 or 6 digit hex with or without the leading
#. Eight digit hex with an alpha channel, or color names, produce no swatches. "Random base" picks a random hue at 65 percent saturation and 55 percent lightness. - A palette is not a design system. Text on any of these swatches still needs checking. Run pairs through the contrast checker, or translate a result to RGB or HSL with the color converter.
To blend two of the swatches into a background, continue in the CSS gradient generator.