MUTools

Other

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.

Related Tools

QR Code Generator

Create QR codes for URLs, Wi-Fi, email, SMS, phone, contacts, geo, and events. Pick size, color, and logo. They never expire. Runs entirely in your browser.

Random Picker

Randomly pick 1–N entries from a name list or number range, with no-duplicate mode, reel animation, and saved history. Runs entirely in your browser.

Pomodoro Timer

A free online Pomodoro timer with 25/5 focus and break cycles, circular progress, alarms, full-screen, and a pop-out window. Runs entirely in your browser.

Color Code Converter

Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.

Contrast Checker

Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.

Unit Converter

Convert length, weight, temperature, area, volume, and speed — cm to inches, Celsius to Fahrenheit, kg to lbs, and more. Runs entirely in your browser.

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.