Web Design Ruler
Extension Actions
Essential design tools for web designers: pixel-perfect measurements, font identification, and professional color picking.
Web Design Ruler is the essential toolkit for web designers and developers. Extract colors from any element on a webpage - including static images, photos, and product screenshots - identify fonts with precision, and measure pixel-perfect distances.
KEY FEATURES:
🎨 ADVANCED COLOR PICKER
• Pick colors from ANY webpage element - backgrounds, text, images, videos
• Extract exact pixel colors from static images and photographs
• View colors in HEX, RGB, and HSL formats simultaneously
• One-click copy to clipboard
• Automatic recent colors history (last 20 picks)
🔤 SMART FONT DETECTOR
• Identifies the actual rendered font, not just the CSS font-family
• Recognizes system fonts (Segoe UI, San Francisco, etc.)
• Shows complete typography details: size, weight, style, line-height, color
• Copy full CSS font declarations instantly
📏 PIXEL MEASUREMENT TOOL
• Click and drag to measure any distance on the page
• Get width, height, and diagonal measurements
• Perfect for checking spacing and alignment
🎭 COLOR PALETTE MANAGER
• Create and save custom color palettes
• Import/export palettes as JSON files
• Built-in starter palettes included
• Organize colors from your favorite websites
QUICK ACCESS:
• Toolbar popup with tabbed interface
• Right-click context menu on any page
• Keyboard shortcuts for instant activation
Perfect for UI/UX designers, front-end developers, and anyone who works with web design. No account required - all data stays local on your device.