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 that actually ship, and the workflows that make it fast. It covers version 2.2.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 gets out of the way the moment you press Escape.

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.
• Press Escape to exit.

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.
• 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.
• 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; everywhere else the in-page visual picker is the default.

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.
• 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 a checkmark for a second or two when a copy lands, so you always know what’s active. New installs get a short welcome page on first run.

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.2.0

Version 2.2.0 brings the Firefox build to full parity with Chrome and Edge and folds in a long list of fixes from a top-to-bottom audit. Highlights:

• Copy All Colors on Page harvests every rendered color and copies it as CSS custom properties.
• The Measure tool gained area and Shift-snap, so you get width, height, diagonal, and area with clean grid snapping.
• A full saved-fonts history with live previews, Web Font badges, and per-item Copy CSS.
• Right-click text-color picking while eyedropping.
• A first-run welcome page and a toolbar badge that shows when a tool is armed.

This builds on the 2.0 multi-browser rebuild (Manifest V3, with native Edge support) and 2.1, which 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 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.2.0. Last updated July 2026.