DEV Community

An Hoang Gia
An Hoang Gia

Posted on

How to Get the Exact HEX Color From Any Image (3 Free Ways)

#css #webdev #tutorial

Every frontend dev hits this at some point: a designer sends you a screenshot, a client sends a logo, and you need the exact HEX value of a color in it. Here are three quick ways to grab it — no Photoshop required.

1. Browser DevTools (built-in eyedropper)

Chrome and Edge have a hidden eyedropper inside DevTools:

  1. Open DevTools (F12) and inspect any element with a color or background-color property
  2. Click the little color swatch in the Styles panel
  3. The eyedropper is now active — hover anywhere on the page and click

Limitation: it only works on colors inside the current page. If your color lives in a JPG someone sent you in Slack, you first have to open that image in a tab.

2. The EyeDropper API (do it in your own code)

Modern Chromium browsers ship a native EyeDropper API, so you can build color picking into your own tools:

const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
console.log(sRGBHex); // e.g. "#7c3aed"
Enter fullscreen mode Exit fullscreen mode

It returns the color of any pixel on the screen — even outside the browser window. Support is still Chromium-only (no Firefox/Safari as of 2026), so feature-detect with if ('EyeDropper' in window).

3. Upload the image to a color picker tool

When you need more than one pixel — say, the full palette of a brand image — an image color picker is faster. I built ColorTools exactly for this workflow:

  1. Open colorpicker.cx/color-picker
  2. Drop in any image (it never leaves your browser — processing is client-side)
  3. Click any pixel to get HEX, RGB and HSL, or let it extract the dominant palette automatically

From there you can jump straight into the contrast checker to verify WCAG AA/AAA compliance of the colors you just picked — handy when the "brand color" a client insists on is a 2.1:1 disaster on white.

Bonus: converting between formats

Got the HEX but need HSL for your CSS custom properties? The conversion is one formula, but if you do it rarely, a converter is quicker than remembering the math.

What's your workflow for grabbing colors — DevTools, a desktop app, or something else? Curious what everyone uses in 2026.

Top comments (0)