Free image color picker

1. Upload your image. Drag and drop a JPG, PNG, WebP, GIF, or BMP file onto the box above, or click to browse your device.
2. Hover to sample. Move your mouse anywhere over the image and watch the HEX, RGB, and HSL values update live under a large color swatch.
3. Click to freeze a color. Click (or tap on mobile) the exact pixel you want, and the reading locks in place so you can copy it without your cursor drifting off target.
4. Copy the value you need. Every readout — HEX, RGB, and HSL — has its own one-click copy button, ready to paste into CSS, Figma, Photoshop, or a design system.
5. Grab the palette. Scroll down to the extracted palette to see the image's eight most dominant colors, each with its own HEX code and copy button.

Because sampling happens directly on the canvas pixel data in your browser, the color you copy is the exact value baked into the image file — not an approximation from a screenshot or a color-blind guess.

Under the hood, this tool draws your image onto an HTML <canvas> element scaled to fit a comfortable viewing size, while keeping the full-resolution source data available for accurate sampling. Two features run off that same canvas:

• Pixel eyedropper. On every mouse move (or tap), the tool calls ctx.getImageData(x, y, 1, 1) to read the exact red, green, and blue values of the pixel under your cursor, then converts that to HEX and HSL for display. A click freezes the reading so it stops updating as you move away.
• Palette extraction. The tool samples pixels on a grid across the whole image (skipping most pixels for speed), rounds each RGB channel to the nearest bucket to group visually similar colors together, and counts how often each bucket appears. The eight buckets with the highest pixel counts become your palette, sorted from most to least dominant, with each swatch's share of the sampled pixels shown as a percentage.

This bucketing step — sometimes called color quantization — is what turns millions of slightly-different pixel values into a small, usable palette instead of a wall of near-duplicate colors. Because your image is loaded from a local file, the canvas stays same-origin and getImageData() can read pixel data without being blocked by cross-origin security restrictions.

The tool shows all three because different tools and workflows expect different formats:

If you only need one value, HEX is the safest default — it is universally understood by browsers, design tools, and CMSs. Reach for HSL when you want to programmatically generate lighter or darker variants of the same color, since you only have to change one number.

• Brand and website palettes. Pull the exact colors from a logo, product photo, or brand reference image so a website or app matches perfectly instead of eyeballing shades.
• Design handoff. Hand developers precise HEX codes instead of a screenshot and a guess, cutting back-and-forth over “what blue is that exactly?”
• UI theming. Generate a cohesive color scheme for a dashboard, slide deck, or landing page straight from a hero image or product photo.
• Matching print to screen. Confirm the RGB values behind a printed swatch, packaging mockup, or scanned artwork before using them in digital work.
• Accessibility checks. Grab a background and foreground color from a design mockup, then verify their contrast ratio meets WCAG guidelines.

• Web & UI designers extract exact brand colors from logos and mood boards for CSS and design systems.
• Developers grab precise HEX/RGB values from mockups or screenshots without opening Photoshop.
• Illustrators & digital artists sample reference photos to match skin tones, skies, and lighting.
• Marketers & brand managers confirm a partner or competitor's brand colors from their marketing assets.
• Print designers cross-check scanned swatches or packaging photos against digital color codes.
• Students & hobbyists learn how color theory and palettes work by exploring real photos.

Once you have your colors, pair this with the color contrast checker to make sure any text-on-background combination you pick is readable and accessible.

• Zoom matters less than you think. Because sampling reads the underlying pixel data rather than what your eye perceives, you get the exact value even on a small on-screen image.
• Avoid compression artifacts. Heavily compressed JPGs can introduce slight color noise around edges — sample from a flat, uncompressed area of the image when precision matters.
• Use the palette for the big picture, the eyedropper for precision. The palette shows what colors dominate overall; the eyedropper is better when you need one specific, exact pixel.
• Watch for anti-aliasing. Pixels right on an edge between two colors are often a blend of both — sample a pixel or two into the solid area for a cleaner reading.
• PNG and WebP preserve color best. If you control the source image, export it as PNG or lossless WebP before sampling to avoid any JPEG compression drift.

Yes. Unlike many online color-picker tools that upload your image to a server for processing, this tool decodes and samples your image entirely inside your browser tab using the HTML canvas API. Your file never leaves your device, the tool works offline once the page has loaded, and nothing is stored, logged, or sent anywhere. That makes it safe to use with unreleased branding, private photos, or client work under NDA.