Best Color Picker Chrome Extensions
Last updated: May 4, 2026
Picking a colour off a webpage is one of the small jobs that comes up constantly in design and frontend work. Sometimes you want a single HEX value off a hero image. Sometimes you want every colour the page uses, sorted. Sometimes you need a gradient or a palette to take into a design tool. The Chrome Web Store has a lot of extensions in this category, and most of them do roughly the same eyedropper trick with different polish. This list ranks the five we’d actually install.
Feature claims are drawn from each extension’s official Chrome Web Store listing and site.
Quick Comparison
| Extension | Standout Feature | Best For |
|---|---|---|
| 1. Screen Ruler | Eyedropper plus full page palette extraction and contrast checks | Sampling colour inside a real workflow |
| 2. ColorZilla | CSS gradient generator alongside the eyedropper | Designers who also need gradients |
| 3. Eye Dropper | Focused eyedropper with saved palettes | A clean, no-frills colour picker |
| 4. ColorPick Eyedropper | Zoomed-in magnifier for precise pixel picks | Hitting the right pixel in a busy image |
| 5. Site Palette | Generates a full palette from any website | Designers building reference palettes |
Our Pick
1. Screen Ruler
Screen Ruler is a measurement and inspection tool with serious colour features baked in. The Color Picker uses the browser’s native eyedropper to sample any pixel and auto-copies it to your clipboard in your chosen format. The Page tab takes that further: it pulls every unique colour the page uses, groups them by where they’re applied (text, background, border), and lets you hover a swatch to highlight every element on the page using that colour. Contrast is checked automatically against WCAG 2.1 thresholds.
Key Features
- Native browser eyedropper that auto-copies to clipboard
- Full-page colour extraction grouped by text, background, and border
- Hover any swatch to highlight every element using that colour
- HEX, RGB / RGBA, HSL / HSLA, and HSB / HSBA formats with a global format dropdown
- Modern colour spaces normalised:
oklch(),oklab(),lch(),lab(),hwb(),color() - Automatic WCAG 2.1 contrast checking with AA / AAA detection
- Pairs with element inspection, layout grids, page rulers, and screenshots in one extension
Summary
Best if you want a real colour picker that also extracts page palettes, checks contrast, and lives inside a full inspector.
Add to Chrome2. ColorZilla
ColorZilla is the long-running category leader. The eyedropper samples any pixel on the page; alongside it you get a colour picker, a webpage colour analyser that lists every colour in use, an Ultimate CSS Gradient Generator, and a colour history. It’s the most complete toolkit on this list, even if updates have slowed.
Key Features
- Eyedropper with multiple sample sizes
- Advanced colour picker with HSV component manipulation
- Webpage colour analyser that lists every colour on the page
- Ultimate CSS Gradient Generator
- Colour history and palette viewer
- Element information display and clipboard integration
Summary
Best for designers who want one toolkit covering eyedropper, gradients, and full-page colour analysis.
View on Chrome Web Store3. Eye Dropper
Eye Dropper is the focused, no-clutter choice. Two clicks pick a colour. Sampled values can go straight into your custom palettes, and the extension supports the standard formats (HEX, RGB, HSL, HSV). It’s been actively developed since 2010 and emphasises a small footprint and user privacy.
Key Features
- Two-click eyedropper from any visible pixel
- Customisable palettes for saving sampled colours
- HEX, RGB, HSL, and HSV output
- Lightweight, privacy-emphasised design
- Manifest V3, actively maintained
Summary
Best if you want a clean, focused eyedropper with palette saving and nothing else.
View on Chrome Web Store4. ColorPick Eyedropper
ColorPick Eyedropper’s differentiator is magnification. A draggable preview zooms into the pixels under your cursor so you can pick exactly the right one in a busy image or thin border. It also offers webpage region magnification useful for alignment checks. Open source on GitHub, with desktop and mobile versions also available.
Key Features
- Zoomed magnifier preview for precise pixel selection
- Draggable preview window
- Webpage region magnification for alignment checks
- Lossless PNG-quality colour detection
- Open source on GitHub
Summary
Best when you need to land on the right pixel in a tight or busy area without margin for error.
View on Chrome Web Store5. Site Palette
Site Palette takes a different angle to everything else on this list. Instead of picking a single pixel, it generates a colour palette for any website you visit, ready to share or take into a design tool. CSS colour extraction is included, and it integrates with Google Art Palette, coolors.co, and Adobe Swatch.
Key Features
- Generates a full colour palette from any website
- CSS colour extraction
- Sharing built in, with Google Art Palette and coolors.co integration
- Adobe Swatch export
Summary
Best for designers who want full reference palettes from any site, not single-pixel picks.
View on Chrome Web StoreFAQ
What is a color picker Chrome extension?
A color picker Chrome extension lets you sample the exact colour of any pixel on a webpage and copy it as a CSS-ready value (HEX, RGB, HSL, and so on). Most extensions add helpers around that core eyedropper: saved palettes, page-wide colour extraction, contrast checking, gradient tools, or magnified previews. Designers, frontend developers, and accessibility reviewers reach for one constantly to grab brand colours, copy values out of mockups, or audit what a page is actually rendering.
What’s the difference between a color picker extension and Chrome DevTools?
Chrome DevTools includes an eyedropper inside the colour-value editor in the Styles pane, but using it means opening DevTools, finding the relevant rule, and clicking through the colour swatch first. A dedicated color picker extension is a single click from the toolbar, samples colours regardless of which CSS rule they came from, and usually adds palette saving and multi-format output that DevTools doesn’t.
How accurate are these color values?
Most modern color picker extensions read the rendered pixel value directly via the browser’s native EyeDropper API, so the value reported is the exact one your screen is displaying. The catch is that pixels rendered through transparency, gradients, or anti-aliased edges may not match the underlying CSS variable; the eyedropper reports what’s on screen, not the source value. For source colours, use a page-palette extractor that reads computed styles instead.
Which color picker also extracts full page palettes?
Screen Ruler extracts every unique colour on the page and groups them by usage (text, background, border), with a hover-to-highlight that shows you exactly where each colour is applied. It also normalises modern CSS colour spaces (oklch(), oklab(), lch(), lab(), hwb(), color()) and runs WCAG 2.1 contrast checks automatically.
Are these extensions safe to install?
Reputable color picker extensions only read pixel values and computed styles locally, and don’t transmit your browsing data. Before installing any of them, check the requested permissions on each Chrome Web Store listing. A color picker should typically only need activeTab and scripting, and shouldn’t need broad access to your browsing history or personal data.
Will they work in Brave, Edge, Arc, or Vivaldi?
Yes. Color picker extensions install via the Chrome Web Store and run on every Chromium-based browser. Screen Ruler requires Chrome 116 or later (or the Chromium-based equivalent of that version).