The best color picker Chrome extensions
Color picker or colour picker, 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 color resolves to over its real background, and the contrast ratio of the text on it. It is also the one that takes the whole palette of an image, a video frame or a canvas and copies it for Figma.
Pixel samplers versus CSS readers
An eyedropper reads the color 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 | Yes | 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 color the page uses, a gradient generator that writes the CSS for you, and a picking history that remembers where and when each color 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 color 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 color, the background with its alpha intact, the border, the shadow color — 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 color in use across the page, grouped by role. And when the color you want is inside a picture, press Shift + C and click it: Design Toolkit returns the palette the image is made of, not a single pixel.
- 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
- Colors on hover and focus states, not just at rest
- Whole-page palette
- An eyedropper for any pixel on screen, where the browser supports the EyeDropper API
- Colors from an image, a CSS background, a video frame or a canvas, copied for Figma or as CSS variables, Tailwind or JSON
Weak spot: the eyedropper relies on the browser's EyeDropper API, so it only works where that exists. And it is paid after the trial. How to get the colors from an image.
4. CSS Peeper
CSS Peeper
A designer-shaped summary panel rather than a picker. Select an element and it shows its colors and typography; open the palette view and it lists the page's colors 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 colors 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 color field.
- Authored value and pixel sampling in the same place
- Contrast with the passing region shown visually
- Converts between hex, RGB, HSL and color 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 color 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.
- Taking a palette from a photo, a video frame or a canvas — Design Toolkit, which copies it for Figma or as code.
- Checking accessibility — something that reports contrast: DevTools or Design Toolkit.
- Pulling colors out of a photo or illustration — an eyedropper, since there is no CSS to read.
Colors 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 ChromeNo accountRuns locally14-day refund
Common questions
Why does the color 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 color 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 color 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 color appears.
Can an extension pick a color 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.