Pixel Size Measurer

Measure pixels, inspect elements, pick colors, detect fonts, check contrast, and annotate screenshots. No paywall, no analytics.

Pixel Size Measurer is a complete design & development toolkit packed into one lightweight Chrome extension. Every feature is 100% free with no paywall, no premium tiers, and absolutely no analytics or tracking. MEASUREMENT TOOLS Rectangle Ruler — Click and drag to measure any area on the page. Shows width x height in real-time with resize handles for adjustment. Multiple Rulers — Place unlimited measurement rectangles simultaneously, each numbered and individually deletable. Smart Element Select — Hover over any DOM element to see its dimensions instantly. Click to pin the measurement. No paywall — completely free. Element Spacing — Click two elements to measure the exact pixel distance between them with visual guide lines. DESIGN INSPECTION Color Picker / Eyedropper — Click any pixel to get HEX, RGB, and HSL values with one-click copy. Remembers your 10 most recent colors. CSS Inspector — Click any element to see its full computed styles: typography, colors, box model, and layout properties with visual box model diagram. Font Detector — Click any text to identify font family, size, weight, line height, letter spacing, and color with a live preview. Contrast Checker — Check WCAG AA/AAA contrast ratios between text and background colors for accessibility compliance. WORKFLOW TOOLS Screenshots with Annotations — Capture the visible page and draw arrows, rectangles, circles, text, and freehand annotations. Save as PNG. Unlimited captures, no daily limits. Guideline Rulers — Photoshop-style rulers on page edges with draggable horizontal and vertical guidelines. Responsive Viewport Tester — Instantly simulate different screen widths (iPhone, iPad, laptop, desktop) without resizing your browser. Measurement Export — Export all rulers and guidelines as JSON data. Cursor Position Tracker — Always shows X/Y page coordinates. Magnifier — Zoomed lens following your cursor for pixel-level inspection. KEYBOARD SHORTCUTS R=Ruler, S=Smart Select, C=Color Picker, I=Inspector, M=Spacing, G=Guidelines, F=Font Detect, Esc=Deactivate, Del=Remove Last Ruler, Ctrl+Shift+P=Toggle Toolbar PRIVACY FOCUSED Zero data collection - no analytics, telemetry, or tracking All settings stored locally on your device No external network requests No account required Open and transparent Perfect for web designers, front-end developers, UX engineers, QA testers, and anyone who needs precise measurements on web pages.