My tools

Screen color picker

Drop a screenshot and read the exact color of any pixel — HEX, RGB and HSL, updated as you move.

No image yet

Drag an image here, paste a screenshot with ⌘V / Ctrl+V, or choose a file.

PNG, JPG, WebP, GIF and BMP — up to 20 MB and 16 megapixels.

Everything runs in your browser. The image is read from memory and never uploaded.

Where your browser supports it, “Pick from screen” reads a color straight off the screen. If that button is missing, take a screenshot and paste it instead.

Picked colors

Nothing pinned yet — click a pixel in the image.

How to use it

  1. Load an image: drag it in, paste a screenshot with ⌘V / Ctrl+V, choose a file, or press “Load sample”.
  2. Move the cursor over the image — HEX, RGB and HSL update live, with an 11 × 11 pixel magnifier on desktop.
  3. Click or tap a pixel to pin it to the picked list below, then copy any value with one click.
  4. Where your browser supports it, press “Pick from screen” to read a color from anywhere on the screen without loading an image.
  5. Keyboard: focus the image, move the sample point with the arrow keys (hold Shift to move faster), then press Enter to pin the color.
  6. Press “Clear” to reset the image, the reading and the list.

Example

Sample image

ykit-sample.png
1200 × 800 · six color blocks, a gradient and one transparent patch

Reading

#1E5FBF
rgb(30, 95, 191)
hsl(216, 73%, 43%)
Family: Blue · at 240, 180

The reading comes from the raw pixel under the cursor, not from the scaled preview. A fully transparent pixel reports that it has no color instead of showing #000000.

Rules, limits and known issues

  • The family name is a coarse bucket based on hue and lightness — it is not an exact color name.
  • A fully transparent pixel has no color; the tool says so instead of showing #000000. A partly transparent pixel keeps its own RGB and shows an alpha percentage.
  • Values come from the raw pixel, while the preview is scaled to fit: anti-aliased edges blend colors, so sample the inside of a shape rather than its outline.
  • Screen picking needs the browser’s EyeDropper support and a user gesture. When it is unavailable the button is hidden — take a screenshot and paste it instead.
  • One image at a time, up to 20 MB and 16 megapixels. Anything larger is rejected up front rather than silently slowing down.
  • Photos are affected by white balance, compression and screen calibration: a picked value matches the file, not necessarily the real object.
  • No dominant palette, no format conversion, no image editing and no screen ruler — those are separate tools, linked below.

What to do once you have the value.

Color converter — turn this value into other formats

Image palette extractor — the dominant colors of the whole picture

Color scheme generator — build a scheme around it