Free Image Color Picker & Palette Generator

Choose, drop, or paste an image to pick pixel colors locally, copy HEX/RGB/HSL values, and generate a dominant color palette.

Click for theater mode
Drop an image or click to choose

PNG, JPG, WebP, GIF, and BMP supported. You can also paste a screenshot with Ctrl+V / Cmd+V

Choose or paste an image

Images are processed locally in your browser. Move the crosshair after loading.

Choose or paste an image

Images are processed locally in your browser. Move the crosshair after loading.

How to Use

  1. Click "Choose Image", drop an image, or paste a screenshot with Ctrl+V / Cmd+V.
  2. Move your pointer or finger over the image to preview live HEX, RGB, HSL values, and the magnifier.
  3. Click a point you want to keep; the color is saved to history.
  4. Click "Extract Palette" to generate a design-friendly palette, then copy the color values you need.

Example: paste a product screenshot, pick the main button color, and copy the HEX value into CSS or a design file.

Core Features

  • Local Image Color Picking: Images are rendered and sampled with browser Canvas, never uploaded to a server.
  • Pixel-Level HEX/RGB/HSL: Move your pointer or finger across the image to read live HEX, RGB, and HSL values.
  • Magnifier Crosshair: A zoomed preview helps you target icon edges, UI screenshot details, and small color blocks.
  • Palette Generator: Browser-side pixel sampling extracts up to 5 dominant colors for quick design reference.
  • Save and Copy Fast: Click the image to save colors to history, then click any swatch to copy its color code.

Related Tools

Color Converter (HEX/RGB/CMYK) - WCAG Contrast Checker Tool

Convert HEX, RGB, HSL, and CMYK with a built-in WCAG contrast checker. Local-only privacyโ€”no uploads. Get print-ready CMYK values and copy results now.
Lorem Ipsum Generator (JSON/HTML) - CJK & Developer Output

Generate Lorem Ipsum as text, HTML <p>, or JSON arrays. Local-only, no uploads. Includes Chinese placeholder text and variable length controls. Generate now.
Aspect Ratio Calculator & CSS Generator - TikTok/Reels 9:16

Calculate aspect ratios and missing dimensions fast. Runs locallyโ€”no uploads. Includes TikTok/Reels 9:16 presets and CSS aspect-ratio snippets. Calculate now.

Calculation Logic

This tool decodes the image locally with HTML5 Canvas and reads the RGBA pixel at the current picker coordinate through getImageData. HEX, RGB, and HSL values are formatted from that pixel.

Palette generation samples Canvas pixels, groups nearby colors into simple buckets, and ranks them by frequency to return up to 5 dominant colors. This is useful for quick web and design palettes, but it does not promise professional ICC / P3 absolute color management.

FAQ

Are my images uploaded?

No. Image loading, color picking, magnifier preview, and palette generation all run locally in your browser.

How do I get a HEX color from an image?

Choose or paste an image, then move your pointer or finger to the target pixel. The live color appears instantly. Click the image to save it to history, then click a swatch to copy the HEX value.

Which color formats are supported?

The tool displays and copies HEX, RGB, and HSL, the formats most common in web design and frontend development.

Why might the color differ slightly from Photoshop?

Canvas reads the pixel as rendered by your browser. Browser behavior, display gamut, and embedded image color profiles can create small differences.

Can I pick colors on mobile?

Yes. On touch devices, drag your finger across the image to move the crosshair, then tap or release to lock a color.