Image Color Picker
Click any pixel in an image to get its HEX, RGB and HSL colour values. Free, private.
🖼️ Image Tools
Free
Browser-based
What Is an Image Color Picker?
An image color picker lets you sample the exact color of any pixel in a photo, screenshot, logo or graphic and gives you the precise color code in every format you need — HEX, RGB and HSL. Instead of eyeballing a color and trying to match it manually in your CSS or design tool, you get the exact value in seconds. This is essential for brand color matching, recreating a design from a screenshot, building color palettes from photographs, or identifying colors used on a competitor's website.
Common Use Cases
- Brand color extraction — upload a logo to get the exact HEX values used, even without access to the original design files.
- Web design from mockups — pick colors from a Figma or Photoshop screenshot to use directly in your CSS.
- Photo-based palettes — sample 4–5 colors from a product photo to build a cohesive color scheme for a landing page.
- Matching print to screen — photograph a printed document and extract the color code to reproduce it digitally.
HEX, RGB and HSL — Which Format Do You Need?
| Format | Example | Best Used In |
|---|---|---|
| HEX | #ff5733 | CSS, HTML attributes, design tools (Figma, Sketch) |
| RGB | rgb(255, 87, 51) | CSS, image editing, JavaScript Canvas API |
| HSL | hsl(14, 100%, 60%) | CSS color manipulation (easier to adjust lightness/saturation) |
Tips for Accurate Colour Picking
- Zoom in before uploading — for small details like icon strokes or thin borders, zoom in on the area in your OS before screenshotting, then upload the zoomed image.
- Use screenshots for websites — take a screenshot of any webpage and upload it here to sample colors from live sites without needing to inspect their CSS.
- Build a palette — click multiple spots across the image; each pick is saved to the color history so you can build a full palette in one session.