MUTools

Color Picker

Color Picker extracts colors (color codes) from an image. Load an image file or an image URL and click anywhere with the loupe to read the color at that pixel.

Drag an image here

or

PNG / JPG / WebP / GIF / BMP / SVG supported (up to 20MB). .png,.jpg,.jpeg,.webp,.gif,.bmp,.svg

Extracted colors0

Click a pixel on the image to add a color here.

About Color Picker

Color Picker extracts colors (color codes) from an image. Load an image file or an image URL and click anywhere with the loupe to read the color at that pixel.

Switch the captured color between HEX (#RRGGBB), RGB, and HSL formats. The loupe magnification toggles between 5×, 10×, and 20×. Build a palette by picking multiple colors and copy it as JSON or CSS variables for direct paste into design comps, style guides, or code.

Chromium-based browsers can also use "Pick from screen" (EyeDropper API) to sample any pixel on the desktop, not just inside an image. Loaded images are processed entirely in your browser and never sent externally. Runs entirely in your browser.

How to use

  1. Upload an image file or paste an image URL.
  2. Hover the image to reveal the loupe. Pick its magnification: 5× / 10× / 20×.
  3. Click anywhere you want to sample at pixel precision — the color is added to the palette.
  4. Switch the value format between HEX / RGB / HSL.
  5. On supported browsers, click "Pick from screen" to sample colors from anywhere on the desktop.
  6. Click "Copy JSON" or "Copy CSS variables" to export the palette.

Use cases

  • Web designers and front-end engineers pulling colors out of design comps to implement as CSS variables.
  • UI designers analyzing reference screenshots from competitor sites or example designs.
  • Brand owners collecting brand colors from photos or assets to build a palette guide.
  • Illustrators and photographers pulling a precise color from a specific part of an image.
  • Business users matching the color of a chart or figure in a doc to a reference image.

Notes

  • The "Pick from screen" feature (EyeDropper) works only in some Chromium-based browsers. It does not appear in Firefox, Safari, or other non-supporting browsers.
  • When loading from an image URL, the image server must allow CORS or getImageData will fail.
  • Colors are read in the sRGB color space. Wide-gamut images (e.g., Display P3) yield sRGB-converted values.
  • The loupe may show a color that looks slightly off versus the full image due to neighboring pixels.
  • This tool reads a single pixel — it is not designed for AI-style 'dominant color extraction' from a whole image.

FAQ

Are images uploaded to a server?
No. Color extraction happens entirely in your browser, so internal design assets or personal photos are safe to use here.
I pasted an image URL but the color cannot be read.
If the image's host does not allow cross-origin access (CORS), the browser blocks color reads. Download the image locally and upload it instead.
What is the difference between HEX / RGB / HSL?
HEX is the #RRGGBB hexadecimal notation; RGB expresses red / green / blue intensity on 0–255; HSL describes hue / saturation / lightness. CSS uses HEX and RGB widely, while HSL is convenient for hue-centric tweaks. The same color switches between all three with one click here.
"Pick from screen" is not visible.
EyeDropper API support is required, which is available on Chromium browsers (Google Chrome / Microsoft Edge / Brave and so on). Firefox and Safari do not yet support it, so use the upload flow instead.
Can I bring the colors into Figma / Sketch / Photoshop?
Copying the HEX is enough for most design tools. To bring in multiple colors at once, copy "JSON" or "CSS variables" and import via the plugin or import feature of the target tool.