Square Color Scheme Generator Online — Free
Runs 100% in your browser — your files never leave your device.
A square scheme places four colors evenly around the wheel, 90 degrees apart. The even spacing keeps the palette balanced while staying vivid — a good fit for interfaces and illustrations that need four distinct voices. Enter a base color and copy all four hex values.
How it works
- 1
Paste a base color
Enter any HEX, RGB, or HSL value — it anchors the scheme.
- 2
Read the scheme
Four swatches appear, each 90 degrees around the wheel from the last.
- 3
Copy each color
One click copies any swatch hex value to your clipboard.
About this tool
How the square scheme is built
The square scheme places four colors at exact 90-degree intervals around the hue wheel — your color plus three others, all matching your saturation and lightness. It contains two complementary pairs at right angles to each other.
When to reach for it
Square schemes power colorful product categories, board game and app icon sets, data visualizations with four series, and any design that needs four distinguishable identities that still feel related. The even spacing does the relating for you.
Working with four colors
The scheme risks feeling circus-like at equal weight. Anchor it: one color for backgrounds and majority surfaces, a second for primary actions, and the last two for accents — then verify each pairing with the complementary tool, since two complementary pairs hide inside the square.
Frequently asked questions
Is the square scheme the same as the tetrad?
Functionally yes — both place four colors 90 degrees apart. The distinction some designers draw is rotation: a "true" tetrad rectangle uses two close colors and two far ones. This tool generates the evenly spaced square.
How do I keep a square scheme from looking childish?
Saturation and lightness carry the maturity: desaturate the scheme members toward 40–60 percent and vary their lightness. The hue relationships stay playful; the values turn sophisticated.
Which pair should carry my primary and secondary actions?
Pick the pair with the strongest contrast for actions, and confirm it with the complementary tool. The remaining pair works for categories, tags, and chart series.