π¨ Color Picker from Image
Click any pixel to get HEX, RGB, HSL. Build palettes, click to copy.
Sample Any Color From Any Image
Designers constantly need the exact color from a reference: a brand blue from a logo, the perfect wall paint from a room photo, a skin tone from a portrait, the accent from an inspiration shot. This tool is a precision eyedropper for your browser. Upload the image, click the pixel you want, and get its HEX, RGB, and HSL values instantly, with click-to-copy on every format. Add picks to a palette strip and export the whole set as CSS variables when you are done.
Accuracy matters in sampling, so the tool reads the true pixel data from the canvas, not an approximation. Photos are noisy at the pixel level though: compression artifacts and gradients mean adjacent pixels can differ. Click the most representative spot, a flat area of the color rather than an edge or highlight. The sampled swatch shows large so you can verify the pick looks right before you copy it into your design.
HEX vs RGB vs HSL
All three describe the same color; they just suit different tasks. HEX (#1F6FEB) is the compact standard for CSS and most design tools, so it is the default copy choice for web work. RGB (31, 111, 235) is what developers use in code and what canvas APIs speak natively. HSL (211Β°, 82%, 53%) is the human-friendly one: hue picks the color family, saturation controls vividness, lightness moves between black and white. When a picked color is close but not perfect, HSL tells you exactly which knob to turn.
Building Palettes From Photos
Some of the best color schemes come from photographs, because nature and good photography already solved harmony. The workflow: upload an inspiring image, sample the dominant background tone, the strongest accent, a readable text color from a dark or light area, and one or two supporting mid-tones. Five picks make a complete palette. The CSS variables export turns your palette into --color-1 through --color-5 declarations you can paste straight into a stylesheet, keeping names generic so you can rename them to primary, accent, and so on.
Tips for Clean Picks
Avoid edges between colors, where anti-aliasing blends two hues into a muddy in-between. Avoid specular highlights and deep shadows, which skew lightness without changing the true hue. For brand work, sample vector logos or official brand images rather than photos of screens, which add moirΓ© and color shift. And remember that screens vary: verify critical brand colors against official hex codes rather than trusting a sampled photo alone.
Frequently Asked Questions
How do I find the hex code of a color in a picture?
Upload the image and click the exact pixel you want. The tool instantly shows the HEX, RGB, and HSL values for that pixel, with a large swatch so you can confirm it. Click any value to copy it to your clipboard, ready to paste into CSS, Figma, or Photoshop.
Why does the picked color look different from what I expected?
Photos are rarely one flat color: JPEG compression, lighting gradients, and anti-aliasing mean neighboring pixels differ slightly. Zoom mentally into the exact spot and click the most representative pixel. The magnifier preview shows a zoomed view around your cursor so you can land precisely on the pixel you mean.
What is the difference between HEX, RGB, and HSL?
HEX (#1F6FEB) is the compact code web developers paste into CSS. RGB (31, 111, 235) expresses the same color as red/green/blue amounts from 0 to 255. HSL (211, 82%, 53%) describes hue, saturation, and lightness, which humans find intuitive for tweaking: nudge lightness up for a tint, saturation down for a muted tone. The tool shows all three because different workflows want different formats.
Can I build a color palette from a photo?
Yes. Every color you pick is added to your palette strip with one click. Designers use this to extract brand palettes from inspiration photos: pick the dominant background, the accent, the text color, and two supporting tones, and you have a five-color scheme pulled straight from an image that already looks harmonious.
How accurate is the eyedropper?
Pixel-perfect for the rendered image: it reads the actual RGB values from the canvas. One caveat is color profiles: browsers may render embedded ICC profiles slightly differently across devices, so treat picked values as the on-screen truth rather than print truth. For web work, that is exactly what you want.
Is my image uploaded anywhere?
No. Sampling runs entirely in your browser, so your image never leaves your device. Pixels are read from a local canvas as you move the eyedropper, and the hex, RGB, and HSL values are computed on the spot. That makes it safe to sample colors from client mockups, unreleased designs, or confidential screenshots. Nothing is transmitted, stored, or logged on any server. Closing the tab clears everything, so your source artwork stays completely private.