Pick, extract, mix and analyze colors from any web page - with OKLCH precision.

A polished browser extension for developers, designers and anyone who works with color on the web. Pixel-perfect picking, full-page color extraction, image palette analysis, color mixing in perceptually uniform color spaces, harmony generators, and a CSS gradient builder - all in one extension.

Works in Microsoft Edge, Google Chrome, Brave, Arc, Opera, and any other Chromium-based browser (version 95 or later).

• Features
• Installation
• Usage
• Permissions explained
• Privacy
• Technical notes
• Development
• License

Click the toolbar icon and press Pick, or press Alt+P from anywhere - the browser's native EyeDropper API turns your cursor into a magnifier and samples the exact pixel you click on. The hex code is automatically copied to your clipboard.

• Works on images, videos, canvas, SVG, gradients - anything rendered to the screen
• Press Esc to cancel mid-pick
• On successful pick, a small toast appears on the page confirming what was captured

The Extract button scans the current page and returns every color actually used in it - walking the DOM and collecting color, background-color, border colors, and SVG fills/strokes from computed styles. Results are deduplicated and sorted by frequency of use.

• Click a swatch to copy the hex code
• Click the magnifier icon on a swatch to highlight every element on the page using that color - they get outlined with an accent border so you can see where the color lives in the design
• Copy all or Save all to history

Same Extract button has a dropdown - pick "From an image..." and drop in any local image file. A k-means++ clustering algorithm identifies the dominant colors in the image.

• Slider to choose between 3 and 12 colors to extract
• Pixel-percentage shown for each color
• Handles any image format the browser supports (PNG, JPEG, WebP, SVG, GIF)
• Everything runs locally in the browser - the image never leaves your machine

Blend two colors in your choice of color space:

• RGB - linear interpolation, classic CSS-style blending
• HSL - hue-wheel interpolation (shortest path)
• OKLCH (default) - perceptually uniform blending, gives visually balanced results (yellow + blue = teal, not muddy gray)

Plus six post-blend effects: tint (lighten), shade (darken), saturate, desaturate, warm, cool - each with its own intensity slider.

Given a base color, generate six classic harmony types using OKLCH hue rotation:

• Complementary (180° opposite)
• Analogous (±30° neighbors)
• Triadic (120° and 240°)
• Split-complementary (150° and 210°)
• Tetradic (90°, 180°, 270°)
• Monochromatic (5 lightness variations with chroma compensation)

Because rotations happen in OKLCH (not HSL), harmonies stay perceptually balanced - a 60° rotation produces a shift of equal visual magnitude whatever the starting color.

A visual editor for CSS gradients:

• Linear, Radial, or Conic types
• Draggable color stops on a preview band
• Click anywhere on the track to insert a new stop (color interpolated via OKLCH)
• Per-stop hex + position inputs
• Angle slider for linear/conic
• Live CSS output ready to copy

Your last 24 unique picks persist across sessions. The palette can be exported as:

• JSON - full data with hex, RGB, HSL, timestamps
• CSS - :root { --color-01: #...; } custom properties
• Figma - W3C Design Tokens format (imports via the Tokens Studio plugin)
• Tailwind - drop-in tailwind.config.js snippet

Chromapicker auto-detects your browser's UI language on install and displays the interface in your preferred language. Currently supported:

• English (default, fallback)
• French (français)
• Portuguese (português)
• German (deutsch)

Strings live in _locales/<lang>/messages.json - a translation consists of a single JSON file. Contributions for additional languages are welcome via pull request.

https://chromewebstore.google.com/detail/chromapicker-color-picker/glhdgidjphkmhkfggpjalehpopngbkge

1. Download the latest release from Releases (or clone this repo)
2. Unzip the archive
3. Open edge://extensions or chrome://extensions
4. Enable Developer mode (toggle in top-right)
5. Click Load unpacked and select the unzipped folder
6. Pin the icon from the extensions menu

A welcome page will open on first install with visual instructions for pinning.

Alt+P triggers the picker from anywhere, without opening the popup. The hex is automatically copied to your clipboard and a confirmation toast appears on the page.

You can rebind this shortcut at edge://extensions/shortcuts or chrome://extensions/shortcuts.

• Clicking any HEX/RGB/HSL row in the popup copies that value
• Clicking a history swatch copies its hex and promotes it as the current color
• The Copy all button in Extract/Harmony sheets copies every color as newline-separated hex codes

• Esc - close the currently-open sheet (Mix, Harmony, Gradient, Export, etc.)

Chromapicker requests only the minimum permissions needed to function. Here's what each one does and why:

Chromapicker requests NO access to:

• Browsing history
• Cookies
• Passwords or form data
• Network requests
• Tabs other than the active one
• Downloads, bookmarks, or extensions
• Host permissions (no access to all URLs, no background page scraping)

The commands entry in the manifest registers the Alt+P shortcut - it's not a permission, just a keyboard binding.

No data leaves your browser. Ever.

• No telemetry, no analytics, no crash reports
• No external network requests by the extension (Google Fonts loads the Noto Sans JP font from a CDN for the popup UI only - the extension itself never contacts any server)
• No account, no sign-in, no cloud sync
• Your color history lives in chrome.storage.local and is wiped if you uninstall the extension
• Image palette extraction runs entirely locally using the Canvas API - uploaded images never leave the page

If you care about the Google Fonts request specifically, you can self-host the font by replacing the <link> in popup.html with a bundled @font-face declaration.

Chromapicker uses the browser's native EyeDropper API, available in Chromium 95+. This reads pixels directly from the browser's compositor, giving perfect alignment with the cursor regardless of OS display scaling.

An earlier version attempted a custom picker using chrome.tabs.captureVisibleTab + a canvas-based magnifier. It was rejected because screenshot-based picking introduces sub-pixel offset issues on non-integer display scaling (125%, 150%) that can't be fully compensated for with math alone.

• OKLab / OKLCH conversions use Björn Ottosson's 2020 coefficients. Round-trip accuracy verified for the full sRGB cube.
• Harmony rotations happen in OKLCH polar form so a 60° hue shift is perceptually consistent regardless of starting hue.
• Mixing in OKLab beats naïve RGB for perceptual smoothness (the classic yellow+blue test produces teal, not mud).
• Image palette extraction uses k-means++ seeding for stable cluster initialization, with 12 iterations cap for responsiveness. Pixels are downsampled to a max of 200px on the longest side before clustering.

HSL's lightness channel is not perceptually uniform - hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) look wildly different in brightness despite having the same L value. OKLCH corrects this and is the color space the CSS Color Module Level 4 spec uses as its reference. Modern design systems (Tailwind 4, Radix UI, Panda CSS) use OKLCH internally.

The hero badge row includes a gamut indicator that combines two signals:

1. Display capability - window.matchMedia('(color-gamut: p3)') / rec2020
2. Page authoring - scans all accessible stylesheets for wide-gamut color functions (color(display-p3 ...), color(rec2020 ...), oklch(), oklab(), lab(), lch()) plus inline style="" attributes

The badge shows four states:

• P3 (green) - Page uses wide-gamut colors AND display can show them
• sRGB * (amber) - Page uses wide-gamut colors but display clips to sRGB
• sRGB - Classic sRGB everywhere

The native EyeDropper API always returns sRGB-clamped pixels, so picked colors can't recover wide-gamut data that was already thrown away - but the indicator tells you when the page is authoring wide-gamut content you might want to inspect with dev tools instead.

• Chromium 95+ (for EyeDropper API)
• Manifest V3
• No build step - plain ES2020 JavaScript, CSS, and HTML

chromapicker/
├── manifest.json          Extension manifest (MV3)
├── popup.html             Toolbar popup UI
├── popup.css              All popup styles
├── popup.js               Popup logic: picker, mixer, harmony, gradient, export
├── background.js          Service worker: install, keyboard shortcut, injection orchestrator
├── welcome.html           First-install onboarding page
├── icons/                 Extension icons (16/32/48/128 px)
└── README.md              (You're reading it)

Chromapicker is deliberately build-less. Edit the source files, reload the extension in edge://extensions or chrome://extensions, and you're testing. Keep it simple.

1. Make your changes
2. In the extensions page, click the Reload icon on the Chromapicker card (or click Load unpacked again)
3. Open the popup to see changes - right-click Inspect if you need DevTools
4. For background script changes, also click the Service worker link under the extension to inspect it

Bug reports and feature suggestions are welcome via Issues.

For code contributions:

1. Fork the repo
2. Create a feature branch
3. Test in at least Chrome and Edge
4. Open a pull request describing the change

If you're adding a new color space conversion or a new mixer effect, please include a round-trip / reference-value test in the PR description so the math can be verified.

MIT - do whatever you want. See LICENSE for the full text.

• Built by mthcht
• Color math based on Björn Ottosson's OKLab
• Typography: Noto Sans JP via Google Fonts
• Inspired by ColorZilla - the classic color picker that set the bar