Image Color Picker
Upload an image (or paste, drag-and-drop, or load one from a URL), drop multiple draggable sample markers to capture exact pixel colors, preview with a live magnifier, and export the automatically extracted palette as CSS, Tailwind, SCSS, or JSON. Right in your browser — nothing is uploaded to a server.
Multiple sample markers
Click anywhere on the image to drop a marker — add as many as you need, drag any marker to fine-tune its position, and remove one with its × button. Every sampled color is listed and copyable.
Magnifier loupe
Hovering over the image shows a zoomed-in magnifier so you can see exactly which pixel you're about to sample before clicking.
Flexible image input
Upload a file, drag and drop it onto the page, paste an image directly from your clipboard (Ctrl+V), or load one from a URL.
Adjustable, better palette extraction
Choose how many colors to extract (4-10) using a k-means-style clustering pass, which produces cleaner, more distinct swatches than simple frequency counting.
Export the palette
Export the extracted palette as CSS variables, a Tailwind config snippet, SCSS, or JSON with one click.
Common Mistakes to Avoid
Expecting the palette to include every color in the image
Solution:
The palette shows the most representative colors only, grouped by similarity — very small or rare details may not appear as their own swatch.
Clicking near an edge and getting an unexpected color
Solution:
Anti-aliasing near sharp edges can blend colors — use the magnifier to confirm the exact pixel before clicking, or click toward the center of a solid area.
Loading an image URL that blocks cross-origin access
Solution:
Some sites block other domains from reading their images' pixel data — if a URL fails to load, download the image and upload it directly instead.
Frequently Asked Questions
No — the image is read and processed entirely in your browser using the HTML canvas, and never leaves your device (this includes images loaded by URL, which are fetched directly by your browser).
Yes — click anywhere to drop a marker, and keep clicking to add as many sample points as you need. Each one is listed separately and can be copied or removed.
Yes — use the Export Palette button to get the colors as CSS variables, a Tailwind config snippet, SCSS, or JSON.
Multiple sample markers
Click anywhere on the image to drop a marker — add as many as you need, drag any marker to fine-tune its position, and remove one with its × button. Every sampled color is listed and copyable.
Magnifier loupe
Hovering over the image shows a zoomed-in magnifier so you can see exactly which pixel you're about to sample before clicking.
Flexible image input
Upload a file, drag and drop it onto the page, paste an image directly from your clipboard (Ctrl+V), or load one from a URL.
Adjustable, better palette extraction
Choose how many colors to extract (4-10) using a k-means-style clustering pass, which produces cleaner, more distinct swatches than simple frequency counting.
Export the palette
Export the extracted palette as CSS variables, a Tailwind config snippet, SCSS, or JSON with one click.