Color picker from image

How does this color picker from image work?

This color picker from image draws your picture onto a canvas inside the page and reads the red, green and blue value of the pixel you click. Your browser does the reading, so nothing is uploaded.

• Decode: your browser's own image decoder opens PNG, JPG, WebP, GIF, AVIF, BMP and SVG files.
• Read: the pixels are copied once into memory with the canvas getImageData() method, so every hover and click is instant.
• Magnify: the loupe redraws the 11×11 pixels around your pointer at 12 times their size, with a grid, so you can see exactly which pixel you are on.
• Convert: the picked RGB value is converted to HEX, HSL, OKLCH and CMYK with the formulas in the CSS Color Module Level 4 specification.

The sample size switch matters most for photos. A single pixel in a JPG is often a little off from its neighbours because of compression. Averaging 3×3 or 5×5 pixels gives the colour your eye actually sees. For flat graphics, logos and UI screenshots, keep it on 1 px so you get the exact value.

How to get the hex code from a screenshot

Take a screenshot to your clipboard, press Ctrl+V (⌘+V on Mac) on this page, then click the colour. You don't need to save a file first. This is the quickest answer to how to get hex code from a screenshot, and it works for apps, videos and PDFs as well as web pages.

1. Windows: press Win+Shift+S, drag over the area, and the capture goes to your clipboard.
2. Mac: press Ctrl+Cmd+Shift+4 and drag. Holding Ctrl sends the capture to the clipboard instead of the desktop.
3. Chromebook: press Ctrl+Shift+Show windows, select an area, and the screenshot is copied automatically.
4. Come back to this tab and press Ctrl+V or ⌘+V. The screenshot appears in the picker.
5. Hover to find the spot, click, and press Copy next to HEX.

HEX, RGB, HSL, OKLCH or CMYK: which colour code do you need?

Use HEX for most web and design work, RGB when code asks for separate channel numbers, HSL when you want to lighten or darken by hand, and OKLCH for modern CSS palettes. CMYK is only a rough guide for print. Every format describes the same colour, so pick whichever the tool you paste into expects.

OKLCH is newer. Its first number is perceived lightness, so two OKLCH colours with the same L look equally bright, which HSL can't promise. All current browsers support it in CSS. The CMYK value is a plain mathematical conversion; real print colours depend on the paper and the printer's colour profile, so ask your printer before you rely on it.

:root {
  --brand: #1E90FF;                     /* HEX */
  --brand-rgb: rgb(30 144 255);         /* RGB, modern syntax */
  --brand-soft: hsl(209.6 100% 85%);    /* same hue, lighter */
  --brand-ok: oklch(0.652 0.19 253.2); /* OKLCH */
}

How to convert HEX to RGB and RGB to HEX

A hex code is three two-digit base-16 numbers, one each for red, green and blue. To convert hex to RGB, turn each pair into a number from 0 to 255. To go from RGB to hex, do the reverse. Type any code into the Type or paste a colour box above and every format updates at once.

Three-digit codes such as #F80 are shorthand: each digit is doubled, so #F80 means #FF8800. Eight-digit codes add a fourth pair for transparency, so #1E90FF80 is the same blue at about 50% opacity. The converter accepts all of these, plus rgb(), hsl(), oklch() and CSS colour names like tomato.

// hex to rgb
const hex = "1E90FF";
const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16)); // 30, 144, 255

// rgb to hex
const toHex = (...c) => "#" + c.map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
toHex(30, 144, 255); // "#1E90FF"

How to use the eyedropper in Chrome

In Chrome, Edge or Opera on a computer, press Pick from screen above, then click any pixel on your screen, even outside the browser. Press Esc to cancel. This button uses the EyeDropper API, a built-in browser feature, so it works as an eyedropper tool online with nothing to install.

Where it works

Chromium browsers on desktop: Chrome and Edge since version 95, and Opera. Firefox, Safari and all phone browsers don't support it yet, so the button stays disabled there and says why.

What it can see

Only the one colour you click. The page gets back a single sRGB value, not a screenshot, and the browser only opens the eyedropper after you press a button.

Chrome DevTools

Developers have another eyedropper: open DevTools, click any colour swatch in the Styles pane, then the eyedropper icon in the colour picker that opens.

Image color picker vs Google color picker vs extensions

Google's colour picker, the widget that appears when you search "color picker", is a colour mixer: you drag sliders to make a colour and read its codes. It can't read a colour out of an image. An image color picker starts from your picture; an extension reads colours from live web pages.

For a logo file, a product photo or a screenshot from Slack, a color picker from image like this one is the fastest color picker online. If you design for the web all day, add an extension too; our design tools for designers page lists the ones worth keeping, and a font finder extension such as WhatFont pairs well for matching a site's typography.

How to find the color code of an image automatically

You don't always need to pick color from image pixels by hand. Load the image and look at Dominant colours in this image: the picker lists its 5 to 8 main colours with their share of the picture. Click any swatch to get its codes, or Add all to picked to export the whole set as a palette.

The palette uses median cut, a classic colour quantisation method. It sorts a sample of the pixels by their widest colour channel, splits the group at the median, and repeats until it has many small groups. Groups that look almost the same are merged. The final swatches balance how much of the image a colour covers against how different it is from colours already chosen, so a small red button isn't lost behind five shades of sky.

Check colour contrast against WCAG 2.2

Every colour you get from the color picker from image is checked against white and black text using the WCAG 2.2 contrast formula. Body text needs at least 4.5:1 to pass level AA. Large text and UI parts such as icons and input borders need 3:1, and AAA needs 7:1.

Large text means at least 18 point regular or 14 point bold, roughly 24 px and 18.66 px. If a colour fails, try the other text colour or darken it and recheck.

Why a picked colour can differ from the original

A color picker from image reports the exact pixel values in the file, but the file may already differ from the colour you expected. Four things cause most mismatches:

• Compression: JPG and lossy WebP shift pixels slightly. Use 3×3 or 5×5 sampling, or ask for the original PNG or SVG. Our WebP to PNG converter and SVG to PNG converter help when a file won't open.
• Colour profiles: phone photos often use Display P3, which the browser converts to sRGB, so very saturated colours can shift.
• Anti-aliasing: edges of text and shapes blend into the background. Zoom in with the loupe and pick from the middle of a shape.
• Scaled screenshots: on a high-density screen a capture may be scaled, blending neighbouring pixels. Very large images (over 24 megapixels) are read from a smaller copy, and the picker tells you when it does this.

Checking a thumbnail's colours before you upload it? The YouTube thumbnail checker previews it at real sizes.