Pick up colour code — Upload Image
Upload or drag an image, hover/tap to inspect a pixel and copy Hex/RGB/coordinates. Works offline in your browser.
Magnifier
Discover a fast, private, and easy way to extract color codes from any image with smb’s “Pick Up Colour Code — Upload Image” tool. Whether you’re a web designer matching brand palettes, a developer needing precise hex/RGB values, a content creator creating cohesive visuals, or simply curious about the shades in a photo — this tool lets you upload an image and instantly read the exact pixel color under your cursor or finger.
Built to be intuitive and responsive, the color picker works entirely in your browser without sending files to any server. That means your images stay on your device — preserving privacy and speeding up the whole process. Drag and drop an image, choose a file from your computer or phone, or use the sample image to try the interface immediately. The app automatically fits images to your screen while preserving pixel-accurate sampling, so the color you pick is exactly what’s in the image.
How it works is simple: once an image is loaded, hover your mouse (desktop) or tap the image (mobile) to reveal a magnified preview of the area under the cursor. A magnifier pane shows a zoomed-in patch with a crosshair so you can select single pixels precisely. The tool displays the picked color as a Hex code (e.g., #595D78), RGB values (e.g., rgb(89, 93, 120)), and the exact X/Y coordinates within the image. A live color swatch updates in real time so you can quickly validate the shade against other elements.
Key features that designers and developers will love:
Pixel-perfect sampling — The canvas reads raw pixel data so the hex and RGB values reflect the exact color in the image, not an approximation.
Magnifier with crosshair — Precise selection even on tiny details or complex textures.
Zoom controls — Visual zoom for easier targeting while preserving the accuracy of pixel sampling.
Palette management — Save picked colors to a palette for later use. Reorder, delete, export as JSON, or download swatches as a PNG.
Copy to clipboard — One-click copy for Hex, RGB, or coordinate values to quickly paste into design tools, CSS, or documentation.
Client-side-only operation — No uploads, no external servers: everything runs locally in your browser for speed and privacy.
Mobile and desktop friendly — Touch-optimized interactions for mobile users, plus keyboard shortcuts for desktop power users.
Practical uses include matching UI components to brand guidelines, extracting color schemes from inspirational photos, creating accessible contrast checks (pair with a contrast checker after copying the hex), generating color tokens for design systems, and producing downloadable swatches for team handoffs.
The tool also supports useful workflows:
Quick brand matching — Upload a product mockup or logo and click a few pixels to capture the core brand colors. Save the palette and export it for handoff to developers.
Content creation — Pull colors from a photo to harmonize social posts, cover images, or thumbnails without guessing the exact shade.
Front-end styling — Copy hex codes straight into your CSS or design editor and use the exact colors that appear in your imagery.
Palette exploration — Explore gradients, textures, and shadows — pick multiple colors from the same image to build a cohesive set.
Accessibility and reliability were priorities during development. The UI uses a clear contrast, readable fonts, and touch-friendly controls. Because the canvas reads image data directly, colors remain accurate even after zooming visually; the tool scales the view but samples raw pixels to ensure reliability. If you’re working with cross-origin images (images hosted on another domain without CORS enabled), the browser’s security model may prevent pixel access — in that case, use a local file upload or a copy of the image to proceed.
Privacy-first design means no image or color data leaves your device. This is especially useful for designers working with sensitive or proprietary assets. Everything is ephemeral: palettes can be exported to files you control, and you can clear or download swatches at any time.
Tips for best results:
Use high-resolution images when possible — larger pixel buffers make fine sampling easier.
For tiny details, use the magnifier and zoom controls to pinpoint single pixels accurately.
Save frequently used colors to a palette for consistent use across projects.
Export palettes as JSON if you need to import colors into other tools or share with a team.
Get started in seconds: click Choose Image, drag and drop your file, and move your cursor to begin sampling. If you want a quick demo, pick the included sample image to see all features instantly.
smb’s “Pick Up Colour Code” tool is free to use, runs entirely offline in your browser, and is built for both casual and professional workflows. Whether you’re refining visual design, documenting brand colors, or preparing assets for development, this simple, reliable color picker helps you get the exact color codes you need — fast.