Image Color Picker
Click any pixel in an image to instantly get the exact colour value in HEX, RGB, HSL, and CMYK formats. Hover to preview colours before clicking. Build a palette by clicking multiple points and saving the colour samples. Perfect for designers, developers, and brand managers who need to match colours precisely from photos, logos, or reference images.
How to Use Image Color Picker
- 1
Upload your image
Click the upload area or drag and drop a JPG, PNG, WebP, or GIF image. Any image you want to sample colours from works.
- 2
Hover to preview
Move your cursor over the image. A magnified zoom view shows the pixels under your cursor and the current colour values update in real time.
- 3
Click to sample
Click any point on the image to lock in that colour sample. The HEX, RGB, HSL, and CMYK values are displayed and can be copied individually.
- 4
Build a palette
Click multiple points to add colours to your palette. Each sampled colour is saved in the palette row below the image for comparison.
- 5
Copy and use
Click any colour value to copy it to the clipboard. Use the HEX code in CSS, Figma, or any design tool; use RGB for digital art applications; use CMYK for print design.
When to Use This Tool
Quick Reference
About Image Color Picker
The Image Color Picker is an online eyedropper tool that lets you click any pixel in an uploaded image to instantly retrieve its exact color values in hex, RGB, HSL, and CMYK formats. This eliminates the need to open Photoshop or any other design software just to sample a color — simply upload the image, click the pixel, and copy the color code.
The color picker is most useful for:
- Sampling brand colors from a logo to use in CSS, HTML, or design files
- Matching a paint color by uploading a reference photo and extracting the closest hex value
- Identifying the exact color of a UI element in a screenshot for development work
- Creating a consistent color palette by sampling from inspiration photos or mood boards
- Finding the hex codes in a client's style guide image when only the visual is available
Color picking works by reading the exact RGBA pixel values at the click coordinates from the HTML5 Canvas using the getImageData() method. This returns the raw red, green, blue, and alpha values (0–255 each) for that specific pixel. The tool then converts these values to hex (by converting each 0–255 value to two hexadecimal digits), HSL (by applying the standard RGB-to-HSL conversion formulas), and CMYK (by normalizing RGB values and calculating cyan, magenta, yellow, and key). All conversions happen instantly in the browser with no server communication.
Input formats: JPG, PNG, WebP, BMP, GIF. Output formats: Hex (#RRGGBB), RGB (0–255 each channel), HSL (degrees, %, %), CMYK (0–100 each channel). Zoom: magnifier lens shows a zoomed preview around the cursor for precise pixel selection. History: last 10 sampled colors are displayed for easy comparison. Copy: click any color format to copy it to clipboard.
All image data stays in your browser — nothing is uploaded to any server. The Canvas pixel manipulation is entirely client-side. For extracting multiple dominant colors from an image at once rather than clicking individual pixels, use the Dominant Color Extractor tool.
Pro Tips for Image Color Picker
Use the magnifier lens to zoom in to 800% before clicking — JPEG compression creates color noise around edges, and adjacent pixels can differ by 5–10 values from what appears as a solid color.
For sampling background colors from web screenshots, take screenshots at 1:1 display scale (100% zoom in browser) — scaled screenshots average pixels and shift color values.
Save your sampled colors by copying hex codes to a simple text file — the in-tool history only shows the last 10 samples and clears when you reload the page.
CMYK values from this tool are mathematical conversions and may not match professional print profiles — for precise print color matching, use a calibrated proofing system.
Frequently Asked Questions
Related Image Tools
Your input is processed locally in your browser and is never stored, transmitted, or shared with any server. See our Privacy Policy.