Does the color picker upload my image anywhere?

No. The whole tool runs in your browser using the HTML5 Canvas API. The uploaded image, the sampled color, and the copy-to-clipboard action all happen client-side. There is no server round-trip, no telemetry, no signup, and no daily limit.

What formats does it support?

JPG, PNG, WebP, GIF and most other browser-native raster formats. SVGs are accepted and rasterised at their native pixel dimensions for sampling. There is no file-size limit beyond what your browser can hold in memory — multi-megabyte product photography and high-resolution screenshots work fine.

How precise is the sampled color?

The eyedropper reads the exact RGBA value of the underlying pixel — no averaging, no smoothing. The HEX, RGB and HSL strings are converted from that single pixel value, so the precision matches whatever was in the source file. JPG compression can shift colors slightly from the original source; for brand-critical work, sample from the original PNG or SVG asset.

Can I sample multiple pixels into a palette?

This tool focuses on single-pixel sampling. For an automatic full-image palette, use PikDraw's Color Palette Extractor — it runs a median-cut algorithm across the whole image and returns three to twelve dominant colors at once. The two tools are designed to be used together.

Why does the sampled HEX not match what I see on screen?

Two common causes: monitor color profile shifts (a calibrated monitor renders sRGB hex values differently than an uncalibrated one), and source-image color profile (a JPG with an embedded color profile may be displayed by the browser through a transform). For absolute fidelity, sample from a PNG saved in sRGB without an embedded profile.

Is there a keyboard shortcut?

Not for picking specifically — the canvas-click interaction is the primary input. For repeated workflows, browser zoom (Ctrl/Cmd +) gives you sub-pixel accuracy when sampling tiny UI elements, and the copy buttons keep keyboard hands away from the mouse only while pasting.

Can I use sampled colors commercially?

Colors themselves are not copyrightable. The tool reads pixel values from an image you supply — what you do with those values is entirely up to you. The tool itself adds no licensing or attribution requirement to the colors it samples.

Does it work on mobile?

Yes. On a touch device, tap any point on the displayed image to sample. The copy buttons trigger the system clipboard, so pasted HEX values land in any other mobile app — Figma, Notion, Slack, Apple Notes — without manual retyping.

Free Color Picker from Image — Eyedropper Tool Online

Designers, developers and brand owners constantly need to extract exact colors from screenshots, photos, logos and mockups. Most online color pickers either watermark, gate behind signup, upload images to a server, or only return a single approximated palette instead of true pixel-perfect sampling. PikDraw's Color Picker does one thing in the browser, perfectly: drop in an image, click any pixel, get the exact HEX, RGB and HSL values, copy in one click, repeat as many times as you need.

What is the Color Picker from Image — Eyedropper Tool?

The Color Picker is a focused eyedropper tool that renders any uploaded image to a canvas and lets you click any pixel to read its precise RGBA value. The value is converted into HEX, RGB and HSL strings and displayed in the side panel along with a large swatch. Every interaction is client-side — the image, the sampled color and the clipboard write all happen in your browser, with no upload, no signup and no daily limit.

Key features

Pixel-perfect eyedropper sampling — no averaging, no smoothing
HEX, RGB and HSL output in one panel
One-click copy for each format
100% client-side — image never leaves your browser
Works with JPG, PNG, WebP, GIF, and rasterised SVG
No file-size limit beyond browser memory
Crosshair cursor on the image for precise targeting
Mobile-friendly — tap to sample on touch devices
No signup, no watermark, no daily limit, no premium tier
Designed to pair with the Color Palette Extractor for full-palette extraction

How it works

When you upload an image, it is loaded into an HTML5 Image object and drawn to an HTML5 Canvas at its native pixel resolution (downscaled only if it exceeds 720 px wide for display). When you click the canvas, the tool calculates which device pixel corresponds to your click position (accounting for any CSS scaling), then calls getImageData(x, y, 1, 1) on the canvas 2D context to read that single pixel's RGBA value. The red, green and blue channels are formatted into a HEX string (#RRGGBB) by base-16 encoding and a RGB string (rgb(R, G, B)) by plain string concatenation. For HSL, the tool runs the standard RGB-to-HSL conversion: it normalises each channel to 0–1, finds the min and max, computes lightness as their average, and computes saturation and hue from their difference and the channel that produced the max. The resulting strings render in the side panel inside copy-buttons. Each copy button calls navigator.clipboard.writeText() with that format's exact string, so a paste lands the value in any external app — Figma, VS Code, Notion, Slack — already correctly formatted for the destination. The whole loop — image upload, canvas draw, click, getImageData, format, copy — runs entirely in the browser. The image bytes never reach a server, the sampled colors never reach a server, and there is no analytics or telemetry on the sampling event itself. This is critical for brand work where the source asset may be under NDA or pre-launch.

Why use this tool

Most color-picker tools either require an account, upload your image to a third-party server, watermark exports, or hide HSL output behind a paywall. PikDraw is none of those: every interaction stays in your browser, every format is free, every sample is pixel-precise, and there is no limit on how many colors you can extract per session. The tool is intentionally minimal — one image, one click, three formats, copy and move on.

Common use cases

Extract brand colors from a competitor's screenshot for inspiration
Read exact HEX values from a Figma export or design mockup
Sample illustration colors for building a matching palette
Pull colors from a photograph for a moodboard or themed UI
Match button colors from a website screenshot in your own CSS
Identify the exact background of a screenshot for a seamless overlay
Read product photography colors for an e-commerce theme
Sample logo colors when the source brand book is unavailable

How to use this tool

Upload the source image — Drop in any photo, screenshot, logo, mockup, product render or branding asset. The image stays entirely in your browser — nothing uploads to a server. JPG, PNG, WebP, GIF and SVG (rasterised) all work, and there is no file-size limit beyond what your browser can hold in memory.
Click any pixel to sample — Move your cursor over the canvas — it switches to a crosshair. Click any point and the eyedropper reads the exact pixel underneath, including pixels inside text, gradients, photographic detail and anti-aliased edges. The sampled color appears instantly in the side panel as a large swatch plus HEX, RGB and HSL strings.
Copy in the format you need — Hit the copy button next to HEX, RGB or HSL. The string lands on your clipboard ready to paste into Figma, CSS, Tailwind config, design tokens, brand guidelines or anywhere else. No formatting clean-up needed.
Sample again — no reload — Click another pixel and the panel updates in place. There is no per-day limit, no signup wall, no upgrade prompt — sample as many colors as the project needs.
Pick a new image — When you are done with one source, hit the close (X) button on the image strip to clear it, then upload the next one. Everything resets cleanly without a page reload.

Who should use this

UI designers translating mockups to CSS, developers matching colors from screenshots to design tokens, brand owners auditing how their colors render on third-party screenshots, illustrators pulling palette colors from reference photography, content creators sampling brand colors for thumbnails, marketers matching ad colors to landing pages, and anyone who needs the exact HEX from a pixel on a screen without the friction of a signup or a server round-trip.

How to get started

Drop an image into the upload area, click the pixel you want to sample, copy the HEX (or RGB or HSL) with one button, and paste it into your design tool. There is no signup and no setup — the first sample takes under five seconds.

Best practices

Sample from the highest-resolution version of the source asset for the most accurate values
Avoid sampling anti-aliased edges — click the inner solid area of text or shapes
Browser-zoom small UI screenshots before sampling to avoid mis-targeting a pixel
Pair with the Color Palette Extractor when you need a full palette instead of a single color
Save sampled HEX strings to a brand-tokens file as you go — they are easy to lose when sampling many sources
For brand-critical work, sample from a lossless PNG or SVG source rather than a JPG

Pro tips

Zoom your browser to 200% before sampling on small UI screenshots — you can target single anti-aliased pixels without missing.
Sample a logo's deepest pixel for primary brand color, then the lightest for the accent variant.
For dark-on-light text screenshots, sample the inner stroke of a letter for true brand color (avoid the anti-aliased edge halo).
Build a palette by sampling three to five pixels across hero shots and pasting the HEX values into the Color Palette Extractor or Gradient Generator.
Sampling a JPG screenshot can return slightly different values than the source PSD because of compression — always source from the original asset when possible.

Expert insights

Avoid the edge halo

Sample the inner solid area of text or icons — anti-aliased edges return blended colors that don't match the brand source.

100% client-side

Your image, the sampled color, and the copy action never leave your browser. Safe for NDA assets and pre-launch mockups.

Pair with palette extractor

For a full palette in one shot, use the Color Palette Extractor. The Color Picker is for surgical single-pixel sampling.

Limitations to be aware of

Single-pixel sampling — for averaged or dominant-color extraction use the Color Palette Extractor
No hover-preview — sampling commits on click, not on cursor hover
Color profile shifts in the source file can cause slight HEX differences from the original design tool
Rasterised SVGs are sampled at their native pixel size — for ultra-large SVG sampling, scale up in a design tool first

Frequently asked questions

Does the color picker upload my image anywhere?: No. The whole tool runs in your browser using the HTML5 Canvas API. The uploaded image, the sampled color, and the copy-to-clipboard action all happen client-side. There is no server round-trip, no telemetry, no signup, and no daily limit.
What formats does it support?: JPG, PNG, WebP, GIF and most other browser-native raster formats. SVGs are accepted and rasterised at their native pixel dimensions for sampling. There is no file-size limit beyond what your browser can hold in memory — multi-megabyte product photography and high-resolution screenshots work fine.
How precise is the sampled color?: The eyedropper reads the exact RGBA value of the underlying pixel — no averaging, no smoothing. The HEX, RGB and HSL strings are converted from that single pixel value, so the precision matches whatever was in the source file. JPG compression can shift colors slightly from the original source; for brand-critical work, sample from the original PNG or SVG asset.
Can I sample multiple pixels into a palette?: This tool focuses on single-pixel sampling. For an automatic full-image palette, use PikDraw's Color Palette Extractor — it runs a median-cut algorithm across the whole image and returns three to twelve dominant colors at once. The two tools are designed to be used together.
Why does the sampled HEX not match what I see on screen?: Two common causes: monitor color profile shifts (a calibrated monitor renders sRGB hex values differently than an uncalibrated one), and source-image color profile (a JPG with an embedded color profile may be displayed by the browser through a transform). For absolute fidelity, sample from a PNG saved in sRGB without an embedded profile.
Is there a keyboard shortcut?: Not for picking specifically — the canvas-click interaction is the primary input. For repeated workflows, browser zoom (Ctrl/Cmd +) gives you sub-pixel accuracy when sampling tiny UI elements, and the copy buttons keep keyboard hands away from the mouse only while pasting.
Can I use sampled colors commercially?: Colors themselves are not copyrightable. The tool reads pixel values from an image you supply — what you do with those values is entirely up to you. The tool itself adds no licensing or attribution requirement to the colors it samples.
Does it work on mobile?: Yes. On a touch device, tap any point on the displayed image to sample. The copy buttons trigger the system clipboard, so pasted HEX values land in any other mobile app — Figma, Notion, Slack, Apple Notes — without manual retyping.

Browse all PikDraw image tools →