- Upload, paste, or drop an image.
- Hover to sample a pixel.
- Click to lock/unlock the color.
- Copy HEX, RGB, or HSL values.
Image Color Picker
Pick a pixel color from an image and copy HEX, RGB, and HSL values.
Source + sampling
Hover to sample. Click to lock. Paste (Ctrl/Cmd+V) or drop an image to load it.
8×
Drop an image here, click to choose a file, or paste from clipboard.
Picked color
Upload, paste, or drop an image, then hover over it to sample colors.
Palette
0/24
Save a few colors to build a palette.
How to Use This Tool
Learn More About Image Color Picker
Sampling colors from images
When an image is drawn onto a canvas, you can read the color of any pixel by checking its RGBA values.
Color formats
- HEX is common for CSS and design tools.
- RGB is useful for graphics work and debugging.
- HSL can make it easier to adjust hue, saturation, or lightness.
About
Use the Image Color Picker to sample any pixel from an uploaded image. Hover to see a live preview and click to lock a color for copying.
Examples
Sample Scenario
Runtime-verified example for image-color-picker
Input
{"sourceImage":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==","zoomLevel":8}Output
Use the interactive color picker in the widget above.
Use Cases
- Pick a brand color from a logo screenshot
- Match UI colors from a design mockup
- Extract a background color from a photo
- Get precise color values for CSS variables or Tailwind configs