Palette Harmonizer

Five ways to align colors — and when each is right

"Harmonize" is a vague word until you say what the colors should agree on. This palette harmonizer offers five answers. Hue scheme — the row of chips above the button — rotates each free color to the nearest hue a classic scheme allows around the base: Same family (one hue, varied in lightness), Neighbors (within about 30°, the calm analogous look), Opposite (the complement, maximum tension), Triad (three hues 120° apart) and Split (the complement's two neighbors). Closest fit, pre-selected, picks for each color whichever of those targets is nearest, so nothing travels further than it must. Brightness ladder spreads colors that touch so no two are almost-but-not-quite equally light. Vividness pulls chroma into a band around the base — the cure for "one is muddy, one is neon". Temperature, off by default and found under More options, makes the palette warm or cool by majority vote. The fifth, always on underneath the other four, is minimal move: whatever you ask for, each color takes the shortest perceptual path there, so a harmonized color palette still looks like your palette. Pick a named scheme when the relationship is the brief ("we want a triad"); leave Closest fit when you simply want the colors to stop arguing.

The base color: who leads, who follows

Every alignment needs a reference, and the tool never guesses in silence. The base is the first color you keep; if you keep nothing, it is the most vivid color, and the result says so. That matches how palettes are built: the most saturated color is the one people remember. Keeping a color does two things at once — it stays exactly as it is, and the scheme targets are measured from its hue. Keep two colors and the targets are the union of both sets: a free color may settle next to either anchor, whichever is nearer. That is the honest answer to "which third color goes with these two?" — there is rarely one, there is a short list, and Gentle, Balanced and Bold walk along it. If your two kept colors are far apart in hue, the free ones join one of them rather than some diplomatic average: colors that go with two colors are found by choosing a side, not by splitting the difference.

Colors in context: side by side, nested, 60/30/10 (Albers)

Josef Albers spent a career showing that a color has no fixed appearance: the same patch looks lighter on a dark ground, warmer on a cool one, and vanishes on a ground of similar lightness. A strip of swatches — what every other harmonizer shows — hides all of that, because every swatch gets the same neighbors. The stage here has three presets that put the colors in the constellation they will actually occupy. Side by side (the Adjacent preset) is the zero-gap strip: the strictest test of edges, and where near-identical lightness shows first. Nested puts one color inside another — the accent inside the wall, the button inside the card — and applies a stricter rule, because an inner color needs more lightness distance from its field than a neighbor does or it disappears. 60/30/10 renders the classic proportion — dominant, secondary, accent — and reveals whether a color that looked fine as an equal stripe can carry sixty percent of a surface. The harmonizer reads the composition: pairs that touch get the ladder, pairs that nest get the stricter one, and "What was wrong" is judged on the layout you chose, not on an abstract list.

Arrange your own composition — and re-color it before and after

When no preset matches, "Arrange freely" opens the composer: rectangles, circles and triangles you place, resize and rotate on the stage, each assigned to one of your colors with a chip. Drop a circle onto a rectangle and it is nested; push two shapes together and their edges snap so they touch without a gap — the case Albers cared about most. It works with mouse, touch and pen, with handles large enough for a thumb; the arrow keys move a selected shape, and resizing, rotating, ordering, duplicating and deleting have buttons in the shape list under the canvas as well. Then comes the moment the tool is built for: press "Align colors" and the arrangement stays while the palette underneath it swaps. Toggle Before | After (key B) and you are comparing the two palettes in your composition, not in someone else's. Export the composition as a PNG for the client, or let the share link carry palette, kept colors, scheme and shapes so a colleague opens exactly what you see.

Walkthroughs: a room around a sofa, an app around a brand blue, an outfit around one garment

A room around a sofa. Enter the sofa, the floor, a wall candidate and a curtain candidate. Keep the sofa and the floor. Choose Neighbors if you want a calm room, Opposite if the curtains should be the event. Set the stage to 60/30/10 — wall dominant, floor secondary, sofa as the accent — or nest the sofa inside the wall. Align. The wall typically shifts a little toward the sofa's family and the curtain lands in the scheme; from More options, "Test on a wall" hands the palette to the color tester's wall scene for a daylight check.

An app around a brand blue. Keep the primary. Enter the background, surface and text colors you inherited, and turn on the contrast pair in More options with the text and background chips and a 4.5 target. Same family gives you a tinted-neutral system in which everything is a relative of the blue; Closest fit leaves the surface where it is and adjusts only what fails. The contrast rule moves the free side of the pair until the target passes, and the chip says which one moved and how far.

An outfit around one garment. The coat exists; the scarf, trousers and bag are candidates. Keep the coat, pick Split for a lively combination or Neighbors for a tonal one, and use Nested to check the small accent against the large garment. Bold is allowed here — clothes forgive a stronger move than a wall does — and every result is a short list to try on, not a verdict.

Save canvases, share links, export your data

Every arrangement is a canvas: the colors, what is kept, the scheme and strength, the composition. Canvases save automatically in this browser (up to twenty; name them inline, delete with an undo), and opening a share link that differs from what you have creates a new one called "Shared" instead of overwriting your work. Palettes go to My colors as a category, to the clipboard as CSS variables, or via More formats as SCSS, Tailwind and JSON. Because everything lives in your browser and nothing is uploaded, the dock has Export data — one JSON file with your saved colors, canvases and preferences — and Import data to bring it all back on another machine. If your problem is less "align colors to a scheme" and more "something here is wrong and I don't know what", start with the color palette fixer: same engine, diagnosis first.