Spacing Palette Overlay

Color-coded overlays reveal margin / padding / gap sizes, with a floating legend and inline labels for quick inspection.

Spacing Palette Overlay is a visualization tool that lets developers read every margin, padding, and gap on a web page at a glance. It frees you from opening DevTools and chasing the Styles panel every time you check spacing. Once enabled, the entire page is automatically color-coded, grouping px values into three families: other even numbers in orange→red, multiples of 8 or 4 in yellow-green, and odd numbers in light blue→indigo. Hovering dims overlays that don’t share the same px value and surfaces a tooltip such as “M 16px / P 8px” directly under the pointer. Turn on Label Mode to pin px labels at the center of every overlay so stacked spacing stays readable. The floating menu lists each px value with its M / P / G counts, and hovering a row highlights the matching overlays. You can drag or collapse the menu so it never gets in the way. Use the context menu to toggle the extension On / Off or switch Label Mode from anywhere on the page. Ideal for web designers, front-end engineers, and QA teams who need to audit spacing consistency.