Edit & Effects
Color Picker from Image
Click anywhere on your image to instantly extract the exact HEX, RGB and HSL color values. Save colors to a palette and copy to clipboard in one click.
Drop your image here
Then click anywhere on the image to pick a color
JPG PNG WebP GIF
Click to pick a color
Click picked color to save to palette
HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Saved Palette
Click any palette swatch to restore that color
About This Tool
How to Pick a Color from an Image
- 1Drop or select any image — a photo, screenshot, logo, or design mockup.
- 2Move your cursor over the image. A magnified preview shows the pixel under your cursor in real time.
- 3Click any pixel to sample its color. The tool instantly outputs the HEX, RGB, and HSL values.
- 4Click any value to copy it to your clipboard. Sample as many colors as you need — your history is saved in the session.
When to Use a Color Picker
Brand Color Matching
Extract exact HEX values from a logo or brand asset to ensure CSS, print, and design files all use the same colors. Our guide on picking colors from any image covers the full workflow.
Web & CSS Development
Sample colors from design mockups or screenshots to use directly in CSS. Getting the exact HEX from a mockup is faster than guessing or asking a designer.
Design Inspiration
Sample colors from photographs, artwork, or reference images to build a palette. Pair with our Palette Extractor to pull the dominant colors from an image automatically.
Print Color Reproduction
Get the RGB values needed to specify colors to a print vendor or convert to CMYK. Accurate color sampling prevents costly mismatches between screen and print output.
Why Use a Browser-Based Color Picker
Browser DevTools have a built-in eyedropper, but it only works on the page itself — not on arbitrary images. This tool works on any image you load, including confidential design files and client assets you wouldn't want to upload to a third-party service. Everything runs locally. For extracting multiple dominant colors at once rather than sampling individual pixels, our Palette Extractor is the better starting point. And for a complete look at browser-based design tools, see our roundup of 175+ free browser-based tools.
Frequently Asked Questions
HEX (hexadecimal) is the most common color format for web design. A HEX code like
#FF5733 represents red, green and blue values in base-16. Use HEX in CSS, HTML, Photoshop, Figma, and most design tools. It’s the universal color language of the web.
RGB stands for Red, Green, Blue — the same information as HEX but written as three decimal numbers from 0 to 255. For example,
rgb(255, 87, 51) is the same color as #FF5733. RGB is preferred in CSS when you need to use opacity (e.g. rgba(255, 87, 51, 0.5)) or when working in video/print design software.
HSL stands for Hue, Saturation, Lightness. It’s a more intuitive way to describe colors — Hue is the color angle (0–360°), Saturation is how vivid it is (0–100%), and Lightness is how light or dark it is (0–100%). HSL is great in CSS when you want to create color variations: simply adjust the lightness to get tints and shades of the same hue.
After clicking the image to pick a color, click “Save to Palette” to add it to your saved colors below. You can build up a palette of colors by picking multiple spots on the image. Click any palette swatch to restore that color in the display. This is useful for extracting a brand’s full color palette from a logo or design file.
A few reasons: (1) JPEG compression alters pixel colors slightly from the original, so flat color areas may not be perfectly uniform. (2) Screen calibration — your monitor’s color profile affects how colors appear. (3) Anti-aliasing — on edges and gradients, pixels are blended, so clicking near an edge gives a mixed color. For the most accurate results, click on a flat, solid-colored area away from edges.
Build a full brand palette
PaintShop Pro includes a full color palette manager and precise color sampling tools for building and applying consistent brand color systems.
Try PaintShop Pro
