Visual Weight Analyzer
Palette
Heaviest → lightest
You Might Also Need
The visual weight analyzer sorts a palette by OKLCH lightness and sizes each swatch in proportion, so it is obvious at a glance which colors carry more weight.
What is Visual Weight Analyzer?
The palette editor at the top holds five colours and behaves like every other palette tool in this domain: swatches can be changed, added and removed. The default set is black, a blue, a purple, a green and white. Below the editor, a card titled Heaviest to lightest lays the same colours out as squares, ordered by lightness so that the darker a colour is, the larger its square, with each hex value available in a tooltip.
- The ordering is by oklch lightness and nothing else, which keeps the comparison honest.
- Hue and chroma cannot influence the order at all, so a vivid yellow and a dull one of the same lightness land in the same place.
- That matters because visual weight is often read in practice as saturation, and this tool deliberately separates the two questions rather than blending them.
Size encodes the same quantity a second time, and that is what makes the arrangement legible. A square's side is thirty pixels plus eighty scaled by one minus lightness, so white arrives at the floor of about thirty pixels and black at roughly a hundred and ten. The order already said which colour is heavier; the sizing shows how much, so a palette with two colours close in lightness reads as two similar squares while a wide spread reads as a staircase.
In use this answers questions that come up whenever a palette is assembled without a scheme. Which colour should be the background? Which one is carrying more attention than the area it holds deserves? Will these two mid-tones read as a pair? Turning the comparison into a shape makes those calls quicker, and it is the fastest way to notice that an accent sits at the same weight as the surface it is meant to sit on.
The default palette is a demonstration in itself. Black sits at the bottom of the lightness range and white at the top, and their squares are the two extremes of the row; the blue, purple and green in between land in a narrow band of sizes because all three are mid-tone. Replacing one of them with a pale tint or a deep shade changes the shape of the row immediately, which is the fastest way to see how much of a palette's apparent balance comes from lightness alone rather than from the hues chosen.
- Some limits follow from the design.
- Perceptual weight is more than lightness, and the tool does not pretend otherwise: area, saturation, position and surrounding colours all contribute in a real interface and none of them appear here.
- The default five colours are only a starting point, the sort direction cannot be flipped, and no numbers are printed beyond the hex values in the tooltips.
Within those bounds the page does one thing cleanly. As a color weight comparison it orders a palette by oklch lightness and renders that gradient as area, which is a good deal more useful than it sounds — a visual weight analyzer answers which color is heavier in a set without arithmetic, and the palette weight view makes the answer readable in a single glance.
How to use Visual Weight Analyzer
- Edit the palette in the top card, or keep the default five as a starting point.
- Read the squares in the Heaviest to lightest card — they are ordered by lightness and sized in proportion.
- Hover a square to read its hex value if you need the exact colour.
When to use Visual Weight Analyzer vs related tools
Use this when a palette needs its tonal hierarchy checked — deciding a surface, spotting an accent that is too heavy, or confirming a set has enough spread. Use the palette balance analyzer when the question is the mix of light and dark rather than the order. The palette balance analyzer puts numbers to the same lightness story across a set, and the hierarchy analyzer applies the weights to three roles in context.
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.