Pixel Size Measurer

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.