ScreenRuler

Pixel-perfect measurement overlay for designers and developers. Ruler, color picker, and element inspector on any webpage.

ScreenRuler -- Pixel-Perfect Measurement for Any Webpage Stop guessing pixel distances. ScreenRuler gives designers and developers an instant measurement overlay on any webpage with three precision tools built in. Features Ruler Tool -- Click and drag to measure any distance on the page. Shows width x height in pixels with visual dimension lines. Hold Shift to lock measurements to horizontal or vertical axes. Color Picker -- Hover over any element to see its color in hex, RGB, and HSL. Click to instantly copy the hex code to your clipboard. A magnifier loupe follows your cursor for precision. Element Inspector -- Hover over any element to see its bounding box, dimensions, padding, and margin visualized with color-coded overlays. Click to copy the CSS dimensions. Quick Access Activate tools from the popup or use keyboard shortcuts while the overlay is active: • R = Ruler • C = Color Picker • I = Element Inspector • Shift = Constrain ruler to horizontal/vertical • Esc = Deactivate Built for Speed • Activates only when you need it -- zero impact when inactive • Overlay cleans up completely when deactivated • Lightweight -- no frameworks, no bloat • Works on any webpage Privacy First All processing happens locally in your browser. No data collection. No analytics. No tracking. Period. Who It's For Front-end developers checking spacing and alignment. Designers verifying implementations match their mockups. QA engineers documenting visual bugs. Anyone who needs to measure things on screen.