Color picker from image

What is the Color Picker from Image tool?

This tool reads the exact color of any pixel in a photo you upload. Hover over the image to preview colors live, click to pick one, and it's added to a small palette along with its hex, RGB, and HSL values, all ready to copy into a design tool, CSS file, or anywhere else you need that exact color.

Everything happens locally in your browser using the Canvas API. Your image is never uploaded to a server.

How to use it

1. Drop your image onto the upload area, or click it to browse your device.
2. Move your cursor over the image, the color values update live as you hover.
3. Click anywhere on the image to pick that exact color and add it to your palette below.
4. Click Copy next to the hex, RGB, or HSL value to copy it to your clipboard.
5. Click any swatch in your palette to bring its values back up for reference or copying.

Hex, RGB, and HSL, what's the difference?

• HEX - a six-digit code like #3498DB, the most common format for web design and CSS
• RGB - the same color expressed as red, green, and blue values from 0 to 255, like rgb(52, 152, 219)
• HSL - hue, saturation, and lightness, a format that's often more intuitive to adjust by hand, since you can shift the hue or lighten/darken a color without recalculating all three RGB channels

All three represent the exact same color, just in different formats, use whichever one your design tool, code editor, or project expects.

How it works technically

The tool draws your image onto an in-browser canvas, then reads the exact red, green, and blue values of whichever pixel your cursor is over using the canvas's pixel data. Those RGB values are then converted into hex and HSL formats for display, all calculated instantly as you move your cursor.

Common uses

• Matching a website's color scheme to colors from a brand photo or logo
• Building a custom color palette based on a reference photo
• Finding the exact hex code of a color for a design project
• Checking the color values used in a screenshot or mockup
• Sampling colors from nature or product photography for design inspiration

Frequently asked questions

Does the picked color account for image compression artifacts?

The tool reads the exact pixel value as stored in the image file, which for a heavily compressed JPG may differ slightly from the "true" original color due to compression, since JPG compression can introduce small color shifts. For the most accurate colors, use a less compressed or lossless image where possible.

Can I pick more than one color?

Yes, every click adds a new swatch to your palette, so you can build up a whole set of colors from the same image.

What happens if I click on a transparent area of a PNG?

You'll get the color that's stored underneath the transparency, which may not visually match what you saw, since fully transparent pixels can still have an RGB value even though they don't render as that color.

Is there a limit to how many colors I can add to my palette?

No, you can pick as many colors as you like during your session.