Pixeliro — Design Intelligence

🎨 PIXELIRO DESIGN INTELLIGENCE — YOUR DESIGN LAB IN EVERY BROWSER TAB Pixeliro Design Intelligence is the ultimate browser extension for designers, developers, and creative professionals who need to work faster, smarter, and with more precision. Whether you're inspecting a competitor's color palette, testing your brand colors live on any website, auditing accessibility compliance, or exporting design tokens for your dev team — Pixeliro does it all, directly inside your browser, with zero setup required. Built by the team at pixeliro.com — a platform dedicated to brand identity, color systems, and design intelligence — this extension brings professional-grade design tooling to every website you visit. ──────────────────────────────────────── 🔍 FEATURE 1 — CSS COLOR SNIFFER ──────────────────────────────────────── Ever landed on a beautiful website and wondered exactly what colors they're using? The CSS Color Sniffer lets you click on any element on any webpage and instantly extract every design token it uses — background color, text color, border color, and the actual rendered surface color (even when the element is transparent and inherits its background from a parent). HOW IT WORKS: → Click "Activate Sniffer" in the Sniffer tab → Your cursor becomes a precision crosshair → Hover over any element — a purple highlight border follows your mouse → Click any element to capture its design tokens → A floating inspector panel appears with full color details WHAT YOU GET FOR EVERY ELEMENT: • Text color (foreground) with semantic role detection • Element background color • Actual rendered surface color (walks up the DOM tree) • Border color (when applicable) • CSS custom property name (e.g. --color-primary) if the color is defined as a CSS variable • WCAG contrast ratio between text and background • AA accessibility pass/fail badge • HTML tag and class names for precise identification HOVER STATE DETECTION: Many elements — especially buttons, links, navigation items, and form controls — look different on hover. Pixeliro detects both states simultaneously: • Normal state colors (from non-hover CSS rules) • :hover state colors (from hover CSS rules) When a hover difference is detected, the inspector panel shows a Color States section with side-by-side chips for Normal vs :hover, so you capture the full picture in a single click. QUICK ACTIONS FROM THE INSPECTOR: • Copy any hex color to clipboard instantly • Open colors directly in Pixeliro's brand palette generator • Close with the × button or press Escape to deactivate The inspector panel is built with Shadow DOM isolation — its styles never conflict with the host page's CSS, so it looks perfect on every website regardless of their design system. ──────────────────────────────────────── 🎨 FEATURE 2 — LIVE THEME INJECTOR ──────────────────────────────────────── What if you could see how your brand colors look on any website — instantly, live, without writing a single line of code? The Live Theme Injector lets you do exactly that. Choose from 5 built-in presets or set your own custom palette: BUILT-IN PRESETS: • Pixeliro — Deep purple & indigo on near-black • Ocean — Sky blue & teal on dark navy • Forest — Emerald & lime on dark green • Sunset — Orange & red on dark warm • Minimal — Clean black & white CUSTOM PALETTE (6 color slots): • Primary — Main brand color, CTAs, interactive elements • Secondary — Supporting brand color • Accent — Highlight color, badges, special elements • Background — Page background • Surface — Cards, panels, elevated elements • Text — Primary text color Each color slot has a native color picker synced with a hex text input — change either one and the other updates instantly. No need to type hex values manually. WHEN YOU CLICK "INJECT THEME": • A `<style>` tag is injected into the page's `<head>` • CSS custom properties are overridden at `:root` level: --primary, --brand, --accent, --secondary, --background, --surface, --foreground, and their common aliases • Utility class overrides target common framework patterns (Tailwind, Bootstrap, custom) • Links, submit buttons, and primary CTAs update their colors too • Works on most modern CSS-variable–driven design systems RESET INSTANTLY: Click "Reset Theme" to remove the injected styles and restore the original page appearance. No page reload required. PAGE COLOR ANALYZER: Already on a site and want to understand its color system before injecting your theme? Click "Analyze Page Colors" to extract the dominant colors from the page's CSS variables and rendered elements. Pixeliro scans: • All CSS custom properties with color values • Computed colors on key semantic elements (body, header, nav, main, buttons, links) • Sampled foreground, background, and border colors Results appear as clickable color chips — click any chip to copy its hex to clipboard. ──────────────────────────────────────── ♿ FEATURE 3 — WCAG ACCESSIBILITY SCANNER ──────────────────────────────────────── Accessibility is not optional. WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios between text and background to ensure readability for users with visual impairments. Non-compliant websites can face legal exposure, and more importantly — they exclude real people. Pixeliro's Accessibility Scanner audits any webpage in seconds and gives you a complete picture of contrast compliance. HOW THE SCAN WORKS: 1. Click "Scan Page Contrast" 2. Pixeliro finds all text-bearing elements: p, h1–h6, span, a, button, label, li, td, th, caption, figcaption, blockquote, cite 3. For each element, it extracts the rendered text color and actual background surface color (including transparency inheritance) 4. It calculates the WCAG contrast ratio using the official relative luminance formula 5. Each element is classified as AA pass or fail based on its font size and weight WCAG AA REQUIREMENTS: • Normal text (under 18px regular, under 14px bold): minimum 4.5:1 • Large text (18px+ regular…