CSS color sniffer · Live theme injector · WCAG a11y scanner · Design token extractor. Your design lab for every tab.
🎨 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:
- Click "Scan Page Contrast"
- Pixeliro finds all text-bearing elements: p, h1–h6, span, a, button, label, li, td, th, caption, figcaption, blockquote, cite
- For each element, it extracts the rendered text color and actual background surface color (including transparency inheritance)
- It calculates the WCAG contrast ratio using the official relative luminance formula
- 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, 14px+ bold): minimum 3.0:1
SCAN RESULTS PANEL SHOWS:
• Total elements scanned
• AA Pass count (green)
• Failure count (red)
• List of up to 12 failing elements with:
- Text and background color chips
- Element tag name
- Actual contrast ratio vs required ratio
- Text snippet so you can identify the element
VISUAL OVERLAYS ON THE PAGE:
Failing elements are marked with colored overlays directly on the page:
• Red overlay + badge for critical failures (contrast below 2:1)
• Orange overlay + badge for moderate failures (2:1 to threshold)
• Each badge shows the actual contrast ratio and the required minimum
• Overlays are positioned absolutely — they scroll with the page and stay anchored to their elements
Clear all overlays at any time with the "Clear Overlays" button, or re-scan after making design changes.
────────────────────────────────────────
🛠 FEATURE 4 — DESIGN TOKEN EXPORTER
────────────────────────────────────────
Captured a great color palette with the sniffer? Export it instantly in the exact format your codebase needs.
EXPORT FORMATS:
CSS Custom Properties:
:root {
--color-primary: #8B5CF6;
--color-surface: #141418;
--color-text: #F1F5F9;
}
SCSS Variables:
$color-primary: #8B5CF6;
$color-surface: #141418;
$color-text: #F1F5F9;
Tailwind Config (theme.extend.colors):
{
"primary": "#8B5CF6",
"surface": "#141418",
"text": "#F1F5F9",
}
JSON Token File:
{
"primary": "#8B5CF6",
"surface": "#141418",
"text": "#F1F5F9"
}
All formats are copied to your clipboard instantly. The export output also appears in a text area so you can review it before pasting.
OPEN IN PIXELIRO:
Every color you capture can be sent to pixeliro.com's brand color palette generator with one click. Pixeliro analyzes your colors and generates:
• Full brand palette variations
• Tint and shade scales
• Complementary & analogous color suggestions
• Export-ready design token files
────────────────────────────────────────
⚡ PERFORMANCE & PRIVACY
────────────────────────────────────────
ZERO TRACKING. ZERO ANALYTICS.
Pixeliro Design Intelligence does not collect, store, or transmit any data about the websites you visit or the colors you capture. Everything runs locally in your browser.
SESSION PERSISTENCE:
The last captured color set is stored in Chrome's session storage (cleared when you close the browser). This means if you activate the sniffer, close the popup, click an element, and reopen the popup — your results are waiting for you. No cloud sync, no account required.
CONTENT SCRIPT SAFETY:
• The hover overlay and inspector panel are fully isolated using Shadow DOM
• Injected elements never interfere with the host page's layout or JavaScript
• All event listeners are removed when the sniffer is deactivated
• The extension gracefully handles cross-origin stylesheets (CORS-restricted sheets are skipped)
MINIMAL FOOTPRINT:
• Content script is lightweight (~600 lines of vanilla JavaScript)
• No external dependencies, no npm packages, no bundler
• Works on virtually every website including SPAs (React, Vue, Angular), static sites, and CMS platforms
DOES NOT WORK ON:
• chrome:// pages (browser restriction)
• chrome-extension:// pages (browser restriction)
• Some edge cases with native OS-rendered controls (e.g. native select dropdowns on macOS)
────────────────────────────────────────
🎯 WHO IS THIS FOR?
────────────────────────────────────────
UI/UX DESIGNERS
Analyze any website's color system instantly. Capture inspiration from competitor sites. Verify that your design's colors render correctly in the browser. Test your brand palette live on any reference site without touching Figma.
FRONTEND DEVELOPERS
Extract exact color values and CSS variable names from any live site. Export tokens in the format your project already uses (CSS vars, SCSS, Tailwind, JSON). Skip the guesswork — see what getComputedStyle actually returns.
DESIGN SYSTEM ENGINEERS
Audit entire pages for WCAG contrast compliance in seconds. Identify accessibility regressions before they ship. Export a complete token set from any component library reference site.
BRAND STRATEGISTS & MARKETERS
See how competitor brands use color. Test your brand colors on industry-standard website layouts. Instantly visualize your palette on real web interfaces — not static mockups.
ACCESSIBILITY SPECIALISTS
Run WCAG AA contrast audits on any live website. Get specific, actionable failure reports with element context. Mark violations visually on the page for design team screenshots.
────────────────────────────────────────
🔧 HOW TO GET STARTED
────────────────────────────────────────
- Install the extension
- Navigate to any website
- Click the Pixeliro icon in your Chrome toolbar
- Choose a tab: Sniffer, Theme, A11y, or Tools
- Start capturing, injecting, scanning, or exporting
No account. No sign-up. No API key. Works immediately after installation.
────────────────────────────────────────
🌐 ABOUT PIXELIRO
────────────────────────────────────────
Pixeliro (pixeliro.com) is a design intelligence platform built for modern brand creators. Our tools help you build consistent, beautiful, and accessible color systems — from AI-powered palette generation to brand guideline exports.
The Design Intelligence extension is our way of bringing Pixeliro's capabilities into your existing workflow, wherever you browse. Think of it as having a senior design engineer sitting next to you, ready to inspect any element, audit any page, and export any token — on demand.
We're continuously improving this extension. If you have feature requests, bug reports, or feedback, visit pixeliro.com or reach us through the Chrome Web Store support channel.
Top comments (0)