Pick a color from a website
When you want “that blue on their homepage”, you have two options: read the declared CSS value in DevTools, or sample the rendered pixel. Sampling is quicker and works on images, gradients and canvas, where there's no CSS color to read. This page does the sampling for you in one click.
Last updated
Pick a color — instant, picks from anywhere on screen (even outside the browser).
Screenshot — when you need to pick from another tab without losing focus.
#171717 rgb(23, 23, 23) hsl(0, 0%, 9%) oklch(22.04% 0.0000 0.0) Recent palette (0)
Click Choose what to capture below. Your browser will show its picker for screens, windows, or tabs.
One quick heads-up
How screen capture works
After you click Continue, your browser will switch focus to the window you're sharing. Press Alt + Tab to come back here — your captured frame will be waiting.
How to do it
- Open the target website next to this tab (side by side, or on a second monitor).
- Click “Pick a color” here, then click the pixel on the other site.
- If the site is in a different tab, use “Pick from screenshot”, choose that tab, and pick from the frozen frame with the magnifier.
- Copy the format you need and paste it into your CSS, Figma or brand doc.
Tips and gotchas
- For solid UI colors, confirm with DevTools (Inspect → Computed → color). The declared value beats any sample.
- Semi-transparent overlays give you a blended pixel. The sampled color only applies on that exact background.
- Text is antialiased. Sample a thick heading stroke or a button fill, never thin body text.
- Browser zoom doesn't change colors, but it gives you more flat pixels to hit. Zoom in on tiny icons first.
FAQ
Is sampling a website's colors allowed?
Reading a color value is fine. Colors themselves generally aren't copyrightable, though a full brand identity can be trademarked. Use sampled colors for reference and inspiration, not to impersonate a brand.
Why doesn't my sample match the site's CSS?
Usually transparency, a gradient, a filter, or antialiasing. Check the computed style in DevTools when you need the exact declared value.
Do I need a Chrome extension?
No. The EyeDropper API is built into Chromium browsers and needs no permissions, unlike extensions that request access to every site you visit.