Color Picker Pro

A lightweight Chrome extension (Manifest V3) to pick any color from your screen and view/copy it in HEX, RGB, RGBA, HSL, HSV, CMYK, OKLab, and OKLCH.

Load it in Chrome

1. Open chrome://extensions
2. Turn on Developer mode (top right)
3. Click Load unpacked
4. Select the color-picker-extension folder
5. Pin the extension, click the icon, then Pick Color

Works in Chrome/Edge/any Chromium browser that supports the EyeDropper API (Chrome 95+).

Structure

color-picker-extension/
├── manifest.json
├── popup.html
├── popup.css
├── popup.js
├── modules/
│   ├── picker.js      # EyeDropper API wrapper
│   ├── converter.js   # HEX/RGB/HSL/HSV/CMYK/OKLab/OKLCH conversions
│   ├── history.js      # chrome.storage.local history (max 20, dedup)
│   └── clipboard.js    # Clipboard API + fallback
└── assets/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Notes / what's implemented (MVP per PRD)

• ✅ Pick Color button using the native EyeDropper API
• ✅ Large color preview box with auto text-contrast
• ✅ HEX, RGB, RGBA, HSL, HSV, CMYK, OKLab, OKLCH — all computed locally, no external library needed
• ✅ Per-format Copy buttons with a "Copied!" toast
• ✅ History: last 20 colors, newest first, duplicates removed, click to reload, Clear button
• ✅ All data stored locally via chrome.storage.local — nothing leaves the browser
• ⛔ Not included (per PRD's "Not Included" list): palettes, gradient generator, contrast checker, export tools, favorites — left for v2

Known limitation

The EyeDropper API isn't available on very old Chrome versions or non-Chromium browsers (Firefox, Safari). The popup detects this and disables the button with a message instead of failing silently.