Uwarp

Upload an image to sample colors

Or try an example

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.

  • Click to sample

    Crosshair cursor—one click reads the pixel under the pointer.

  • HEX, RGB, HSL

    Three common formats with dedicated copy buttons.

  • Live swatch

    Large preview of the sampled color next to coordinates.

  • Alpha aware

    RGBA string when the pixel is not fully opaque.

  • Replace image

    Swap uploads without leaving the page.

  • 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.
  • 01

    Click flat areas

    Sample the center of solid color regions—avoid anti-aliased edges for cleaner HEX.

  • 02

    Use PNG for logos

    Vector exports give sharper edges than heavily compressed JPEGs.

  • 03

    Check alpha

    If RGB shows rgba(), the pixel is partially transparent.

  • 04

    Compare multiple clicks

    Click several pixels to compare highlights, midtones, and shadows.

  • 05

    Need a palette?

    Use Get Colors From Image for dominant swatches; return here for one exact pixel.

  • 06

    Replace blurry uploads

    Higher-resolution sources reduce compression artifacts in sampled colors.

When to sample colors from images

Typical uses for pixel color picking.

  • Brand matching

    Pull exact HEX from logos or marketing screenshots for palette alignment.

  • UI design

    Sample interface colors from reference mockups.

  • CSS tokens

    Copy HSL or RGB straight into stylesheets or design systems.

  • Photo references

    Note a specific pixel color from inspiration or competitor assets.

  • Screenshot picks

    Grab hex from app UI captures or social posts.

  • Accessibility checks

    Sample foreground colors before pairing with contrast tools.

Why use this image color picker

Benefits of browser-based eyedropper sampling.

  • Exact pixels

    Reads the bitmap value—not an averaged region.

  • HEX and RGB together

    Find hex and copy RGB or HSL from the same click.

  • No install

    Works in modern browsers with Canvas 2D.

  • Fast workflow

    Upload, click, copy—no account required.

  • Coordinates shown

    See x/y pixel position for documentation.

  • Free

    Unlimited samples on your own files.

Color Picker Tools Compared

Eyedropper from an image versus palette and channel tools.

  • Get Colors from Image (Uwarp)

    Extract a palette of dominant colors instead of one clicked pixel.

  • Browser DevTools eyedropper

    Great on live pages; awkward for arbitrary photo files.

  • Desktop design apps

    Precise but require install; overkill for a quick HEX grab.

  • This image color picker

    Click any pixel on an uploaded image for HEX, RGB, and HSL.

Technical details

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

Sources & References

Authoritative references on color picker interfaces, pixel-level sampling, and the browser technology this tool uses.
  • “A color picker is a graphical user interface widget used to select colors.”
    — Wikipedia — Color picker

    Color picker user interface widget: An image color picker (eyedropper) lets users click any pixel in a photo to capture its exact color value. This article describes the UI conventions for color selection widgets. en.wikipedia.org/wiki/Color_picker

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API (client-side pixel read): This tool uses Canvas getImageData to read individual pixel values at the clicked coordinates. MDN documents how to access and interpret bitmap pixel data in the browser. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
    — W3C — PNG Specification (overview)

    PNG image format: PNG's lossless format preserves exact pixel color values, making it ideal for accurate color picking from source images without compression artifacts. w3.org/TR/PNG/

  • “Color theory is a body of practical guidance for color mixing and the visual effects of specific color combinations.”
    — Wikipedia — Color theory

    Color theory for hue identification: Understanding color models (HEX, RGB, HSL) helps interpret pixel sampling results. The tool presents picked colors in multiple formats for use in design and development. en.wikipedia.org/wiki/Color_theory

Frequently Asked Questions

Quick answers about this tool—open a question to read more.