Image Color Picker
This browser-based color picker lets you drag across any part of an image to extract colors and check RGB, HEX, HSL, and HSV values together.
After selecting an image, you can drag or tap on the image to pick a color.
A magnifier appears when you click or long-press on the image, so you can inspect fine color details as well.
Image preview
How to Use the Image Color Picker and When It Is Useful
This image color picker is an online tool that lets you sample colors from an uploaded image like using an eyedropper and check the color codes on the spot. It is useful whenever accurate color extraction is needed, such as for web design, banner creation, document production, and checking colors in product images.
Check colors continuously while dragging
As you trace across the image, the coordinates and color update in real time, making it easy to follow color changes along edges and gradients.
A magnifier makes small details easier to inspect
The area around the cursor is enlarged, so you can accurately inspect fine lines, small icons, shadow colors, and other details. (The magnifier appears when you click or long-press on the image.)
Show RGB, HEX, HSL, and HSV at the same time
Because multiple color formats are shown together, you can move through design specifications, CSS writing, and impression comparisons without switching back and forth.
Reuse colors immediately from the history
Recently picked colors remain in the history, so there is no need to sample brand colors or comparison colors over and over again.
Useful in situations like these
When you want to extract a color scheme from a reference image for a website or landing page and decide on button or background colors with a similar tone.
When you want to check the color tones of e-commerce product images or banner assets and quickly compare color differences with an existing design.
When creating documents, social media images, or thumbnails and you want to reuse an accent color from the image directly in headings or decorations.
Usage tips
- After loading an image, keep the mouse pressed while moving over the area you want to sample to check colors continuously. Touch operation is also supported on smartphones and tablets.
- When you want to pick the color of an edge or a small decoration, adjust the position little by little while watching the magnifier to make the target pixel easier to capture.
- The RGB, HEX, HSL, and HSV values you pick can each be copied, so you can transfer them to CSS, design tools, or specifications with minimal effort.
- Recently picked colors remain in the history, so when you want to compare candidate colors, it is convenient to sample several places in sequence and compare them.
- If you want to distinguish colors that differ in brightness, checking HSL and HSV together with RGB makes it easier to understand differences in saturation and lightness/value as well.
- Images are not sent to the server and all processing is completed entirely in the browser, so it can be used safely even with unpublished work-in-progress images or screenshots of internal materials.