Extract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation.
Drag & drop image here, or click to upload
Supports PNG, JPG, WEBPExtract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation. Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
When designing a website, slide deck or social card, you often need the exact color from a brand logo, product photo or reference image. Guessing a hex code by eye is unreliable, and pasting a screenshot into design software is tedious. With this tool you upload an image, click anywhere on it, and instantly get that pixel’s HEX, RGB and HSL values, ready to copy into CSS, Figma or Canva.
As you hover over the image, a round loupe magnifies the 9×9 pixels around the cursor and outlines the selected pixel in red. In photos, edges and gradients mean neighbouring pixels can differ a lot, so the loupe helps you avoid muddy colors caused by anti-aliasing or noise and land exactly on the shade you want. Every pick is added to the color history so you can compare colors and assemble a palette.
Once you have colors, the WCAG 2.1 contrast checker lets you set a foreground (text) and background color, calculates the contrast ratio and shows whether it passes. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text (18pt and up, or 14pt bold) is relaxed to 3:1 and 4.5:1. Checking contrast when you derive button or heading colors from a brand color prevents problems for older readers, people with low vision and anyone reading in bright sunlight.
Keep in mind that the picked value is what is stored in the image file. Photos are affected by lighting, white balance and compression, so the same product can have different codes in different shots; for official brand colors, rely on the brand guidelines. The image is read with Canvas inside your browser and is never uploaded.
Clicking a pixel shows HEX, RGB and HSL at the same time, and each can be copied with one click.
Noise, gradients and anti-aliased edges make neighbouring pixels differ. Use the loupe to aim at an evenly colored patch.
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt+ or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.
No. Pixels are read only in your browser and the image is never sent to a server.
Browse this category: Design & Color
Visually configure and preview CSS Flexbox and Grid grid layouts, view animations, and copy CSS code.
Generate beautiful color schemes and export HEX/RGB values.
Clean and optimize SVG code locally with file size comparison and live preview.
Design linear and radial gradients visually, explore curated presets and export CSS code.
