Specimen no. 01 · the eyedropper
Drop, paste or open a picture, hover to magnify, and click any pixel for its HEX, RGB, HSL and OKLCH values. The image never leaves your device.
Drop an image on this sheet
or paste one with Ctrl+V (⌘+V on a Mac)
JPEG, PNG, WebP, GIF, AVIF or SVG. The image stays on your device.
Every color you pick is pressed here and kept in this browser, ready to copy.
Open a picture by dropping it on the sheet, pasting it with Ctrl+V (⌘+V on a Mac) or choosing a file. Move the pointer over it and the loupe magnifies the pixels under the crosshair, so you can land on exactly the one you want; click or tap to pick it. From the keyboard, tab to the image, steer the crosshair with the arrow keys (hold Shift for ten-pixel steps) and press Enter.
HEX and RGB are the same three 8-bit sRGB numbers written two ways. HSL splits a color into hue, saturation and lightness, which makes lighter or duller variants easy to write. OKLCH is the newer CSS notation built on the OKLab color space: its lightness follows how bright a color really looks, which makes it the best fit for building even color scales.
Photos are grainy: neighboring pixels of a plain blue sky can differ by several steps. Set the sample to 3 × 3 or 5 × 5 to average a small square instead of trusting one pixel; keep it at 1 pixel for logos, icons and screenshots. Every pick is added to the tray, which you can copy as a list of HEX codes or as CSS custom properties.
Four more ways to read the colors in a picture.
The 3 to 12 dominant colors of any picture, with their shares, as CSS variables, JSON or a PNG strip.
No. 02The nearest CSS named color and community names for any HEX, RGB, HSL or OKLCH value.
No. 03See an image as it might look with protanopia, deuteranopia, tritanopia or achromatopsia.
No. 04Draw a line across a photo and turn the colors along it into a CSS linear gradient.
No. 05Two free services that help with the rest of a designer's day online.
Free stock photos, mockup kits and palette packs often sit behind an email form. CleanTempMail gives you a temporary inbox straight away: no sign-up, a random or custom address on hundreds of domains, and every message deleted automatically after 3 days.
Collect the download link; keep your real inbox for clients.
Get a temporary inboxFound a free-asset site you have never heard of? Open it in WebTraceCheck's disposable cloud browser, which runs Brave, Chrome, Edge, Firefox or Chromium on an isolated desktop that is deleted after each session, and look up its domain with the free DNS and domain tools first.
Nothing to install, with free browser time every day.
Try WebTraceCheckNo. Your browser decodes and reads the image on your own device. There is no server that receives files, and a loaded page keeps working offline.
Browsers convert photos with an embedded color profile, such as Display P3 pictures from phones, to sRGB before a page can read them, while an editor may show the unconverted numbers. Averaging also shifts the result a little. Flat graphics like logos and screenshots match exactly.
In Chrome and Edge on a computer, the Pick from screen button opens the browser's own eyedropper, which can read any pixel on your screen. Other browsers do not offer it yet; take a screenshot and drop it here instead.
Anything your browser can decode. Pictures longer than 4,096 pixels on their longest side are scaled down to that size before reading, which is still plenty for picking colors.