HEX
#000000
Free · Instant · No signup
Color Picker from Image
Sample colors from a canvas image.
Color Picker from Image
Calculator
Click to sample
Sampled Color
RGB
rgb(0, 0, 0)
Swatch
Position
Click image
Eyedropper any pixel in the browser
Brand audits and UI reviews often need the HEX behind a logo, screenshot, or competitor landing page. Upload the PNG or JPEG, click the pixel, copy HEX.
Large images scale down for preview but sampling uses the displayed canvas coordinates, so zoomed detail is easier when you upload a cropped section.
Use swatch plus RGB when pasting into design tokens, CSS variables, or Tailwind config extensions.
Connect color picks to dev and design tools
Typography pairing checks run on the Web Safe Fonts Preview after you lock brand colors in CSS.
Spacing from pixels to rem uses the PX to REM / EM Converter on the same style pass.
CSS cleanup after palette updates goes through the CSS Minifier before deploy.
Sampling tips
Click flat fills rather than anti-aliased edges when you need the exact brand hex, not an average of foreground and background.
JPEG compression can speckle gradients. Sample near the center of large color fields.
Copy HEX into your component library. This page does not store a history of picks.
Frequently Asked Questions (FAQ)
How do I pick a color from an image?
Upload an image, then click anywhere on the preview canvas. HEX and RGB update from that pixel. Default before click is #000000 until you sample.
Is the image uploaded to a server?
No. The file stays in your browser. Canvas getImageData reads the pixel under your click locally.
What color formats are shown?
HEX (#rrggbb uppercase), RGB rgb(r, g, b), a live swatch, and click coordinates on the scaled canvas.
Why might sampled color differ from my design app?
Browsers display sRGB. Embedded color profiles, compression artifacts, and canvas scaling can shift values slightly versus Photoshop eyedropper on the original file.