How to Pick Colors from Any Webpage

You are redesigning a landing page and you want to borrow the exact accent color from a site you admire. You are auditing a brand to make sure all its marketing material uses the same shade of navy. You saw a gradient in a tutorial and you want to recreate it in Figma without eyeballing it. In every one of these cases, the question is the same: what is the exact hex code of that color, right there on screen?

Chrome does not ship a visible eyedropper button in its toolbar, but there are several reliable ways to pull exact color values off any webpage. This guide walks through all of them, from built-in DevTools tricks to dedicated extensions, and explains which method is right for which situation.

Why Would You Need to Pick Colors From a Webpage?

Color picking from a live page sounds niche, but it comes up constantly in design and development work. Here are the situations where a good workflow saves you real time.

• Design inspiration. You see a site with an exceptional color palette and want to study it or borrow specific values for your own work. Eyeballing never gets you to the exact hex.
• Brand consistency audits. Over time, marketing assets drift. A brand audit often requires checking that the "official" primary blue is actually used consistently across every page, banner, and button.
• Competitive analysis. Understanding a competitor's visual language starts with understanding their palette — accent colors, background shades, gradient stops.
• Recreating designs from screenshots. When a client sends a "make it look like this" screenshot, pulling the exact colors out saves back-and-forth review cycles.
• Accessibility testing. To check that text-background contrast meets WCAG AA or AAA standards, you need the actual rendered colors, not the ones in the stylesheet (which may be overridden by cascades or computed layers).
• Debugging visual bugs. When something renders a slightly off shade, being able to grab the actual pixel color helps you track down which CSS rule is firing.
• Replicating color schemes in a design tool. Figma, Sketch, Adobe XD, and Canva all accept hex input. A clean workflow for grabbing colors from a live page feeds straight into your canvas.

Method 1: Chrome DevTools Inspector

For colors defined in CSS, Chrome's built-in DevTools can show you the exact value without any extensions.

1. Right-click the element whose color you want and choose Inspect.
2. In the Elements panel on the left, the selected element is highlighted.
3. In the Styles panel on the right, scroll through the CSS rules. Any color, background-color, border-color, or similar property will have a small colored square next to the value.
4. Click the colored square. A color picker popup appears showing the hex, RGB, HSL, and HWB values all at once. You can copy any of them with one click.

The DevTools inspector has an elegant bonus feature: inside the color picker popup, click the eyedropper icon at the top. Your cursor turns into a magnifier, and you can click anywhere in the page (including images and gradients) to sample a pixel color. This is the closest Chrome gets to a native eyedropper, but it is buried inside DevTools and requires a few clicks to reach every time.

Pros: No installation, works for any CSS color, reveals the source value (not just the rendered one), includes a hidden eyedropper.
Cons: Multi-step workflow, requires opening DevTools, not ideal for picking many colors in a row.

Method 2: Chrome Extension (Recommended)

For everyday color picking, a dedicated Chrome extension is the fastest and most frictionless workflow. The best ones add a toolbar button that, when clicked, immediately gives you an eyedropper cursor ready to sample any pixel on screen.

Here is the typical flow with Color Picker & Palette Manager, our own extension built for this exact workflow:

1. Install the extension from the Chrome Web Store.
2. Navigate to the page you want to pick colors from.
3. Click the extension icon in your toolbar. A color picker panel opens with options.
4. Click the Pick from page eyedropper button.
5. Your cursor becomes a magnifier showing zoomed pixels. Hover over any element — CSS text, background, image, gradient, video frame — and click to sample.
6. The hex, RGB, and HSL values are shown in the panel and copied to your clipboard automatically (depending on your preference).
7. Click Save to palette to store the color in a named palette for reuse on another day or in another project.

The key advantage of an extension over DevTools is speed. A 2-click flow (icon, click pixel) versus a 5-step DevTools walk makes a big difference when you are picking 20 colors from a reference design.

Pros: Fastest workflow, works on any visual element, saves palettes for reuse, toggles between hex/RGB/HSL formats, often includes accessibility contrast checks.
Cons: Requires installing an extension.

Method 3: The Native EyeDropper API (Developers)

Since Chrome 95 (released in 2021), browsers support a native EyeDropper API that any webpage can call via JavaScript. This is primarily for design apps that run in the browser (think Figma web, Canva, or any CSS color picker built into a web form), but you can also trigger it yourself from the DevTools console for a quick one-off pick.

Paste this into the Chrome console on any page and press Enter:

const ed = new EyeDropper();
ed.open().then(r => console.log(r.sRGBHex));

Your cursor becomes an eyedropper. Click any pixel on screen (not just within the current page — it works across the entire desktop on some platforms), and the hex value appears in the console. Press Escape to cancel.

The EyeDropper API is handy if you do not want to install anything and you are comfortable with DevTools. It only returns hex values, though, and you have to paste the code each time unless you save it as a DevTools snippet. For occasional one-off picks, it beats extensions on setup time. For routine design work, it does not.

Pros: Zero install, works system-wide on some platforms, built into Chrome.
Cons: Only hex format, requires DevTools, not saved between sessions.

Method 4: Screenshot and External Editor

Another approach is to capture a screenshot of the page and open it in an image editor — Photoshop, GIMP, Pixelmator, or even Windows Paint — and use the editor's built-in eyedropper tool. This works but is slow and awkward, because you lose context and have to go back to the original source for each new color.

There are two situations where it still has a place: (1) when you need to pick colors from a page that blocks extensions from running (some banks and government sites) and (2) when you want a permanent reference file that captures the exact visual state of the page at a moment in time.

Pros: Works on any captured image, no live-page access needed after the screenshot.
Cons: Multi-step workflow, requires external software, loses link back to the page.

Method 5: Extract an Entire Color Palette at Once

If what you actually want is not one color but every color on a page — say, the complete brand palette of a competitor — picking each one manually is slow and error-prone. Palette extraction tools read the entire page and return a grouped list of every unique color in use, sorted by how often each appears.

In Color Picker & Palette Manager, the Extract palette button scans the currently loaded page and produces a swatch grid of dominant colors. You get:

• Every unique CSS-defined color on the page (text, backgrounds, borders, shadows).
• Dominant colors sampled from images and background-image gradients.
• A frequency count for each, so you can tell primary colors from accent colors.
• One-click copy for each color to hex, RGB, HSL, or as a set of CSS variables.
• A save-to-palette action so the entire set is stored as a named palette.

This is significantly faster than manual picking when you are trying to document an entire brand or theme, and it catches colors that would otherwise be easy to miss (subtle hover states, focus outlines, shadow tints).

Color Format Best Practices

Once you have picked a color, you usually want to paste it somewhere else — a design tool, a stylesheet, a brand guidelines doc, or a chat message. Which format you use matters.

• Hex (#6366f1) is the most widely understood format. Designers, developers, and design tools all accept it. Use hex as your default for sharing and copying colors.
• RGB (rgb(99, 102, 241)) is more convenient when you need to work with opacity, because you can extend it to rgba(99, 102, 241, 0.5) for 50% transparency.
• HSL (hsl(239, 84%, 67%)) is easier to reason about when you want to shift hue or lightness programmatically. Many design systems use HSL for their color scales because you can increment lightness in fixed steps.
• CSS variables (var(--primary)) are what you want inside an actual stylesheet. A good palette manager can export entire palettes as a :root block of CSS variables ready to paste into your code.

A decent color picker extension lets you toggle between all four formats with one click, so you can copy hex to paste into Slack and then copy the same color as RGB to paste into a CSS file without picking it twice.

Frequently Asked Questions

How do I get the hex code of a color on a website?

The fastest way is a Chrome extension like Color Picker & Palette Manager. Click the extension icon, click the eyedropper, hover over any element on the page, and click to copy the hex code. You can also use Chrome DevTools by inspecting an element and reading the color value from the Styles panel, or use the built-in DevTools eyedropper that appears inside any color picker popup.

Does Chrome have a built-in eyedropper?

Chrome has the EyeDropper JavaScript API available to web pages since Chrome 95, but it is only accessible through JavaScript — there is no system-wide eyedropper button in Chrome's toolbar. You can trigger the API yourself from the DevTools console, or you can use a Chrome extension that wraps the same functionality in a single click.

Can I pick colors from images and backgrounds, not just CSS?

Yes. Eyedropper-style Chrome extensions read the actual rendered pixel color on screen, which means they work on images, gradients, videos, SVGs, and any other visual element, not just CSS-defined text and backgrounds. The DevTools inspector only shows CSS colors, so for images and gradients you need an extension or the EyeDropper API.

What is the best format to copy a color in: hex, RGB, or HSL?

Hex is the most portable and widely understood format and is the best default for copying and sharing. RGB is more convenient when you need to tweak opacity (rgba). HSL is easier to reason about when you want to shift hue or lightness programmatically. Good color picker tools let you switch between all three with one click, so you can copy whichever format the receiving tool expects.

How do I extract an entire color palette from a website?

Dedicated palette manager extensions scan the page's CSS and sample dominant image colors, then return a grouped list of every unique color in use. This gives you a clean swatch grid you can copy into your design tool, rather than picking each color manually. For brand audits and competitive analysis, this is dramatically faster than one-by-one picking.