Draftsman Ruler and Color Picker

Draftsman turns any web page into a measuring board. Three tools in one small panel, opened with a click or a keyboard shortcut. Nothing is ever sent anywhere.

RULER
Drag anywhere on the page to measure a box. You get width, height, X and Y position, the diagonal length and the angle, all updating live. Hold Shift for a perfectly straight line. Pixel rulers run along the top and left edges of the window, and dotted guides show the distance from your box to each side. Nudge a placed measurement with the arrow keys.

EYEDROPPER
A magnifying loupe follows the cursor so you can land on the exact pixel. Click to sample the colour: it is copied to the clipboard and added to your palette. Average a 1x1, 3x3 or 5x5 block for a steadier reading, and switch the output between HEX, RGB and HSL. A one-click system picker works as a fallback on pages that block screen capture.

INSPECT
Point at any element to read its size, font size and line height, font family, weight, text and background colour, padding, margin and radius. Click to freeze, then copy any single value or the whole rule as CSS. Margins and padding are shaded like browser dev tools.

MORE
- Draggable panel that remembers its position
- Palette of recent swatches: click to copy, right-click to remove, or export the whole set
- Automatic, light or dark theme
- Default tool, loupe zoom and size, decimal places and more in Settings

PRIVACY
Everything runs inside your browser. Settings and swatches are stored locally with storage.local and never leave your device. Draftsman makes no network requests and contains no analytics or tracking.

HOW TO USE
1. Click the toolbar icon, or press Alt+Shift+R, on any web page.
2. Choose Ruler, Eyedropper or Inspect in the panel.
3. Press Esc or the close button when you are done.