About Tetradic Colors
Tetradic Colors builds a four-color scheme from a single starting color. Give it #4F46E5 and it returns four hex values, one per line - #4f46e5, #e5468c, #dce546 and #46e59f - formed by rotating the hue of the input by zero, ninety, one hundred and eighty and two hundred and seventy degrees around the color wheel.
Four colors spaced by right angles sit at the corners of a rectangle on the wheel, which is why the layout is also called a rectangular scheme. Each of the four is the complement of the one opposite it, so the set contains two complementary pairs. That gives a high-contrast palette with no single dominant color, which is useful when a layout genuinely needs four equally weighted accents.
Only the hue moves. Saturation and lightness are carried across from the input unchanged, so the four colors come out as vivid and as light as the one you started with. The scheme therefore inherits any weakness in the original - a base that is already too pale to carry text stays too pale in all four results.
The angles are fixed at ninety degrees, so there is no slider for a tighter square at forty-five degrees and no way to leave the base color out of the output. Each rotation is worked out by converting to hue, saturation and lightness and back to whole-number channels, so the printed hex is the nearest fit to the intended color rather than an exact rotation, and feeding a result back in can walk the values further. The output is four bare lower-case hex strings with no rgb or hsl equivalents, no color swatches and no per-line copy button, and an unreadable input returns an error message instead of a correction.
How to use Tetradic Colors
- 1 Enter a color - hex, a standard name and rgb or hsl notation are all accepted.
- 2 Read the four values, one per line, with the base color on the first line.
- 3 Use the lines as the accent colors of a four-part interface or illustration palette.
- 4 Check that the base is dark and vivid enough, because all four results inherit its saturation and lightness.
Frequently asked questions
What makes a scheme tetradic rather than triadic or complementary?
The number of colors and how far apart they are on the wheel. Complementary uses two colors opposite each other, triadic uses three at one hundred and twenty degrees, and tetradic uses four at ninety degrees - a rectangle rather than a triangle or a single line.
Why is the first line the same color I typed in?
The first rotation is zero degrees, which is the input itself rewritten in lower-case hex. Showing it makes the base of the scheme visible next to the three derived colors instead of leaving you to remember what you started with.
Can I change the angle between the pairs?
No. Ninety degrees is the only spacing offered. If you want a tighter square at forty-five degrees, take the four values from this page and rotate further in a design tool, or use the triadic and analogous tools for other layouts.
Does the output match an exact rotation of my color?
It is the nearest match rather than an exact one. The rotation passes through hue, saturation and lightness and the result is rounded to whole-number channels, so a small drift of one or two steps per channel is normal and can grow if you feed an output back in as a new input.
Free, online, and private
Free to use
Tetradic Colors is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How Tetradic Colors behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Input | one text panel, recalculated live; the sample is #4F46E5 |
| Scheme | four colors made by rotating the hue of the input by zero, ninety, one hundred and eighty and two hundred and seventy degrees - a rectangle on the color wheel |
| Preserved | saturation and lightness are carried across unchanged; only the hue moves, so the four colors stay as vivid and as light as the original |
| Result | the sample yields #4f46e5, #e5468c, #dce546 and #46e59f - one per line, in lower-case hex |
| First line | the opening color is the input itself rewritten in lower-case hex, so the base of the scheme is always visible |
| Accepted input | hex digits, thirty standard color names, and rgb or hsl notation, because the same universal parser backs the page |
Compiled from the implementation of this tool and checked against it by itoolnet.
What Tetradic Colors does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- The angles are fixed. Ninety-degree spacing is the only layout on offer - there is no slider for the gap between the pairs, no way to ask for the tighter square scheme at forty-five degrees, and no option to leave the base color out of the output.
- Saturation and lightness drift slightly through rounding. Each rotation converts to hue-saturation-lightness and back to whole-number channels, so the printed hex is the nearest fit to the intended color rather than an exact rotation, and feeding the output back in can walk the values further.
- Only bare hex comes out. The four results carry no rgb or hsl equivalents, no preview of the colors as swatches, and no per-line copy, and an unreadable input raises an error message instead of a correction.
Tested and documented by itoolnet, the team that builds and maintains this site.