Web Design Ruler

Web Design Ruler 📏🎨🔠 | The Ultimate Design Assistant

The essential Chrome extension for web designers and developers who demand accuracy.

Web Design Ruler combines three powerful tools in one sleek extension, eliminating the need to switch between multiple applications during your design workflow:

🔍 Precise Measurement Tool

Measure any element's width, height, and diagonal dimensions with pixel-perfect accuracy
Get exact spacing and alignment information for any webpage element
Perfect for UI audits, responsive design testing, and detail-oriented layout work

🔤 Font Identifier

Instantly recognize any font used on a webpage with a single click
Discover complete typography details including font family, size, weight, and style
Save time searching for perfect typography matches for your projects

🎨 Color Picker

Extract exact colors from any webpage element
Get complete color values in HEX, RGB, and HSL formats
Maintain perfect color consistency across your designs

Simple, Intuitive, and Powerful
Web Design Ruler integrates seamlessly with Chrome, accessible via icon click or right-click context menu. No complicated setup or learning curve - just the essential design tools you need, when you need them.

Built with Privacy in Mind

✅ Works completely offline - no internet connection required
✅ No data collection or tracking
✅ Minimal permissions - only accesses your active tab when tools are explicitly activated
✅ No ads, bloatware, or unnecessary features

What's New in Version 2.0.0

🎨 Revolutionary Color Picker
- Pick colors from most ANY element - images, videos, backgrounds, text, and more (PLEASE provide feedback if this does not work optimally for you)
-Static image support - Extract exact pixel colors from photos, graphics, and screenshots
-One-click selection - Simply click anywhere on the page to capture the color
- Real-time preview - See HEX, RGB, and HSL values simultaneously

🔤 Smarter Font Detection
- Actual rendered font detection - Shows the real font being displayed, not just the CSS font-family stack
- System font recognition - Properly identifies system fonts like San Francisco, Segoe UI, and more
- Complete typography info - Font size, weight, style, line height, and color
- One-click CSS copy - Export complete font styling instantly

🎭 Color Palette Manager
- Create and organize custom color palettes
- Import/export palettes as JSON files
- Built-in starter palettes included
- Save colors from any website with one click

⚡ Performance & Reliability
- Rebuilt from the ground up for Manifest V3
- Faster tool activation and response times
- Improved error handling and user notifications
- Better keyboard shortcuts (ESC to cancel any tool)

🎉 Complete UI Redesign
- Modern, professional interface with tab navigation
- Cleaner, more responsive popup design
- Visual measurement previews
- Recent colors tracking (last 20 picks)

Version 2.0 is a complete rewrite focused on reliability and precision. Whether you're sampling colors from product photos, identifying fonts on landing pages, or measuring spacing between elements - Web Design Ruler delivers accurate results every time.

Made with ❤️ by LXB Studio | Visit webdesignruler.com