All tools Image Color Picker ● Live Image / Inspection

How Image Color Picker works

  1. Upload an image by clicking the upload area or dragging it in.
  2. Move your mouse over the image to see the color under the cursor in HEX, RGB, and HSL.
  3. Click on the image to pin the current color to your palette.
  4. Build a palette of up to 10 pinned colors.
  5. Click the copy button next to any pinned color to copy its HEX value.
  • Extract exact colors from a design mockup or screenshot for use in CSS.
  • Build a color palette from a photo for a design project.
  • Identify the precise brand colors used in a logo image.
  • Match a UI color from a competitor's website screenshot.
  • Pick colors from inspiration images for a moodboard.

All color reading happens locally via the canvas API. Your image is never uploaded to a server.

  • Maximum of 10 pinned colors per session — refreshing the page clears the palette.
  • Color accuracy depends on how the browser renders the image, which can be affected by color profiles.
  • Only HEX, RGB, and HSL formats are shown — no CMYK or Pantone matching.

Image Color Picker

Image Color Picker displays any uploaded image on a canvas and shows the pixel color under the cursor in HEX, RGB, and HSL as you move your mouse. Click to pin a color to a persistent palette (up to 10 colors), each with a copy-HEX button.

Image Color Picker Runs locally
Guide

How to use

  1. Upload an image by clicking the upload area or dragging it in.

  2. Move your mouse over the image to see the color under the cursor in HEX, RGB, and HSL.

  3. Click on the image to pin the current color to your palette.

  4. Build a palette of up to 10 pinned colors.

  5. Click the copy button next to any pinned color to copy its HEX value.

Scenarios

Use cases

  • Extract exact colors from a design mockup or screenshot for use in CSS.

  • Build a color palette from a photo for a design project.

  • Identify the precise brand colors used in a logo image.

  • Match a UI color from a competitor's website screenshot.

  • Pick colors from inspiration images for a moodboard.

Good to know

Limitations & Privacy

Private by design

All color reading happens locally via the canvas API. Your image is never uploaded to a server.

  • Maximum of 10 pinned colors per session — refreshing the page clears the palette.

  • Color accuracy depends on how the browser renders the image, which can be affected by color profiles.

  • Only HEX, RGB, and HSL formats are shown — no CMYK or Pantone matching.

FAQ

Frequently asked questions

How accurate is the color picking?

The tool reads exact pixel values from the canvas at the cursor position, accurate to the 8-bit-per-channel precision of the image as rendered by the browser.

Can I use this on photos?

Yes. Drop any JPG, PNG, or WebP photo and start picking colors immediately — the tool works on any raster image the browser can display.

What color formats are shown?

HEX, RGB, and HSL values are all shown simultaneously for the pixel under your cursor, so you can copy whichever format your project needs.

How many colors can I pin to the palette?

Up to 10 colors can be pinned at once. Click on the image to add the current color under your cursor to the palette.

Can I copy a pinned color's value?

Yes. Each pinned color has a copy-HEX button that copies the hex code to your clipboard with one click.

Does this work on images with transparency?

Yes. Picking a color from a transparent area returns the underlying pixel color; the alpha channel itself isn't displayed as a separate value.

Can I use this to extract a brand's color palette from a logo?

Yes — upload the logo image and hover over each distinct color to read its exact HEX value, then pin the colors you need.