We got tired of installing color picker extensions that demand access to every website we visit. So we built one that doesn't. Color Picker combines an eyedropper, four output formats, WCAG contrast checker, color blindness simulation, harmonies, shades, and persistent history — in a single lightweight popup with only two permissions.
Zero Page-Access Permissions
This extension only uses activeTab and storage. No browsing history access, no network requests, no analytics. Your data stays in your browser.
What You'll Learn
1. Picking Colors
Click the extension icon in your Chrome toolbar to open the popup. The workflow is three steps:
Click "Pick Color"
The button text changes to "Click anywhere to pick…" and the popup content collapses to give you a clear view. Chrome's built-in EyeDropper API activates with a crosshair cursor.
Click any pixel
Move your cursor over any element on any webpage. Click the pixel you want. The color is captured from the screen at exact pixel coordinates.
HEX auto-copied
The HEX value is immediately copied to your clipboard. A teal "Copied" toast confirms it. The popup expands to show the full color swatch, all formats, and the feature panels.
POPUP — PICK FLOW
IDLE
PICKING
RESULT
Browser Requirement
Color Picker uses Chrome's EyeDropper API, available in Chrome 95 and later. If your browser doesn't support it, the popup shows a compatibility message instead of the Pick button.
2. Output Formats
After picking a color, the popup displays it in four formats. Click any format row to copy that value to your clipboard.
| Format | Example | Best For |
|---|---|---|
| HEX | #6366F1 | CSS, design tools, quick sharing |
| RGB | rgb(99, 102, 241) | CSS, JavaScript canvas, programmatic use |
| HSL | hsl(239, 84%, 67%) | Adjusting lightness/saturation, design systems |
| OKLCH | oklch(54.1% 0.233 277) | Perceptually uniform adjustments, modern CSS |
OKLCH is a perceptually uniform color space — changing the lightness value produces consistent visual steps, unlike HSL where the same lightness change looks different across hues.
3. Two-Color Contrast Checker
Open the "Contrast" panel in the popup. You'll see two color slots: text (foreground) and background. Your picked color auto-fills the text slot. You can change either by typing a hex value directly.
Set your text color
The picked color is used as the text (foreground) color. You can type a different hex value in the text input field.
Set your background color
Defaults to white (#FFFFFF). Type any hex value. A swap button lets you flip foreground and background with one click.
Read the results
A live text preview shows the actual combination. Below it: the contrast ratio (e.g., "4.53:1") and three WCAG badges — AA, AA+ (large text), and AAA.
CONTRAST CHECKER PANEL
Text
Background
| Level | Min Ratio | Applies To |
|---|---|---|
| AA | 4.5:1 | Normal text (under 18px or 14px bold) |
| AA+ | 3:1 | Large text (18px+ or 14px+ bold) |
| AAA | 7:1 | Enhanced readability, all text sizes |
Most websites target AA compliance. AAA is recommended for body text where readability is critical (e.g., long-form content, legal text).
4. Color Blindness Simulation
About 8% of men and 0.5% of women have some form of color vision deficiency. The "Color Blindness" panel shows how your picked color appears under three types of dichromacy:
Protanopia
No red cones. Red and green appear similar. Affects ~1% of men. Most common confusion: red vs. brown, green vs. yellow.
Deuteranopia
No green cones. Similar confusion as protanopia but with different brightness perception. The most common form — ~5% of men.
Tritanopia
No blue cones. Blue and yellow appear similar. Very rare (~0.01%). Confusion: blue vs. green, yellow vs. violet.
COLOR BLINDNESS PANEL — EXAMPLE WITH #EF4444
Protanopia
No red cones · #8B8B42
Deuteranopia
No green cones · #A89A33
Tritanopia
No blue cones · #EF3F3F
Algorithm
Simulations use the Machado, Oliveira & Fernandes 2009 model — the same peer-reviewed algorithm that powers Chrome DevTools' built-in vision deficiency emulation. Each simulation row shows the original color, an arrow, and the simulated color with its hex value. Click any row to copy the simulated hex.
5. Color Harmonies
The "Harmonies" panel generates four palette types from your picked color by rotating the hue on the HSL color wheel:
| Type | Hue Rotation | Colors | Use Case |
|---|---|---|---|
| Complementary | +180° | 2 | High contrast, CTAs, accents |
| Analogous | ±15°, ±30° | 5 | Cohesive palettes, gradients |
| Triadic | +120°, +240° | 3 | Balanced, vibrant designs |
| Split-comp | +150°, +210° | 3 | Softer contrast than complementary |
HARMONIES PANEL — EXAMPLE WITH #6366F1
Complementary
Analogous
Triadic
Each palette row shows clickable swatches — click any swatch to copy its hex value. The first swatch in every row is your original picked color for reference.
6. Shades & Tints
The "Shades & Tints" panel generates a 9-step ramp by adjusting the lightness value in HSL space:
4 tints — progressively lighter (+10%, +20%, +30%, +40% lightness)
Original color — centered in the strip, slightly taller as a visual anchor
4 shades — progressively darker (-10%, -20%, -30%, -40% lightness)
SHADES & TINTS — EXAMPLE WITH #6366F1
Click any swatch in the strip to copy its hex value. Useful for building consistent shade scales for design systems, hover states, or border variations.
7. Color History
The bottom of the popup shows your last 10 picked colors, saved to chrome.storage.local — they persist across popup opens, tab changes, and browser restarts.
Click any history item — loads the color into the popup (swatch, formats, all panels) and copies its hex.
Delete individual colors — hover over an item to reveal the × button.
Clear all — requires confirmation (click once to see "Confirm?", click again to clear). Resets after 3 seconds if you don't confirm.
Deduplication — picking the same color again moves it to the top instead of creating a duplicate.
8. Why We Built This
Multiple color picker extensions have been caught injecting tracking code after being sold to new owners. The market leader, ColorZilla, requires "access data on all websites" for basic functionality. And none of them include a contrast checker — you need a separate tool for that. We built Color Picker because the bar was on the floor.
Under the Hood
- Chrome Manifest V3 — the latest and most secure extension platform
- EyeDropper API — Chrome 95+ native browser API for pixel-accurate color picking
- Machado 2009 — peer-reviewed color blindness simulation verified against Chromium source
- Lightweight — no external dependencies at runtime. Fast to install, fast to load.
- Light & dark mode — toggle in the popup header, persisted across sessions
Try Color Picker
Free, private, and lightweight. Two permissions. Six tools in one popup.
Add to Chrome