The best colour picker Chrome extensions
They all give you a hex code. The one difference that matters is whether that code came from the pixel on screen or from the CSS that painted it — and those two disagree more often than you would think.
ColorZilla is the most complete free one: eyedropper, whole-page palette analyser, gradient generator and a history of what you picked. Eye Dropper is the minimal open-source version. Design Toolkit is the one that reports the authored CSS value with its alpha, what the colour resolves to over its real background, and the contrast ratio of the text on it.
Pixel samplers versus CSS readers
An eyedropper reads the colour of a pixel after the browser has finished painting it. Everything stacked at that point is already baked in: a 6% white overlay, a gradient, a mix-blend-mode, a photo underneath. You get one flat number that is accurate about what is on screen and says nothing about how to reproduce it.
A CSS reader asks the element what it was told to be. You get rgba(255, 255, 255, 0.06) — the thing you would actually write in your stylesheet — and separately what it composites to.
Use the first when you are matching something on screen. Use the second when you are rebuilding it.
| Tool | Samples pixels | Reads CSS | Page palette | Contrast | Price |
|---|---|---|---|---|---|
| ColorZilla | Yes | No | Yes | No | Free |
| Eye Dropper | Yes | No | No | No | Free |
| Design Toolkit | No | Yes | Yes | Yes | Trial, then one payment |
| CSS Peeper | No | Yes | Yes | No | Free |
| ColorPick Eyedropper | Yes | No | No | No | Free |
| Chrome DevTools | Yes | Yes | No | Yes | Free, built in |
1. ColorZilla
ColorZilla
The one that has been doing this the longest, and still the most complete free option. Beyond the eyedropper it carries a page analyser that pulls out every colour the page uses, a gradient generator that writes the CSS for you, and a picking history that remembers where and when each colour came from — which is more useful than it sounds when you are three sites into a research session.
- Eyedropper anywhere on the page, with a zoomed loupe for precision
- Whole-page palette analyser
- Gradient generator that outputs CSS
- History with the source URL and timestamp of each pick
Weak spot: it reads the screen, not the stylesheet. On anything translucent or blended, the hex it gives you will not reproduce the effect.
2. Eye Dropper
Eye Dropper
Function over form, deliberately. Pick a colour from the page or from a built-in picker, copy it, done. No account, no dashboard, no upsell, and the source is public if you want to see what it does.
- Genuinely minimal — one purpose, no ceremony
- Open source
- Keeps a short list of recent picks
Weak spot: no palette extraction, no gradients, and the same pixel-sampling limitation as every eyedropper.
3. Design Toolkit
Design Toolkit Ours
Not an eyedropper. Hover an element and it reports what the CSS says — the text colour, the background with its alpha intact, the border, the shadow colour — plus what that background composites to over whatever is really behind it, and the contrast ratio between the two with its WCAG grade. The page palette lists every colour in use across the page, grouped by role.
- Authored values, alpha included, not flattened pixels
- The composited result as well, so you get both numbers
- Contrast ratio and grade without a second tool
- Colours on hover and focus states, not just at rest
- Whole-page palette
Weak spot: it cannot sample an arbitrary pixel, so for colours inside an image or a canvas you still want an eyedropper. And it is paid after the trial.
4. CSS Peeper
CSS Peeper
A designer-shaped summary panel rather than a picker. Select an element and it shows its colours and typography; open the palette view and it lists the page's colours in a grid you can copy from.
- Reads styles, so alpha survives
- Page palette in one click
- Also lists the page's images for download
Weak spot: no contrast checking, no states, and the palette can miss colours that only appear on interaction.
5. ColorPick Eyedropper
ColorPick Eyedropper
A zoomed eyedropper with a magnifier, aimed at picking an exact pixel out of a busy area — a gradient stop, a pixel inside an icon, an anti-aliased edge.
- High zoom for precise pixel targeting
- Simple hex and RGB output
Weak spot: just the picker. Nothing about the page as a whole.
6. Chrome DevTools
Chrome DevTools
Already installed and it does both jobs. The Styles panel shows the authored value; clicking the swatch opens a picker with an eyedropper for sampling anywhere, plus the contrast ratio with AA and AAA lines drawn on the colour field.
- Authored value and pixel sampling in the same place
- Contrast with the passing region shown visually
- Converts between hex, RGB, HSL and colour spaces on click
Weak spot: one element at a time, through a panel. No page-wide palette.
Which one, by what you are doing
- Matching a colour you can see — any eyedropper. ColorZilla if you want the history.
- Rebuilding a component — a CSS reader, so translucency survives.
- Extracting a brand palette — a page analyser: ColorZilla, CSS Peeper or Design Toolkit.
- Checking accessibility — something that reports contrast: DevTools or Design Toolkit.
- Pulling colours out of a photo or illustration — an eyedropper, since there is no CSS to read.
Colours with their alpha, and their contrast
The authored value, what it composites to, and the ratio between text and background — on hover states too. Free for 7 days.
Add to Chrome — free trialCommon questions
Why does the colour I picked not match the CSS on the site?
An eyedropper samples the pixel that was painted, and that pixel is everything stacked there at once — a translucent overlay, a gradient, a blend mode, an image behind it. The CSS that produced it can look nothing like the result. For the authored value you need a tool that reads the element's styles.
Does Chrome have a built-in eyedropper?
Yes. Inspect an element, click the colour swatch in the Styles panel, and the eyedropper in that picker samples anywhere on the page.
How do I get a whole page's palette at once?
Use a page analyser rather than picking one colour at a time. ColorZilla's analyser and Design Toolkit's page palette both walk the page and list what is actually in use, usually ordered by how often each colour appears.
Can an extension pick a colour from outside the browser?
No — extensions are confined to web pages. Screenshot whatever it is, open the image in a tab, and sample it there.