toolgarden.xyz
中文

Image Color Picker

Free online image color picker: upload an image and click any pixel to read HEX, RGB and HSL

Upload image

Current color

Upload an image to start picking

History

Clicking on the image saves colors here

About this tool

The image color picker draws an upload to a canvas, reads red, green, and blue channels at a clicked pixel, and reports HEX, RGB, and HSL equivalents. Sample history helps compare brand colors, backgrounds, and highlights within one image.

A large image may be proportionally reduced for the workspace, with pointer positions mapped to canvas pixels. A single sample can be affected by compression noise, anti-aliasing, transparency compositing, and display scaling, so take several nearby samples before defining a palette.

How to use it

  1. Upload a reference image

    Choose a file that displays correctly and retains as much source quality as possible.

  2. Click the target pixel

    Sample the center of a flat area away from anti-aliased edges and highlights, recording neighbors when needed.

  3. Copy the needed notation

    Use HEX, RGB, or HSL according to the CSS, design application, or documentation convention.

Supported range and limits

Output formats
HEX, RGB and HSL, ready to copy
How to pick
Upload an image and click anywhere to read that pixel's colour
What you get
The displayed pixel value, with no colour-management information attached
Sources of drift
Lossy compression alters pixel values, and wide-gamut images shift when shown in sRGB; the value may not equal the original design token
Typical use
Recovering a palette from a screenshot or reference, or checking an implementation against a design
Next step
Use Colour Converter for HSV, CMYK and other representations

When you would use it

  • Reconstructing interface colors

    Sample buttons, backgrounds, and status colors from a screenshot as a starting point for design review.

  • Building an image-led palette

    Select representative colors from a photograph or illustration for headings, charts, or a themed page.

  • Recovering a palette from a reference image

    Sample point by point from an interface or poster you like and assemble the colours into a palette for your own work.

What to know before you start

  • Neighboring pixels in a compressed image can vary, so one click may not represent the original design color.
  • Results come from decoded screen pixels and do not contain print CMYK or spot-color information.
  • A color value alone does not guarantee readable text; foreground-background contrast still needs testing.

Related concepts

pixel sample
The decoded color-channel values read at one canvas coordinate.
anti-aliasing
Blending edge pixels to make lines look smoother, which changes samples near boundaries.

Frequently asked questions

How do I use the color picker?
Upload an image, then click anywhere on it to read that pixel's HEX, RGB and HSL color values.
Does picking colors upload my image?
No. Color picking happens entirely in your browser and the image is never uploaded.
Can I pull brand colors from a screenshot?
Yes. Upload a mockup or screenshot and click points to sample colors, handy for recreating a UI palette or extracting brand values.
The colour does not match the original design value; why?
Expected. Lossy compression alters pixel values in a screenshot, and wide-gamut material shifts when displayed in sRGB. Picking recovers "the colour it looks like"; exact design tokens have to come from the source file.
Can it pick a colour from anywhere on screen?
You have to screenshot first and upload that. The tool reads the image file you provide and cannot sample pixels from other windows; that needs an OS-level colour picker.

Related tools