Tetradic Color Finder
Build two complementary HSL pairs from a HEX color and an adjustable pair separation, with four codes and their construction angles.
A tetradic palette contains two complementary pairs. Choose the angle between their starting hues to construct a rectangle on the digital HSL wheel; a 90-degree choice makes the special square arrangement. The output lists the base and related colors in a reproducible order, ready to copy into a digital design. It describes HSL geometry rather than a paint or printing model.
How to use this tool
- Enter an opaque three- or six-digit HEX color, with or without the leading hash.
- Choose the angle shown in the form; fractional degrees are allowed within its stated range.
- Read the HEX list and the hue-offset table together.
- Test the resulting colors in their actual foreground, background and surrounding layout.
Formula
hues = (h, h + a, h + 180, h + 180 + a) mod 360
Hue wraps at 360 degrees. Saturation and lightness are retained from the original sRGB color before rounding each new RGB channel to the nearest integer from zero to 255. The base HEX is preserved exactly.
Example
Red #FF0000 with separation 60 degrees produces #FF0000, #FFFF00, #00FFFF, and #0000FF. Red/cyan and yellow/blue are the two opposite pairs. Selecting 90 degrees makes a square tetrad.
Frequently asked questions
Why do all results repeat for gray?
An achromatic color has zero saturation and no defined hue. Rotating its hue cannot introduce color, so gray, black and white produce repeated entries.
Are these colors guaranteed to have good contrast?
No. Equal HSL lightness does not mean equal perceived brightness, and hue separation does not determine text contrast. Check the specific foreground and background pair separately.
Why can two different angles produce the same code?
HEX channels have only 256 values each. At low chroma or very small angular changes, rounding can merge several hue positions. The distinct-color count makes this visible instead of silently removing palette entries.
Sources
Last updated: 2026-10-30