Onylogy Color Picker

About

🎯 Pick any color  ·  🎨 Extract any palette  ·  ♿ Check WCAG contrast

Onylogy Color Picker is the fastest, cleanest free color tool for Chrome, Vivaldi, Brave, Edge, and Arc. It turns any website into a complete color reference for your design or development workflow — with a pixel-accurate eyedropper, one-click palette extraction, a live element inspector, a WCAG 2.1 contrast checker, and one-click exports to CSS Variables, Tailwind config, SCSS, JSON, and Kadence Global Palette.

No accounts. No tracking. No paid tier. Just the tool.


━━━━━━━━━━━━━━━━━━━━━━
WHAT YOU GET
━━━━━━━━━━━━━━━━━━━━━━

🎯 PIXEL-PERFECT EYEDROPPER WITH ZOOM LENS
Press the toolbar icon or hit Alt+Shift+P from anywhere. A circular zoom lens follows your cursor with crisp, blocky pixels so you can target individual pixels precisely. Choose between 1×1, 3×3, 5×5, or 9×9 averaged sample modes — perfect for grabbing the exact color of logos and gradients without snagging a stray pixel. Click to capture; the color auto-copies to your clipboard with a clean confirmation toast at the bottom of the page.

🎨 FULL-PAGE PALETTE EXTRACTION
One click extracts a website's complete color palette. We walk the visible DOM, weigh each color by rendered area, and cluster perceptually similar colors in OKLCH space — the same color science modern design systems use. You get back 6–12 colors per page, each labelled with a semantic role hint: likely primary, secondary, accent, or neutral.

🔍 LIVE ELEMENT INSPECTOR
Hover any element on the page and see its background, text, border (all four sides), shadow, gradient, opacity, and CSS custom property values in a clean floating tooltip. We composite alpha through parent layers so you see the actual visible color, not the misleading rgba(0,0,0,0) of a transparent overlay.

♿ WCAG 2.1 CONTRAST CHECKER
Extract a palette and get a complete accessibility audit of every real text/background pair on the page, with AA and AAA badges at both normal and large text sizes. Background gradients and images are honestly flagged as "indeterminate" — no guessing.

📤 DEVELOPER-FIRST EXPORTS
One click copies your palette in the format you actually use:
   ✓ CSS Variables with @supports oklch() fallback
   ✓ Tailwind config (theme.extend.colors)
   ✓ SCSS variables
   ✓ JSON (full hex / rgb / hsl / oklch)
   ✓ Kadence Global Palette (experimental)

⌨️ KEYBOARD-FIRST WORKFLOW
   ✓ Alt+Shift+P  — open the sampler from anywhere
   ✓ 1 / 2 / 3 / 4  — switch between Picker, Palette, A11y, Export tabs
   ✓ C  — copy the current color
   ✓ Esc  — exit

🎨 EVERY MODERN COLOR FORMAT
HEX  ·  RGB / RGBA  ·  HSL / HSLA  ·  OKLCH


━━━━━━━━━━━━━━━━━━━━━━
PERFECT FOR
━━━━━━━━━━━━━━━━━━━━━━

✓ WORDPRESS DESIGNERS
   Extract a client's existing palette in seconds; export directly to the Kadence Global Palette format.

✓ TAILWIND DEVELOPERS
   Land a polished tailwind.config.ts color object in one click, with OKLCH-grade perceptual accuracy.

✓ FRONTEND ENGINEERS
   Inspect computed styles 10× faster than DevTools, with effective background colors composited through transparent layers.

✓ UI / UX DESIGNERS
   Capture inspiration as you browse. Build moodboards from real production sites. Audit contrast before handing off mockups.

✓ ACCESSIBILITY AUDITORS
   Run a real-world WCAG 2.1 contrast audit of every text/background pair on a page, instantly.


━━━━━━━━━━━━━━━━━━━━━━
PRIVACY-FIRST BY DESIGN
━━━━━━━━━━━━━━━━━━━━━━

Zero network requests. No accounts, no telemetry, no analytics, no remote configuration, no version checks. Everything runs locally in your browser. Your recent colors are saved only in your browser's local storage and never transmitted.

Minimum permissions only:
   ✓ activeTab — only acts on the tab you click on
   ✓ scripting — auto-injects so you don't have to refresh tabs that were open before installing
   ✓ storage — saves your recent colors locally

We do NOT request <all_urls> host permissions, never read your tab list, and never touch your cookies or browsing history.


━━━━━━━━━━━━━━━━━━━━━━
OPEN SOURCE
━━━━━━━━━━━━━━━━━━━━━━

100% open source under the MIT license. Built with WXT, React, TypeScript, Tailwind CSS, and the culori color library.

Source code, issues, and feature requests:
github.com/ehasan28/onylogy-color-picker


━━━━━━━━━━━━━━━━━━━━━━

Built and maintained by Ehasanul Haque under Onylogy Studio — an independent studio building open-source tools for designers and developers.

If Onylogy Color Picker saves you time, leave a review — it helps more designers and developers find the tool.