Measure elements. Match fonts. Pick colors.

A free browser extension for Chrome, Edge & Firefox — pixel-perfect measurements, instant font detection, and one-click color picking on any site. No sign-up, no tracking, works offline.

Free forever Zero data collected Open source Works offline
Add to Chrome — Free Add to Edge — Free Add to Firefox — Free
Chrome Web Store Edge Add-ons Firefox Add-ons GitHub Releases
01 // TOOLKIT

Powerful Design Tools

Three essential tools to enhance your web design workflow

Measurement Tool

Get precise measurements of any element on a webpage. Measure width, height, and diagonal dimensions with pixel-perfect accuracy.

Font Detector

Identify fonts used on any webpage. Discover font family, size, weight, style, and other typography details with a single click.

Color Picker

Extract colors from any element on a webpage. Get HEX, RGB, and HSL values to maintain design consistency and efficiency.

In the field live renders of the real popup · v2.3.0

Color picker screenshot: a blue sampled from a page hero, with the popup showing HEX, RGB, HSL and a 5.17 contrast ratio
Color + contrast. HEX, RGB and HSL from any pixel, and a WCAG AA/AAA checker right in the popup.
Font detector screenshot: a headline identified as Inter 30px 800, with the popup listing family, size, weight, style, line height and color
Font detector. Hover any text for the rendered family, size, weight and line height. One click copies the CSS.
Measurement tool screenshot: a 480 by 320 px card with dimension lines, and the popup showing width, height, diagonal and area
Measure. Drag for width, height, diagonal and area. Shift snaps to a 10 px grid.
Palettes screenshot: the right-click menu, a clipboard with CSS custom properties, and a harvested 24-color palette in the popup
Copy All Colors. One right-click harvests a page's whole palette as CSS custom properties.
Sticky tools screenshot: three colors picked in a row, the Options page with Keep tools active checked, and the Esc key
New in 2.3: tools stay active. Pick, pick again, press Esc when you are done. Turn it off in Options if you prefer one-and-done.
02 // OPERATION

How It Works

Simple, intuitive design tools at your fingertips

1

Install the Extension

Add Web Design Ruler from the Chrome Web Store, Edge Add-ons, or Firefox Add-ons. Two clicks, no account.

Web Design Ruler icon pinned to the browser toolbar after a two-click install from the Chrome Web Store, Edge Add-ons or Firefox Add-ons
2

Activate the Tool

Click the toolbar icon and pick a tool, right-click any page, or press Alt+Shift+P, F, or M.

The Web Design Ruler popup with its Activate Color Picker button, the right-click menu entries, and the Alt+Shift+M shortcut
3

Use with Precision

Measure, identify, or pick right on the page. Tools stay active until you press Esc, so you can take several readings in a row.

Measurement tool drawn around a page card: 320 by 200 px with diagonal and area, and the panel reading drag to measure again, Esc to exit
03 // DEPLOY

Installation Guide

Install Web Design Ruler from official stores or as an unpacked extension

The chrome://extensions page in dark mode with three numbered callouts: the address bar, the Developer mode switch, and the Load unpacked button

Install from Official Stores (Best)

For Chrome: Visit the Chrome Web Store and click "Add to Chrome". For Edge: Visit Edge Add-ons and click "Get". For Firefox: Visit Firefox Add-ons and click "Add to Firefox".

Or Download from GitHub Releases

Download the Web Design Ruler extension files from our GitHub Releases page. Save the ZIP file to your computer and extract it.

Open Extensions Page

For Chrome: Type chrome://extensions in the address bar. For Firefox: Type about:addons in the address bar.

Enable Developer Mode (Chrome Only)

Toggle on the "Developer mode" switch in the top-right corner of the Extensions page.

Load Unpacked Extension

Click the "Load unpacked" button and navigate to the folder where you extracted the extension files. Select the folder and click "Select Folder".

Important Warning for Manual Installation

Do not delete or move the extension folder after installation. Since this is an unpacked extension, Chrome needs the folder to remain in its original location. If you delete or move the folder, the extension will stop working.

04 // SECURITY

Privacy & Security

Your privacy and security are our top priorities

No Data Collection

Web Design Ruler operates entirely on your device. We don't collect, store, or transmit any of your data or browsing history to our servers or third parties.

Limited Permissions

Our extension only requests the minimum permissions needed to function. We can only access the active tab when you explicitly activate one of our tools.

Clean Code

No ads, no trackers, no bloat — built with clean, efficient code focused solely on providing helpful design tools, by designers for designers at LXB Studio.

Open & Inspectable

The full source is public on GitHub — inspect exactly what runs in your browser, no black boxes.

Works Offline

All functionality works completely offline. No internet connection is required for the tools to operate after installation.

Why We Built This

As web designers and developers at LXB Studio, we often found ourselves switching between multiple tools to measure elements, identify fonts, and pick colors from websites. This workflow was inefficient and interrupted our creative process.

We built Web Design Ruler to solve these pain points and create a streamlined workflow for ourselves and the design community.

  • Eliminate the need for multiple extensions.
  • Create pixel-perfect designs with accurate measurements.
  • Identify and replicate beautiful typography.
  • Extract exact colors for design consistency.
  • Speed up the web design process.

We've made it free and open because we believe in giving back to the design community that has given us so much.

Web Design Ruler 2.3: the popup with the color tab and contrast checker, beside a page card being measured and color-picked
05 // QUERY

Frequently Asked Questions

Got questions? We've got answers

Which browsers are supported?

Web Design Ruler works with Google Chrome, Firefox, and Chromium-based browsers like Microsoft Edge, Brave, Opera, and Vivaldi. Install from the Chrome Web Store, Edge Add-ons, Firefox Add-ons, or download the extension files directly.

Is Web Design Ruler free to use?

Yes! Web Design Ruler is completely free to use. We created it to simplify web design workflows and give back to the design community.

Can I use the extension on any website?

Yes, you can use Web Design Ruler on any website. However, it cannot be used on browser pages like the Chrome Web Store, Settings, or New Tab page due to Chrome's security restrictions.

Why is it distributed as an unpacked extension?

We offer both options! You can install from official stores (Chrome Web Store and Firefox Add-ons) or download it as an unpacked extension for those who prefer manual installation or want to inspect the code.

Why can't I delete the extension folder?

Chrome loads unpacked extensions directly from the folder location you specify during installation. If you delete or move this folder, Chrome can no longer find the extension files, and it will stop working. This is different from extensions installed from the Chrome Web Store, which are stored in Chrome's internal storage.

How accurate are the measurements?

The measurement tool provides pixel-perfect accuracy based on the rendered elements in the browser. It measures exactly what you see on screen.

Can it identify all fonts?

The font detector can identify any font that's actively loaded and applied to text on the webpage. It cannot identify fonts in images or custom fonts that use non-standard loading methods.

How do I report bugs or request features?

We welcome your feedback! Please contact us through our contact page to report bugs or suggest new features.
SYS // LOG

Version History

Seven releases · Three browsers · One mission

7
Releases
3
Browsers
17
Months Active
0
Bytes Collected
v2.3.0 2026-10-16
Latest Chrome Edge Firefox
Sticky tools · popup remembers your tab
  • Tools stay active until Esc. The color picker, font detector, and measure tool no longer close after a single result — pick, identify, or measure as many times as you need, then press Esc. On by default.
  • New Options toggle, “Keep tools active after each pick or measurement” — untick it for the old one-shot behavior. The change reaches already-open tabs instantly.
  • The popup reopens on the tab you used last instead of always starting on Color.
  • The toolbar badge flashes ✓ on each result and settles back to ● while the tool stays armed.
  • Prompted by a Chrome Web Store review (“every time, it needs to be selected again”). Thanks for the nudge.
  • Clicks and right-clicks that land during the confirmation flash are now swallowed instead of passed to the page, so a click can no longer follow a link out from under the tool.
  • A bare click in the measure tool no longer saves an empty 0 × 0 measurement over your last real one.
  • The native EyeDropper (Chrome/Edge opt-in) stays single-shot — the browser API needs a fresh gesture per open.
  • Verified by a jsdom lifecycle harness across all three builds: sticky and one-shot paths, live toggle, swallowed input.
Manifest: MV3 × 3 Permissions: unchanged Sticky mode: default on
v2.2.0 2026-07-17
Chrome Edge Firefox
Firefox feature parity · deep-check hardening
  • Copy All Colors on Page — one right-click harvests every rendered color, dedupes to hex, and copies them as CSS custom properties (also saved as a palette).
  • Measure tool gains an area readout and Shift-snap — hold Shift to snap to a 10 px grid; width, height, diagonal, and area all copy as CSS.
  • Full saved-fonts history — each entry shown in its own live preview, with a Web Font badge and per-item Copy CSS.
  • While eyedropping, right-click now picks the text color instead of the background.
  • First-run welcome page plus a toolbar badge (green ● while a tool is armed, ✓ when a copy lands).
  • Firefox ships with its own themed starter palette.
  • Edge: tool activation had been silently broken after the MV3 refactor (the background lost the active-tab reference) — restored.
  • Color picker samples image and video pixels through the real drawn rectangle (object-fit aware), so letterboxed or out-of-bounds hovers no longer report a false #000000.
  • The activity badge now tracks its owning tab and clears on tab close or navigation.
  • All six ported features rewritten to current conventions — single-writer storage, no innerHTML, guards throughout — and shipped byte-identical across the Chrome, Edge, and Firefox builds.
  • web-ext lint clean; CI now fails the release if the git tag and the manifest version disagree.
Manifest: MV3 × 3 Permissions: unchanged
v2.0.1 2026-05-23
Firefox
Firefox popup tool buttons fixed
  • Clicking Activate Color Picker / Font / Measure in the Firefox popup now reliably activates the tool. The response handler had been silently unreachable.
  • Clearer error notifications when a tool can't run (browser-internal pages, file:// URLs, restricted tabs).
  • popup.js rewritten as async — browser.runtime.sendMessage is awaited in a try/catch instead of passing a Chrome-style callback.
Manifest: MV3 Files changed: 1 Permissions: unchanged
v2.0.0 2026-01-13
Chrome Edge Firefox
Multi-browser rebuild · Edge native debut
  • Native Microsoft Edge support with a chrome.alarms keep-alive that defeats Edge's ~30-second service-worker termination.
  • Three purpose-built unpacked extensions — chrome/, edge/, firefox/ — each ready to Load unpacked.
  • Modern navigator.clipboard.writeText with graceful execCommand fallback for older contexts.
  • Right-click menus now reappear after a service-worker restart mid-session.
  • Slow first ping no longer mistakenly concludes the content script isn't loaded.
  • Every chrome.* callback now checks runtime.lastError instead of swallowing failures.
  • Duplicate-injection guard — repeated activations don't pile up listeners.
  • Firefox migrates to native browser.* Promise APIs throughout.
Manifest: MV3 × 3 + clipboardWrite, host_permissions + alarms (Edge) Bundle: ~125 KB
v1.1.1 2025-06-10
Firefox
Firefox debut · XSS hardening
  • First-run welcome page, animated toolbar badge (●/✓), nested right-click menu with emoji-prefixed tools.
  • "Copy All Colors on Page" quick-action — walks the DOM, dedupes, copies as CSS variables.
  • Firefox-themed default palette + theme-awareness hooks via browser.theme.onUpdated.
  • All innerHTML writes replaced with createElement + textContent for XSS hardening.
  • Background converted to browser.* Promises + async/await throughout.
  • browser.storage.sync wired up behind a syncEnabled flag for palette sync.
Manifest: MV2 + notifications, <all_urls> Firefox 78.0+
v1.1 2025-06-10
Chrome
First public release · Rebrand to Web Design Ruler
  • Renamed from LXB Studio Design Assistant → Web Design Ruler.
  • Tabbed popup UI — Color, Font, Measure, Palettes — with per-tab activation buttons and result panels.
  • Real palette management: create, rename, delete, import (.json), export. Previous build only stubbed a "coming soon" alert.
  • Recent-colors history — last 20 unique picks, persisted, rendered as a grid.
  • Default palettes expanded from one to three (LXB Studio + Material Design + Neutrals).
  • Four tool scripts collapsed into a single ~28 KB content-script.js.
  • Popup-open shortcut: Ctrl+Shift+E → Ctrl+Shift+R (the "Ruler" letter).
Manifest: MV3 Permissions: unchanged from 1.0 Chrome only
v1.0 ~2025-05-09
Internal · Never shipped
LXB Studio Design Assistant — earliest prototype
  • Three tools (color picker, font detector, measurement) in a single-pane popup.
  • One default palette (LXB Studio brand colors).
  • Palette management was a "coming soon" alert.
  • Standalone eyedropper.js used an 8× magnification screenshot-canvas approach (since absorbed).
Manifest: MV3 Chrome only Status: archived

Full source & details · github.com/LXBStudioLLC/web-design-ruler

Ready to Design with Precision?

Add Web Design Ruler to your browser and measure, match, and pick — right where you work. Free, no sign-up, no tracking.

Add to Chrome — Free Add to Edge — Free Add to Firefox — Free