Image Color Picker
Upload an image and click anywhere to extract colors. Get HEX, RGB, and HSL values with a magnifier loupe and build a reusable color palette.
About This Tool
The Image Color Picker is a free, browser-based tool that lets you extract exact color values from any image. Upload a PNG, JPG, WebP, GIF, BMP, or SVG file and click anywhere on the image to pick a color. A magnifier loupe with pixel-level zoom helps you target the exact pixel you want, even in detailed or complex images.
Every picked color is displayed in three formats simultaneously:
HEX (e.g., #3b82f6), RGB (e.g.,
rgb(59, 130, 246)), and HSL (e.g.,
hsl(217, 91%, 60%)). Each value has a dedicated copy
button so you can paste it directly into your CSS, design tool, or
code editor. The magnifier overlay follows your cursor and shows a
zoomed-in view of the surrounding pixels with a crosshair
indicating the target pixel.
As you pick colors, they are automatically added to a color palette that can hold up to 20 swatches. Click any swatch to re-select it and view its values. When you are done, export the entire palette as CSS custom properties (variables) with one click. This makes it easy to extract a complete color scheme from a screenshot, mockup, photograph, or brand asset.
All processing happens entirely in your browser using the HTML5 Canvas API. No images are uploaded to any server, no data leaves your device, and there are no third-party scripts involved. The tool works offline once loaded and supports images of any size, automatically scaling them to fit the viewport while preserving full-resolution color data.
How to Use
- Upload an image by clicking the upload area or dragging and dropping a file. Supported formats include PNG, JPG, WebP, GIF, BMP, and SVG.
- Hover over the image to activate the magnifier loupe. The zoomed view shows individual pixels and the HEX value of the pixel under your cursor.
- Click on the image to pick a color. The picked color is shown with its HEX, RGB, and HSL values in the panel below.
- Click the copy button next to any color value to copy it to your clipboard. You can also press Ctrl+Shift+C to copy the HEX value of the current color.
- Each picked color is automatically added to the Color Palette. Click any palette swatch to re-select it.
- Click CSS Vars to export the entire palette as CSS custom properties, or Clear to reset the palette.
- Use New Image to upload a different image at any time. Your palette is preserved across image changes.
FAQ
What image formats are supported?
The Image Color Picker supports all common image formats including PNG, JPG/JPEG, WebP, GIF, BMP, and SVG. Any format that your browser can render as an image will work. Animated GIFs will display their first frame.
How accurate are the color values?
The tool reads pixel data directly from the HTML5 Canvas at the exact coordinates you click, so the color values are pixel-perfect. The magnifier loupe with 10x zoom helps you target the exact pixel you want, even in images with fine details or gradients.
Is there a limit to the image size?
There is no hard limit, but very large images (above 50MP) may be slow to render depending on your device. The tool automatically scales images to fit within the viewport while preserving full-resolution color data for picking.
How many colors can I save in the palette?
The palette holds up to 20 colors. Duplicate colors (same HEX value) are automatically skipped. You can clear the palette at any time and start fresh. The palette persists when you switch to a new image.
Can I export the color palette?
Yes. Click the CSS Vars button to copy the entire palette as CSS custom properties in :root { --color-1: #hex; ... } format. You can paste this directly into your stylesheet.
Is my image uploaded to a server?
No. The Image Color Picker runs entirely in your browser. Your image is loaded into a local HTML5 Canvas element and all pixel reading happens via the Canvas API. No data is sent to any server, and the tool works offline once the page is loaded.
What is the difference between HEX, RGB, and HSL?
HEX is a 6-character hexadecimal notation (e.g., #3b82f6) commonly used in CSS and design tools. RGB specifies red, green, and blue channel values from 0-255. HSL describes colors by hue (0-360 degrees), saturation (0-100%), and lightness (0-100%), which many designers find more intuitive for adjusting colors.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
Image Compressor
Compress images in your browser with quality and resize controls. Compare file sizes before and after.
Image Effects & Filters
Apply grayscale, sepia, blur, invert, and other visual effects to images in your browser.
Image Transparency Editor
Remove backgrounds and make colors transparent in images. Click to select color, adjust tolerance.
Color Palette Extractor
Extract dominant color palettes from images with HEX, RGB, HSL values. Export as CSS variables, Tailwind config, JSON, or SVG.