Online Color Tool

Image Color Picker

Upload an image and click anywhere to read the current pixel color. The page shows HEX, RGB, RGBA and HSL at the same time, with quick copy and fine-tuning support.

Click to pick

Click exactly where you need the color

Copy the result

Get HEX, RGB, RGBA and HSL in one place

Fine-tune later

Adjust brightness and opacity for a closer match

Image Color Picker

Upload an image, click anywhere, and get color values you can copy right away

Color reading happens in your browser. Click the image to sample a pixel, then fine-tune and copy HEX, RGB, RGBA and HSL on the right.

Runs in your browser
Step 1: Upload an image first. Drag and drop is supported here.

Step 1

Upload an image to sample colors from

Supports PNG, JPG, WEBP and GIF. After upload, click anywhere in the preview to read that pixel color.

Useful for color references

Posters, screenshots, product photos, and logos all work well when you need to pull out a main color quickly.

Click exactly where you need

Colors are read by pixel, so the HEX and RGB values are ready for design files and code.

Keep fine-tuning

After sampling a color, keep adjusting brightness, opacity and details in the side panel.

After you upload an image, the clickable color preview appears here.

Current picked color

#2563EB

Dark / Opacity 100%

HEX

#2563EB

RGB

rgb(37, 99, 235)

RGBA

rgba(37, 99, 235, 1)

HSL

hsl(221, 83%, 53%)

How To Use

1. Upload the image you want to sample colors from. PNG, JPG, WEBP and GIF are supported.

2. Click anywhere on the preview image and the page reads that pixel immediately.

3. If you want a color that is closer to the final design, keep adjusting brightness, saturation and opacity in the side panel.

4. When the color looks right, copy HEX, RGB, RGBA or HSL into your design file, CSS or code.

FAQ

Why do colors vary slightly inside the same area?

Gradients, shadows, compression noise and anti-aliasing often make neighboring pixels different. Try a few nearby points before choosing the final color.

Which format is better for web development?

Use HEX for most solid colors, RGBA when you need opacity, and HSL when you want to analyze or adjust color relationships.

Can I fine-tune the color after picking it?

Yes. After sampling a pixel, use the color panel on the right to adjust brightness, saturation, and opacity, then copy HEX, RGB, RGBA, or HSL.