Color Picker from Image

Upload or paste any image, then click to pick colors. Get HEX, RGB, and HSL values instantly with a magnifier loupe.

🖼️
Drop an image here, click to upload, or paste (Ctrl+V)
Upload or paste an image to start picking colors.

How to Use the Image Color Picker

  1. Load an image — drag and drop an image file onto the drop zone, click to open a file picker, or paste an image from your clipboard with Ctrl+V.
  2. Pick mode — move your mouse over the image to see the magnifier loupe showing zoomed pixels. Click anywhere to pick that color.
  3. View color values — the picked color appears as HEX, RGB, HSL, and HSV. Click any Copy button to copy that format.
  4. Color history — your last 20 picked colors are saved as swatches. Click any swatch to restore that color's values.
  5. Palette mode — switch to Extract Palette to automatically extract the 6–8 dominant colors from the image. Export them as CSS custom properties.

Why Pick Colors from Images?

Designers and developers frequently need to extract exact color values from existing images — to match brand colors from a logo, to recreate a color scheme from a photograph, to identify the colors used in a competitor's design, or to generate a harmonious color palette inspired by natural photography. Knowing the precise HEX or RGB value is essential for reproducing colors accurately in CSS, design tools, or code.

This tool makes color picking instant and private: your image never leaves your browser, all processing happens locally using the HTML5 Canvas API, and results are available in all common color formats simultaneously.

Understanding Color Formats

Colors can be represented in several different formats, each useful in different contexts:

  • HEX (#rrggbb) — the most common format in web development. A six-character hexadecimal code where the first two characters represent red, the next two green, and the last two blue. Used in CSS, HTML, and most design software. Short form (#rgb) can be used when each pair has identical digits (e.g., #ff0000 → #f00).
  • RGB (rgb(r, g, b)) — represents color as three integers from 0–255 for red, green, and blue channels. Used in CSS and programming languages. rgb(255, 0, 0) is pure red. RGBA adds an alpha (opacity) channel: rgba(255, 0, 0, 0.5) is 50% transparent red.
  • HSL (hsl(h, s%, l%)) — represents color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Hue is the color angle on a color wheel (0/360=red, 120=green, 240=blue). Saturation controls intensity. Lightness controls brightness. HSL is more intuitive for generating color variations: increasing lightness creates tints, decreasing creates shades.
  • HSV (hsv(h, s%, v%)) — similar to HSL but uses Value (brightness) instead of Lightness. Preferred by many design applications (Photoshop uses HSB which is the same as HSV). In HSV, fully saturated colors are at Value=100%, while in HSL they are at Lightness=50%.

Dominant Color Extraction

The palette extraction feature samples approximately 2,000 pixels distributed evenly across the image in a grid pattern. Similar colors within a certain RGB distance are clustered together, and the most represented color from each cluster is returned. This produces a palette of the most visually prominent colors in the image. The algorithm is intentionally simple compared to professional tools like k-means clustering in full resolution, but it works well for photography and illustration, producing palettes that are representative of the image's actual color distribution.

Using Extracted Colors in CSS

The "Export as CSS Variables" button generates a CSS snippet defining each palette color as a custom property. This makes it easy to build a color system from an existing brand image or photograph. CSS custom properties can then be used throughout your stylesheet with the var() function. For example, after extracting colors from a brand logo, you can define --color-primary, --color-secondary, etc., and reference them in all your styles for easy future updates. Combine this tool with our Tailwind to CSS converter for a complete design-to-code workflow.

Cross-Origin Images

Due to browser security restrictions (CORS — Cross-Origin Resource Sharing), you cannot use getImageData() on a canvas that contains images loaded from a different domain. This means you cannot paste an image URL from another website and pick colors from it. You must download the image first and then upload it or paste it. Images loaded from your local filesystem or pasted from the clipboard are not subject to this restriction and work seamlessly.

Frequently Asked Questions

The tool uses the HTML5 Canvas API and getImageData() to read pixel values. When you click a point, it reads the RGBA values from that canvas pixel and converts them to HEX, RGB, HSL, and HSV formats. The magnifier loupe renders a zoomed view of the pixels near your cursor for precise picking.
Yes. Press Ctrl+V (or Cmd+V on Mac) anywhere on the page to paste an image from your clipboard. This works for screenshots, images copied from browsers, and images from design tools. No file upload is required.
The palette mode samples ~2000 pixels in a grid across the image, groups similar colors by RGB distance, and returns the most representative color from each cluster. This produces 6–8 dominant colors that reflect the image's actual color distribution.
No. Your image never leaves your browser. All processing uses the HTML5 Canvas API and FileReader API, which operate entirely on your local machine. No data is sent to any server.
The tool supports any format your browser can display: JPEG, PNG, GIF, WebP, BMP, SVG, AVIF, and HEIC (on Safari). Very large images are automatically scaled down to fit the canvas. Animated GIFs show only the first frame.