Does this page produce a rectangular color scheme?

Not strictly. It renders the domain's square derivation — four hues at ninety degrees. A true rectangle uses two complementary pairs at unequal spacing, which has to be built by hand from these anchors.

Then why is it called the rectangle harmony palette?

The page slug names the geometry it advertises. The component behind it is the shared four-hue routine, so the output is the square; treat the title as a description of intent rather than of behaviour.

How do I build the second pair of a rectangle?

Take two of the returned hues and rotate them by hand — the hue rotator shifts a colour by a chosen number of degrees, and the channel adjusters edit hue directly. Keep the spacing uneven and the rectangle reads as intended.

Is the square set a bad palette?

No. It is the most balanced four-hue arrangement available and suits charts and equal-weight categories. It simply is not a rectangle, and the two are used for different moods.

Does the page check that the four colours can be told apart?

No. Equal angles do not guarantee perceptual separation, and nothing here measures it. Put the pairs through a contrast check before they carry text.

Rectangle Harmony Palette

Color

#3B82F6

#d54b97

#c17400

#00a875

You Might Also Need

Square Harmony Palette

Four colors evenly spaced (90°)

Tetradic Palette Generator

Four colors in a rectangular harmony

Single Color to Full Palette

Derive a complete palette from one color

Split-Complementary Palette Generator

Base + two neighbours of its complement

The rectangle harmony palette is named for the four-hue geometry of two complementary pairs, and it renders the domain's square derivation of ninety-degree spacing — which is worth knowing before you rely on it.

What is Rectangle Harmony Palette?

Colour theory knows two four-hue shapes. The square puts four hues at ninety degrees, all equally spaced. The rectangle uses two complementary pairs placed at unequal angles — one pair at, say, thirty degrees and two hundred and ten, the other at one hundred and twenty and three hundred. This page is named for the rectangle, and it renders the square: set a base colour and you get the base plus the hues at ninety, one hundred and eighty and two hundred and seventy degrees, generated by the same shared routine as the square and tetradic pages.

A four hue rectangle is often the better shape for a product with two complementary jobs — an identity colour and a warning colour, say — because each pair can be separated from the other while the square holds everything equidistant. That is the design argument for the geometry, and it is also why the naming matters here: anyone arriving for the rectangle harmony palette meets the square derivation instead, and the difference only becomes visible once the palette is in use.

Output: four swatches, evenly spaced at 90-degree intervals, with the base first.
The rectangular color scheme as usually defined — two complementary pairs at unequal spacing — is not one of the routines this domain implements.
Hue is the only coordinate that changes; lightness and chroma follow the base, so the four share a weight.
Hue wraps around the circle rather than clipping, and the derivation is reproducible for a given base.

The practical consequence is a two-step workflow rather than a one-step one. Use this page to get the first pair and its opposites — the anchors of the two-hue rectangle — and then build the second pair deliberately with the hue tools, choosing the spacing that suits the layout instead of accepting a default. Where the second pair comes from, the hue rotator shifts a colour by a fixed number of degrees and the channel adjusters edit hue directly, so the rectangle can be placed by hand rather than inherited.

No rectangle mode, no spacing control and no per-pair offset: the geometry is fixed at ninety degrees.
No ordering, no count control and no lightness work — every swatch inherits the base's weight.
Nothing is checked for readability, and no neutrals are offered to separate hues that sit close together.
The page does not warn you that it produced a square; the name is the only place the expectation is set.

Reach for it as a starting point rather than as a finished rectangle: the four evenly spaced hues make a usable base, and the two extra angles that turn a square into a rectangle are a small manual step afterwards. Where the four-way split has to be exact, keep the values and adjust them in a hue tool; where the layout is a chart or a colour-coded board, the square derivation is often the better answer anyway. Either way the ordering is your job — the sorter orders by hue, lightness or chroma once the set is final.

How to use Rectangle Harmony Palette

Set the base colour that anchors the first pair.
Read the four evenly spaced swatches the page returns.
Build the second pair deliberately with a hue tool if the layout needs the true rectangle.
Order the finished set with the palette sorter before it goes into a legend or a sheet.

When to use Rectangle Harmony Palette vs related tools

Use this when four hues are needed and the exact geometry is negotiable. The square harmony palette is the same derivation under its accurate name, the hue rotator is how the second pair of a true rectangle gets placed, and the palette sorter gives the finished set an order.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.