This tool takes one base color you choose and, following five common color-theory schemes, generates five sets of colors at once: monochromatic, analogous, complementary, triadic and split-complementary. Click any swatch to copy its hexadecimal value. The method is to convert the base color to HSL (hue, saturation, lightness) and then compute the other colors by fixed hue angles or lightness steps. It supplies arithmetic starting points only. It does not judge which set looks best, does not check contrast between text and background, and cannot export an image or a swatch file, so the final choice depends on your own judgment for your purpose.
How to use it
- Under 'Choose a base color', click the swatch on the left to open your browser's color picker, or type a hex value beginning with # into the text box on the right. The default is #2F5D50.
- Five rows appear immediately: 'Monochromatic (first is your base color; the rest share its hue at different lightness)', 'Analogous (adjacent hues, soft and harmonious)', 'Complementary (strong contrast)', 'Triadic (three evenly balanced colors)' and 'Split-complementary (contrast without being too strong)'.
- Click a swatch and its HEX value (such as #5D2F3C) is copied to the clipboard. The copy icon on that swatch briefly becomes a check mark and returns to normal after about a second.
- Change the base color and all five rows update together. Paste the values you like into your own document to keep them.
A worked example
Take the default base #2F5D50, which converts to roughly hue 163 degrees, saturation 33% and lightness 27%. The tool actually produces: monochromatic #2F5D50 (the base color itself, placed first), #22443A, #3C7766, #56A992, #88C3B3, #BBDDD3 (the last five at fixed lightness 20%, 35%, 50%, 65% and 80%); analogous #2F5D39, #2F5D45, #2F5D50, #2F5D5B, #2F535D (hue shifted by -30, -15, 0, +15 and +30 degrees); complementary #2F5D50 and #5D2F3C; triadic #2F5D50, #502F5D, #5D502F; split-complementary #2F5D50, #5D2F53, #5D392F. For pure red, #FF0000, the complementary color is #00FFFF and the triadic set is #FF0000, #00FF00, #0000FF. All of these values come from running the same conversion functions the tool uses.
How each of the five schemes is calculated
- Monochromatic: hue and saturation stay the same and lightness is set to 20%, 35%, 50%, 65% and 80%, giving five colors from dark to light. The lightness values are fixed, not offsets around your base color's lightness; for easy comparison the first swatch of the row is always your base color itself, so the row has six swatches.
- Analogous: saturation and lightness stay the same and the hue is shifted by -30, -15, 0, +15 and +30 degrees, giving five neighbouring colors. The middle one is the base color.
- Complementary: the base color and the color 180 degrees away on the hue wheel, two colors in total.
- Triadic: one color every 120 degrees, three in total, forming an equilateral triangle with the base color.
- Split-complementary: the base color plus the two colors 30 degrees either side of its complement, that is hue offsets of 150 and 210 degrees, three colors in total.
Supported features and known limits
- The base color must be six-digit hex. In the text box the leading # must stay, and only up to six hexadecimal characters are accepted; other characters are ignored.
- Each scheme is fixed. You cannot change the angles, the lightness steps or the number of colors, and you cannot mix the five sets into a custom palette.
- A gray (zero saturation) has no hue, so the analogous, complementary, triadic and split-complementary rows all show that same gray.
- Colors pass through HSL conversion and rounding, so the zero-offset color may differ from the value you typed by one level in a channel. It is usually identical to the base, but this is not guaranteed digit for digit.
- Swatches are shown in on-screen sRGB; how they look in print or on another monitor may differ.
- Copying depends on browser clipboard permission. If it is refused the error is ignored and no failure message is shown.
How do I choose combinations that look good?
There is no single answer. A common approach in web and interface design is to use one main color, support it with analogous or monochromatic colors, and use the complement only for small accents rather than large areas side by side. The tool gives arithmetic combinations; adapt them to your context, brand colors and contrast needs.
Does it guarantee enough contrast between text and background?
No. The tool performs no contrast check. If you plan to use a color behind text, verify it with a dedicated contrast checker against the readability standard you need.
Where is my base color in the monochromatic row?
It is the first swatch. The five that follow use fixed lightness values of 20%, 35%, 50%, 65% and 80%, and your base color's lightness is probably not one of them, so the base color does not repeat among those five.
Why does the complementary row have only two colors?
A complementary pair is by definition two colors opposite each other on the hue wheel: the base and its opposite. For more options, look at the split-complementary or triadic rows.
Privacy and processing
Palettes are generated in your browser as simple math on the color you choose. The code sends no color value to any server and saves nothing. Copying writes the hex value to your device's clipboard. Refreshing the page returns to the default #2F5D50.