Web Design Ruler

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 • Tools stay active until you press Esc, so you can pick several colors or measure several elements in a row (switch back to one-shot tools in Options) • 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.3.0 Tools now stay active until you press Esc, so you can measure several elements, pick several colors, or identify several fonts in a row without reopening the popup. The popup also reopens on the tab you used last. Prefer the old one-shot behavior? Turn it off in Options. Also fixed: clicks during the brief confirmation flash no longer fall through to the page, and a stray click no longer saves an empty measurement. 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.