Design tool
Pixel Ruler
Drop in a screenshot or mockup and drag to read exact pixel dimensions. Pick colours as HEX or RGBA, magnify to land on the right pixel, and export a PNG with the measurement marked. Nothing leaves your machine.
Drop or paste an image. Click a ruler to add a guide (drag to move, right/⌘-click a ruler to remove). Hold Space or use the middle mouse to pan. Use Ctrl/Cmd + wheel to zoom. Click the image to pin and copy a color. Drag the selection handles to resize.
Four steps
How to measure pixels in an image
- 1
Load an image
Drag a screenshot, mockup or wireframe onto the canvas.
- 2
Drag a selection
Click and drag over the element, width × height reads out live in pixels.
- 3
Pick a colour
Click any pixel to pin its colour, then copy the HEX or RGBA value.
- 4
Export the evidence
Save a PNG with the measurement drawn on for a bug report or review.
What this is actually for
Design systems specify spacing in numbers, 8, 16, 24, 32. Implementations drift. A pixel ruler is how you find out whether that gap is the 24 px the spec says or the 21 px somebody nudged it to, without opening the design file or the dev tools.
- Design QA: compare a built page against the mockup, spacing by spacing.
- Bug reports: “this padding is 21 px, should be 24” with a PNG attached.
- Asset checking: confirm an export is the dimensions you asked for.
- Colour extraction: pull an exact HEX from a screenshot with no source file.
- Competitor teardown: measure a layout you only have a screenshot of.
Device pixels versus CSS pixels
This trips up almost everyone at some point. A CSS pixel is a logical unit; a device pixel is a physical one. On a standard display they are the same. On a 2× Retina screen, one CSS pixel is drawn using four device pixels, so a screenshot of a 100 px element is 200 px wide in the file.
The tool reports the image’s own pixels, which is what you want when checking an asset. If you are comparing against a CSS value on a 2× display, halve the reading, or take the screenshot at 1× to avoid the arithmetic entirely.
The spacing scale worth knowing
Most design systems use a 4 px or 8 px base scale, so real values cluster on 4, 8, 12, 16, 24, 32, 48 and 64. A measurement of 23 px is almost always a 24 that drifted, and knowing the scale tells you immediately whether you have found a bug or a rounding artefact.
Privacy
The image is loaded into a canvas element in your own browser and read back from there. There is no upload, no server processing and no analytics on the content, which is the only reasonable way to handle screenshots that may contain unreleased work or personal data.
Related tools
The aspect ratio calculator works out missing dimensions when resizing, the unit converter translates pixels to physical units at a given density, and the online ruler handles real-world measurement. For layout sketching on paper, dot grid exports as clean SVG.
Answers