User Guide
Step 1 — Upload an image
- Drag an image in or click to browse.
- It appears on a canvas ready to pick from.
Step 2 — Click a colour
- Click anywhere on the image.
- The colour under the cursor is captured.
Step 3 — Read the codes
- See HEX, RGB, and HSL for the picked colour, with a swatch.
Step 4 — Copy
- Copy any code with one click. Everything stays in your browser.
About the Image Color Picker
This tool lets you pick an exact colour from anywhere in an image and gives you its code in three formats — HEX, RGB, and HSL — ready to copy into a design or stylesheet. It all happens in your browser, so the image is never uploaded.
Why pick colours from an image
Designers and developers constantly need the precise colour of something they can see: matching a brand colour from a logo, sampling a shade from a photograph for a palette, or identifying the exact blue a client used in an old graphic. Rather than guessing, you click the pixel and get its true value. This is the digital equivalent of an eyedropper tool, available on any image without specialist software.
Understanding the three formats
The same colour can be written several ways. HEX, like #3A7BD5, is the compact six-digit form used throughout CSS and design apps. RGB states the red, green, and blue components from 0 to 255, which is useful when you need the raw channel values. HSL describes the colour as hue, saturation, and lightness, which is more intuitive for adjusting a colour — nudging the lightness to make a tint, or the saturation to mute it. Having all three means you can paste whichever your tool expects.
How it works and stays private
When you load an image it is drawn onto a canvas in your browser. Clicking reads the colour of that single pixel directly from the canvas, locally. Nothing is sent to a server, which keeps your images private and makes picking instant. Large images are scaled to fit your screen for convenience, while the colours read remain accurate to what is shown.
Related tools
To convert a colour you already have between formats, use the Color Code Converter. To turn an image into an embeddable string, see Image to Base64.
Frequently Asked Questions
How do I pick a colour?
Upload an image, then click anywhere on it. The colour under your click is read and shown as HEX, RGB, and HSL.
What do HEX, RGB, and HSL mean?
They are three ways to write the same colour. HEX (like #3A7BD5) is common in CSS, RGB lists red/green/blue values, and HSL describes hue, saturation, and lightness.
Can I copy a colour code?
Yes, each code has a copy button so you can paste it straight into your design or stylesheet.
Is my image uploaded?
No. The image is drawn to a canvas in your browser and pixels are read locally — nothing is sent anywhere.
Why is a large image shown smaller?
Very large images are scaled to fit the screen for picking, but the colours read are accurate to the displayed pixels.