Uwarp

Help Us Improve

—

(—)

Image color picker

Upload a photo and click any pixel to find HEX, RGB, and HSL codes. Free eyedropper color picker—match colors from logos, copy codes in your browser.

What is an image color picker?

An image color picker is an online eyedropper: upload a photo, click a pixel, and read HEX, RGB, and HSL values for that spot. It matches colors from your file for design, CSS, or brand work—it does not scan hardware, look up paint codes, or extract a full palette. All sampling runs locally in your browser.

Picker features

Eyedropper sampling and color output.

  1. Click to sample: Crosshair cursor—one click reads the pixel under the pointer.
  2. HEX, RGB, HSL: Three common formats with dedicated copy buttons.
  3. Live swatch: Large preview of the sampled color next to coordinates.
  4. Alpha aware: RGBA string when the pixel is not fully opaque.
  5. Replace image: Swap uploads without leaving the page.
  6. Private processing: No server upload—Canvas reads pixels locally.

How to find hex from a photo

Steps for eyedropper color picking.

  1. Upload an image: Drop or click in the image panel (15 MB max).
  2. Click a pixel: Use the crosshair on the preview to pick the color you need.
  3. Read the swatch: Check the color panel for HEX, RGB, and HSL values.
  4. Copy a format: Use the copy button beside each field for your design tool or code.

Tips for accurate color sampling

Better picks from photos and graphics.

  1. Click flat areas: Sample the center of solid color regions—avoid anti-aliased edges for cleaner HEX.
  2. Use PNG for logos: Vector exports give sharper edges than heavily compressed JPEGs.
  3. Check alpha: If RGB shows rgba(), the pixel is partially transparent.
  4. Compare multiple clicks: Click several pixels to compare highlights, midtones, and shadows.
  5. Need a palette?: Use Get Colors From Image for dominant swatches; return here for one exact pixel.
  6. Replace blurry uploads: Higher-resolution sources reduce compression artifacts in sampled colors.

When to sample colors from images

Typical uses for pixel color picking.

  1. Brand matching: Pull exact HEX from logos or marketing screenshots for palette alignment.
  2. UI design: Sample interface colors from reference mockups.
  3. CSS tokens: Copy HSL or RGB straight into stylesheets or design systems.
  4. Photo references: Note a specific pixel color from inspiration or competitor assets.
  5. Screenshot picks: Grab hex from app UI captures or social posts.
  6. Accessibility checks: Sample foreground colors before pairing with contrast tools.

Why use this image color picker

Benefits of browser-based eyedropper sampling.

  1. Exact pixels: Reads the bitmap value—not an averaged region.
  2. HEX and RGB together: Find hex and copy RGB or HSL from the same click.
  3. No install: Works in modern browsers with Canvas 2D.
  4. Fast workflow: Upload, click, copy—no account required.
  5. Coordinates shown: See x/y pixel position for documentation.
  6. Free: Unlimited samples on your own files.

Technical details

How pixel sampling works here.

  1. Canvas getImageData: Single-pixel read at mapped coordinates from the displayed canvas.
  2. Click mapping: Pointer position scaled from CSS size to canvas pixel dimensions.
  3. HSL conversion: Standard RGB to HSL math for CSS hsl() strings—no HSV or CMYK output.
  4. Input limits: 15 MB upload; 8192 px max edge on load.
  5. Supported inputs: PNG, JPEG, WebP, and GIF decoded in the browser.
  6. Browser support: Chromium, Firefox, Safari with Canvas 2D.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools