One Ruler

One Ruler to rule them all: page ruler with guides, element sizes and a color picker. Pixel-precise, in px, rem and %.

Ruler: guides, measuring and color picker for any web page Drag guide lines onto any page and see exactly how far everything is from the edges. Built for designers and developers who check spacing, alignment and colors in the browser. GUIDES AND MEASURING • Drag guides in from any edge of the page, move them, delete them • Every guide shows its distance to both edges, in px, rem or % • View mode measures against the visible window, Page mode against the whole document • Hover a guide or drag it to see arrows with the pixel distance to its neighbors • Hold Ctrl and hover between guides to see the exact width × height of that box • Guides snap to edges, quarters, the center, other guides and the middle between two guides (hold Alt to move freely) • Undo and redo for all guide changes • Guides stay visible on dark and light backgrounds COLOR PICKER • Pick any pixel with the eyedropper • Pick an element and get every color inside it, sorted by how much area it covers • HEX, RGB and OKLCH, one click to copy • Recent and Saved colors, including whole color groups MADE FOR FAST WORK • Minimize the panel to a small dock that snaps to any screen edge and adapts to light or dark pages • Customizable keyboard shortcuts for almost every action, shown in the button tooltips • Guides are remembered per browser tab, saved colors per website PRIVACY Ruler collects no data and sends nothing anywhere. Everything stays in your browser. By yogspace, mxwr.de