Classical color theory gives you a small set of named schemes for building a palette around a single base color. Each scheme is built by rotating the base’s hue on the color wheel by a specific angle — 180° for complementary, 120° for triadic, 30° for analogous — or, in the case of monochromatic, by holding the hue fixed and varying lightness instead. This tool runs the math for all six schemes simultaneously so you can compare them side by side and pick whichever fits your project.
Pick a base color with the native picker or type a hex code — if you only have an RGB or HSL value, convert it to hex first. Every scheme renders immediately as a row of swatches; click any swatch to copy its hex code.
The six schemes
- Complementary — base plus its opposite (180°). Maximum contrast, highest visual energy. Two-color schemes only.
- Triadic — base plus two colors at 120° and 240°. Balanced and vibrant; the three colors are equidistant so none dominates.
- Analogous — base plus its two neighbors at ±30°. Close-related palette that feels unified and calm; the eye perceives the three as belonging to the same “family”.
- Split-complementary — base plus the two colors flanking its complement (150° and 210°). A softer version of complementary that trades some contrast for more variety.
- Tetradic — base plus three more colors forming a rectangle on the wheel (60°, 180°, 240°). Four colors for more elaborate palettes; risk of clashing if all four are used at equal weight.
- Monochromatic — base plus four lightness variations. Same hue, five different lightnesses. Ideal for a single-color design with several usable shades (dark-mode on-surface / off-surface tokens, for example).
Each scheme is a geometric relationship, not an aesthetic judgement. “Complementary” just means 180° on the color wheel — nothing more. Whether it looks good is up to you.
The math
Rotating a color’s hue by $d$ degrees is a one-liner in HSL:
The saturation and lightness stay the same; only the hue wraps. Convert the rotated HSL back to hex to get the resulting color. Every scheme except monochromatic uses this one operation with different rotation angles:
Monochromatic keeps the hue fixed and instead walks lightness up and down in 15% steps, giving a dark/medium/base/light/lightest spread around the original.
Example: brand palette from #3b82f6
Enter #3b82f6 (a standard Tailwind blue) as the base:
- Complementary → blue + orange. Maximum contrast; works for warnings, attention grabbers, or accent pairs where you want the two colors to visibly clash in a productive way.
- Triadic → blue + coral pink + lime green. Three equally distant colors; good for playful brands that want a vibrant multi-color palette without any two looking accidentally similar.
- Analogous → blue-purple + blue + blue-green. All three feel like “shades of blue”; perfect for subtle hierarchies within a single brand color.
- Split-complementary → blue + coral orange + peach orange. Softer than complementary but still high-contrast; works for editorial layouts where pure complementary would be too loud.
- Tetradic → blue + yellow-green + orange + red. A four-color scheme with two warm and two cool; use carefully because four equally-weighted colors can compete for attention.
- Monochromatic → five shades of blue, from dark navy to light sky. The set you’d use for a dark-mode UI where every on-surface element needs a related-but-distinguishable background.
When colors don’t change
Greys (including black and white) have no hue to rotate. If you pick #808080 as your base and look at the complementary scheme, both colors come back as #808080 — that’s correct; there’s no “opposite” of a color without a hue. The monochromatic scheme still varies the lightness (producing dark grey, medium grey, light grey), so for achromatic palettes, monochromatic is the only useful scheme.
The same thing happens with fully desaturated colors (s = 0). If you want meaningful rotations, make sure your base has some saturation.
What this tool does not do
It does not let you nudge individual colors in a generated scheme. If you want to adjust one swatch without changing the others, copy its hex into the hex/RGB/HSL converter and tweak it there. It also does not score palettes for accessibility contrast — use the contrast ratio checker for that. And it doesn’t give you shade / tint ramps for design tokens; for a full design-system palette (8-step scales around each color), you’d want a ramp generator, which is a separate tool.