Image color picker · no upload · no API
Detect any color from any image
Drop in an image and hover to read the exact pixel. Get HEX, RGB, HSL, CMYK, LAB and more — and your image never leaves your browser.
Drop an image, paste, or click to upload
PNG · JPG · WEBP · GIF · up to 20MB
Picked color
Dominant colors
Recent
How it works
Drag and drop, paste from your clipboard, upload a file, or paste an image URL. It loads instantly and stays on your device.
Move over the image and the magnifier reads the exact pixel. Click to lock the color and see every format at once.
Copy HEX, RGB, HSL or any other value with one tap, grab the dominant palette, or send the color into a generator.
Why designers and developers use it
A 24× magnifier loupe reads the precise pixel under your cursor — no more eyeballing close-enough colors.
HEX, RGB, HSL, HSV, CMYK, LAB and XYZ, plus the nearest CSS and Tailwind names, all at once.
Pull the key colors out of any photo or screenshot automatically to kick-start a palette.
Everything runs in your browser. Your images are never uploaded, stored, or seen by anyone.
Check WCAG contrast and simulate color-vision deficiencies before you ship.
Generate CSS variables, Tailwind scales and Bootstrap themes ready to paste into your project.
Popular tools
Convert HEX color codes to RGB values instantly.
Converters RGB to HEX ConverterConvert RGB values to HEX color codes instantly.
Tools Color Palette GeneratorGenerate harmonious palettes from any base color.
Generators Gradient GeneratorBuild linear & radial CSS gradients.
Accessibility Color Contrast CheckerWCAG AA/AAA contrast ratio checker.
Accessibility Color Blindness SimulatorSimulate protanopia, deuteranopia, tritanopia & more.
Developer Tailwind Color GeneratorGenerate a Tailwind color scale from one color.
Tools Color WheelInteractive HSV color wheel and picker.
Three workflows this replaces
A button in a competitor’s screenshot, a shade in an old logo, a color in a client’s PDF export. Instead of opening a full design suite to use one eyedropper, drop the image here and read the pixel. Copy the HEX and close the tab.
A brand guideline usually hands you a single HEX. Shipping a UI needs a hover state, a disabled state, a border, a dark-mode surface. The tint, shade, tone and Tailwind scale generators build that ramp from the one color you were given.
Contrast failures are cheap to fix in a mockup and expensive to fix after launch. Check a pair in the contrast checker, then confirm it still reads correctly in the color blindness simulator before it reaches code.
About ColorDetector
Introduction
ColorDetector is a free image color picker and HEX color finder for anyone who needs the exact color inside a photo, screenshot, logo or design file. Open an image and the detector reads the precise pixel under your cursor — entirely in your browser.
Why choose ColorDetector
It is fast, private and genuinely free. Your image is never uploaded to a server, there is no account to create, and there is no limit on how many colors you detect or convert. It works on desktop and mobile alike.
Key benefits
- Detect any pixel with a 24× magnifier
- Copy HEX, RGB or HSL in one tap
- Extract dominant colors automatically
- 100% private — nothing is uploaded
Supported color formats
Read a single pixel as a RGB color finder and dominant color detector, then export to any of these formats.
Who can use this tool
Which color format should you use?
Most projects only need two or three formats, and knowing when to reach for each one saves a lot of guesswork. HEX is the everyday shorthand for the web — six characters that web browsers, CSS and nearly every design tool understand. RGB (and its transparent sibling RGBA) describes the same color as separate red, green and blue channels, which is handy when you need to nudge one channel or add an alpha value for overlays.
HSL is the friendliest format for adjusting a color by hand: change the hue to shift the color, the saturation to make it richer or greyer, and the lightness to go brighter or darker without touching the underlying hue. Designers building accessible palettes often think in HSL for exactly that reason. CMYK belongs to print, while LAB and XYZ are perceptual spaces used when color accuracy across devices matters. ColorDetector shows all of them at once, so you never have to convert by hand.
Everyday workflows
A common task is rebuilding a brand color you can see but do not have the code for — a competitor's button, a color in a client's old logo, or a shade from a stock photo. Open the image, hover the exact spot, and copy the HEX. Because the magnifier samples a single pixel, you avoid the slightly-off color you would get by eyeballing it.
Another is starting a palette from a mood image. The dominant-color extraction pulls the handful of colors that define a photograph, which gives you an honest starting point instead of a blank canvas. From there you can jump straight into the palette generator, gradient builder or contrast checker. Each tool is linked from the result panel, so a color you pick on the homepage carries through the rest of the toolkit without re-typing anything.
Accuracy, privacy and how detection works
When you open an image, ColorDetector draws it onto an HTML canvas inside your browser and reads the red, green and blue values of whichever pixel sits under your cursor. That raw pixel data is converted, in real time, into every supported format using the same color-space math that design software relies on. Nothing about that process needs a server, which is why the tool works offline once loaded and why your images never leave your device — a genuine privacy benefit, not just a marketing line.
Dominant colors are found by sampling the image and grouping similar pixels together, then ranking those groups by how much of the picture they cover. The result is a short, representative set of colors rather than a noisy list of near-duplicates. If you need a more deliberate palette afterwards, the dedicated generators let you build tints, shades, tones and full scales from any single color you have detected.
Frequently asked questions
Is my image uploaded anywhere?
No. The detector reads pixels with the Canvas API directly in your browser. Nothing is sent to a server, so it works offline once the page has loaded and your images stay private.
What color formats can I copy?
HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, XYZ, the nearest CSS color name and the nearest Tailwind color — each with a one-tap copy button.
How are dominant colors detected?
The image is downscaled and pixels are grouped into color buckets; the largest buckets become the dominant palette — up to ten colors, all computed locally.
Does ColorDetector cost anything?
No. Every tool is free to use with no account, no watermark and no limit on how many colors you detect or convert.
Can I use it on my phone?
Yes. The site is fully responsive and you can use your phone’s camera to capture an image and detect colors from it.
How accurate is the color it reads?
The value is the exact pixel under your cursor, so it is accurate to the image. Bear in mind that JPEG compression, anti-aliased edges and gradients can make a pixel differ from the color a designer originally specified.
Start detecting colors now
No downloads, no sign-up, no waiting. Open an image and read its colors in seconds.