How to pick a color from your screen

Open the eyedropper

In Chrome or Edge on a computer, open the free Color Picker, press Eyedropper, then click anywhere on your screen: a logo on a website, a photo, another app. The tool shows that pixel's HEX, RGB and HSL values with a Copy button for each. Press Esc to cancel.

The eyedropper uses a browser feature called the EyeDropper API. Chrome, Edge and other Chromium-based browsers on desktop support it; Firefox and Safari do not yet, so on those browsers the button is hidden. The options below cover them too.

Step by step in Chrome or Edge

  • Open the Color Picker in a desktop Chrome or Edge window.
  • Make sure the thing you want to sample is visible on screen, in another tab, window or app.
  • Press Eyedropper. The pointer turns into a magnifier.
  • Click the pixel you want. The HEX, RGB and HSL boxes update at once.
  • Press Copy next to the format you need and paste it into your design tool or CSS.

Firefox, Safari and phones

The Eyedropper button only appears in browsers that support it. On Firefox and Safari you can still choose a color with the swatch and read its HEX, RGB and HSL values. To sample from the screen, use the built-in tools instead: Firefox has an Eyedropper in its developer tools menu, and on a Mac the Digital Color Meter app (in Utilities) shows the color under the pointer. The macOS color dialog that Safari opens also has its own magnifier.

Mobile browsers do not support the EyeDropper API. On a phone, take a screenshot and open it in an image editor that has a color sampler.

Getting the exact color

  • Zoom in before you click. Edges, text and photos blend neighbouring pixels, so the color one pixel over can be quite different.
  • Screenshots and compressed images can shift colors slightly. For a brand color, check the official brand guide when one exists.
  • Night-light, dark-mode filters and color profiles can change what you see on screen. Turn them off when sampling for print or branding work.

Turning a sampled color into a palette

Once you have a HEX value, HSL makes it easy to build shades: keep the first two numbers and raise or lower the lightness percentage. For example, the picker's default indigo hsl(239, 84%, 67%) gets darker at hsl(239, 84%, 50%) and lighter at hsl(239, 84%, 85%). Our HEX to RGB guide explains how the formats relate.

Quick version

  1. Open the Color Picker in Chrome or Edge on a computer.
  2. Press Eyedropper and click the pixel you want.
  3. Copy the HEX, RGB or HSL value.

Related tools and guides

FAQ

Which browsers support the screen eyedropper?
Chrome, Edge and other Chromium-based browsers on desktop. Firefox, Safari and mobile browsers do not support the EyeDropper API, so the button is hidden there.
Can I pick a color from outside the browser?
Yes, in Chrome and Edge the eyedropper can sample anything visible on your screen, including other apps.
Why is the Eyedropper button missing?
Your browser does not support it. Use desktop Chrome or Edge, or the alternatives on this page.
How do I cancel the eyedropper?
Press Esc. The previous color stays selected.
Why is the color slightly different from the brand color?
Anti-aliasing, image compression and screen filters change pixels slightly. Zoom in and sample a solid area, or use the official brand value.
Is anything uploaded?
No. The color is read by your browser and shown on the page; nothing is sent to our server.