CSS Overview Panel
Get a bird's-eye view of colors, fonts, media queries, and unused declarations with the CSS Overview panel.
Opening CSS Overview
In Chrome DevTools, open the CSS Overview panel via Cmd+Shift+P → "CSS Overview". Click "Capture overview" to analyze the current page's entire stylesheet. The panel summarizes colors, fonts, media queries, and unused declarations.
Color Summary
The Colors section lists every color value used in the page's CSS — hex, rgb, named, and gradient stops — grouped by type. Clicking a color shows which elements and properties use it, revealing unintentional color variation and palette sprawl.