Web Design Ruler

Essential design tools for web designers: pixel-perfect measurements, font identification, and professional color picking.

Web Design Ruler gives you the three checks you make a hundred times a day, sizes, fonts, and colors, without leaving the page you are looking at. Open the popup, pick a tool, and click around. That is the whole learning curve. MEASURE ANYTHING • Drag across the page to read width, height, diagonal, and area • Hold Shift to snap to a 10 px grid • Copy any value with one click IDENTIFY ANY FONT • Hover any text to see its family, size, weight, style, line height, and color • Shows the font that actually rendered, not just the first name in the CSS stack • Keeps a history of fonts you save, each with a live preview and a copy as CSS button PICK ANY COLOR • Reads HEX, RGB, and HSL from any element, including images and video frames • While picking, a right click grabs the text color instead of the background • Recent colors are remembered automatically, and you can build palettes and share them as JSON files • A built in contrast checker shows your WCAG AA and AAA results as you pick • Copy All Colors collects every color a page uses in one right click, removes duplicates, and puts them on your clipboard as CSS variables FITS THE WAY YOU WORK • Launch from the toolbar, the right click menu, or the keyboard: Alt+Shift+R opens the popup, then P, F, and M jump straight to the picker, font detector, and measure tool • A small badge on the toolbar icon shows when a tool is armed • Light and dark mode, and an options page where you can turn on the native Chrome eyedropper if you prefer it PRIVATE BY DESIGN Web Design Ruler collects nothing. No analytics, no ads, no account, and no network requests at all. Your palettes, fonts, and settings stay in your browser, and the extension keeps working with your internet off. The code is open source under the MIT license, so you do not have to take our word for any of this. Privacy policy: https://webdesignruler.com/privacy.html Source code: https://github.com/LXBStudioLLC/web-design-ruler NEW IN 2.2.0 Copy All Colors on Page, area readout and Shift snapping in the measure tool, a full saved fonts history, right click text color picking, a welcome page for new installs, and the toolbar badge. Plus a long list of small fixes from a full audit of the codebase. Questions or ideas? Open an issue on GitHub or write to LXBStudioLLC@gmail.com. This extension is built by LXB Studio and we actually read those.