Spacing Palette Overlay is a Chrome extension designed to assist developers in visualizing margin, padding, and gap sizes on web pages. This tool allows for quick inspections without the need to delve into the DevTools, streamlining the process of checking spacing. The extension color-codes the entire page, categorizing pixel values into distinct groups based on their characteristics, making it easy to identify and analyze them at a glance.

The functionality includes a floating menu that displays each pixel value alongside its respective counts for margins, paddings, and gaps. Users can interactively hover over elements to reveal tooltips detailing the spacing values. Additionally, the Label Mode feature enhances readability by pinning pixel labels directly on overlays, while the context menu offers options to toggle the extension on or off, ensuring flexibility during use. This tool is particularly beneficial for web designers, front-end engineers, and QA teams focused on maintaining consistent spacing.