The Ultimate Guide to Web Design Ruler: Measure, Match Fonts, and Pick Colors

Web Design Ruler puts three tools every web designer reaches for into one extension: pixel-perfect measurements, real font detection, and a color picker with a built-in contrast checker. One toolbar button, no bloat, and it never sends a byte anywhere.

Whether you’re auditing a competitor’s layout, matching a client’s brand colors, or writing specs for a developer handoff, this guide walks through every tool, the keyboard shortcuts, and the workflows that make it fast. It covers version 2.3.0, current on Chrome, Edge, and Firefox.

Install it

Web Design Ruler runs on Chrome, Microsoft Edge, Firefox, and any Chromium-based browser (Brave, Opera, Vivaldi). Pick your store and you’re done in two clicks.

• Chrome / Brave / Arc / any Chromium browser: Web Design Ruler on the Chrome Web Store → Add to Chrome.
• Microsoft Edge: Web Design Ruler on Edge Add-ons → Get.
• Firefox: Web Design Ruler on Firefox Add-ons → Add to Firefox.

Prefer the source, or want the very latest build? Grab a release from GitHub (the whole thing is open source), or download from webdesignruler.com. To load it unpacked in Chrome or Edge: open chrome://extensions (or edge://extensions), turn on Developer mode, click Load unpacked, and select the chrome/ or edge/ folder. One caveat with unpacked extensions: don’t move or delete the folder afterward, because the browser loads it directly from that location.

The three tools

Open the popup from the toolbar, or jump straight to a tool with a keyboard shortcut or the right-click menu. Each tool draws its overlay right on the page you’re inspecting and stays active until you press Escape, so you can pick, identify, or measure as many times as you need without going back to the popup.

Measure

Drag a box across any part of the page and read its width, height, diagonal, and area, all at once. It’s the fastest way to check spacing, verify a component’s size, or sanity-check a responsive layout.

• Activate it from the popup, the right-click menu, or Alt+Shift+M.
• Click and drag to draw a measurement; the readout follows your cursor and updates live.
• Hold Shift to snap to a 10 px grid for clean, round numbers.
• Copy the width, height, diagonal, or area straight from the popup’s Measure tab.
• Drag again for the next measurement; the previous box clears as you start. Press Escape when you’re done.

Match fonts

Hover any text and the font detector tells you exactly what’s rendering: family, size, weight, style, line height, letter spacing, and color. It reports the font the browser actually drew, not just the first name in the CSS stack, so it recognizes system fonts like Segoe UI or San Francisco correctly instead of guessing.

• Activate it from the popup, the right-click menu, or Alt+Shift+F, then hover text to inspect it.
• Click once to copy the complete CSS declaration, ready to paste. The detector stays active, so keep clicking through the page and press Escape when you’re done.
• Save fonts you want to keep. The Font tab holds a rolling history, each entry shown in a live preview of the actual typeface, with a “Web Font” badge when the page loaded it as one and a Copy-as-CSS button on every item.

Pick colors

Sample the exact color of anything on the page, including backgrounds, text, images, and even video frames. HEX, RGB, and HSL are shown together, and any of them copies with one click.

• Activate it from the popup, the right-click menu, or Alt+Shift+P, then click to grab a color. Click again for the next one; Escape exits.
• While picking, right-click to sample the text color instead of the background underneath it.
• Your last 20 picks are kept automatically in Recent Colors.
• On Chrome and Edge you can opt into the browser’s native EyeDropper in Options. It closes after each pick because the browser requires a fresh click to open it; the default in-page picker stays active.

Check contrast as you pick

A built-in WCAG contrast checker lives right in the Color tab. Set a foreground and a background color and it shows the contrast ratio with AA and AAA pass/fail for normal and large text. For example, #2563EB on white reads 5.17, which passes AA and AA Large. It turns accessibility from a separate audit step into something you can see while you’re choosing colors.

Manage palettes and harvest a whole page

Build palettes as you work: create, rename, and delete them, and import or export any palette as a JSON file to move it between machines or share it with a teammate. A few starter palettes are included to build from, and the Firefox build ships with its own Firefox-themed set.

Need every color a page uses? Right-click and choose Copy All Colors with Web Design Ruler. It walks the page’s rendered styles, dedupes everything to hex, copies the result to your clipboard as CSS custom properties, and saves it as a palette in one move, which is a genuine shortcut when you’re reverse-engineering a design system.

Three ways to launch anything

• The popup. Click the toolbar icon for a tabbed panel: Color, Font, Measure, and Palettes. It reopens on whichever tab you used last.
• The right-click menu. Every tool is one right-click away on any page (“Pick Color”, “Identify Font”, “Measure”, and “Copy All Colors”).
• Keyboard shortcuts. Fastest of all once they’re in your fingers (see below).

A small badge on the toolbar icon shows a green dot while a tool is armed and flashes a checkmark each time a copy lands, then returns to the dot while the tool stays active. New installs get a short welcome page on first run.

Prefer one result at a time? Untick Keep tools active after each pick or measurement in the extension’s Options and every tool goes back to closing itself after a single pick. The change applies immediately, even in tabs that are already open.

Keyboard shortcuts

These are the defaults on Windows and Linux. On a Mac, swap Alt for Option.

Want different keys? Reassign any of them at chrome://extensions/shortcuts (Chrome), edge://extensions/shortcuts (Edge), or in Firefox at about:addons → the gear icon → Manage Extension Shortcuts.

Workflows that make it worth it

Document a design system

1. Walk a site with the font detector and save each typeface you find.
2. Right-click and Copy All Colors to pull the full palette in one shot.
3. Measure the recurring spacing and component sizes.
4. Export the palette as JSON and drop the CSS and measurements into your style guide.

Justify decisions in client presentations

• Show exact measurements to explain a spacing or sizing choice.
• Identify a competitor’s fonts to ground a typography conversation.
• Pull a brand’s colors and check their contrast before you propose them.

Write specs developers can build from

• Copy CSS declarations directly from the font detector.
• Copy measured dimensions from the Measure tab.
• Hand over palettes as JSON so nothing gets transcribed by hand.

One tip if you’re measuring or picking colors mid-development: the browser cache can show you stale styles. We built CacheCannon, a companion extension, to purge the cache in a single click so what you’re inspecting is actually the latest build.

Private by design

Web Design Ruler collects nothing. No analytics, no ads, no account, and no network requests at all: the codebase contains zero calls to fetch or XMLHttpRequest, which you can verify yourself because it’s open source. Your palettes, saved fonts, and settings stay in your browser, on your device, and every tool keeps working with your internet switched off. On Firefox, the manifest formally declares that no data is collected, so the browser shows you that guarantee at install time.

What’s new in 2.3.0

Version 2.3.0 fixes the most common complaint about earlier releases: every tool closed itself after a single pick, detection, or measurement, so repeating one meant a trip back to the popup each time. Now:

• Tools stay active until Escape. Pick, identify, or measure as many times as you need. On by default, with a switch in Options to turn it off.
• The popup remembers your tab. It reopens where you left off instead of always starting on Color.
• The toolbar badge flashes a checkmark on each result and returns to the green dot while the tool is still armed.
• Clicks that land during the brief confirmation no longer pass through to the page, and a stray click in the Measure tool no longer saves an empty measurement.

Permissions are unchanged, and the extension still collects nothing.

Earlier in 2026, 2.2.0 brought the Firefox build to full parity with Chrome and Edge and added Copy All Colors on Page, area and Shift-snap in the Measure tool, the saved-fonts history, right-click text-color picking, the welcome page, and the toolbar badge. Before that, the 2.0 rebuild moved everything to Manifest V3 with native Edge support, and 2.1 added the WCAG contrast checker, Copy as CSS, the Options page with the native EyeDropper opt-in, dark mode, and an accessibility pass. The complete, technical changelog lives on webdesignruler.com and in the GitHub CHANGELOG.

FAQ

Is it free?
Yes, completely, with no premium tier.

Does it work offline?
Yes. Every tool runs locally, so nothing needs an internet connection after you install it.

Will it slow my browser down?
No. It does nothing until you activate a tool, and it loads no third-party code.

Does it collect any data?
No. There is no tracking and no data collection of any kind; the source is public if you want to confirm it.

Which browsers are supported?
Chrome, Edge, Firefox, and Chromium-based browsers including Brave, Opera, and Vivaldi.

Can I move palettes between devices?
Yes. Export a palette as JSON and import it on another machine.

The tool stays on after I pick something. How do I close it?
Press Escape. Tools stay active on purpose so you can take several picks or measurements in a row. If you’d rather they close after one, untick “Keep tools active after each pick or measurement” in Options.

The icon is there but clicking a tool does nothing.
Refresh the page and try again. Tools can’t run on the browser’s own internal pages (like chrome:// or the Add-ons page) or on some restricted tabs; on those you’ll see a brief error badge. For a manual install, make sure you haven’t moved the extension folder.

Does it work on local HTML files?
Yes. On Chrome or Edge, enable “Allow access to file URLs” in the extension’s details page. On Firefox, just open the file.

Get it and get in touch

Install Web Design Ruler and stop switching tools to inspect a page:

• Chrome Web Store
• Edge Add-ons
• Firefox Add-ons
• webdesignruler.com or GitHub Releases for a manual install

Questions, bugs, or a feature you’d love to see? Contact LXB Studio, open an issue on GitHub, or leave a review on the Chrome Web Store or Firefox Add-ons. You can also follow along on X, LinkedIn, and Facebook.

Built by LXB Studio LLC. Covers Web Design Ruler v2.3.0. Last updated October 2026.