Color Picker
Upload an image and click any pixel to read its exact colour — useful for matching brand colours from a screenshot.
How Color Picker works
Pick the exact colour of any pixel in a photo and read it as HEX, RGB and HSL — useful for matching a brand colour from a screenshot. Everything happens inside this page: the tool reads your input, runs the calculation or conversion locally, and hands the result back to you. Nothing is transmitted, because there is no backend to transmit it to.
That design choice is deliberate. Most free tool sites upload your files to a server, process them there, and quietly keep a copy. Toolcin cannot do that — the site is a set of static files. If your connection dropped the moment the page finished loading, every tool would still work.
Reading a pixel, not guessing
The image is drawn onto a canvas at its original size, and each click reads the exact red, green and blue values of that pixel. There is no averaging and no sampling: what you click is what you get.
That matters when matching a brand colour from a screenshot. A colour that looks uniform on screen is often several slightly different values, and picking the middle of a flat area rather than an edge gives the intended one.
Three ways to write the same colour
HEX is what CSS and design tools expect. RGB is what the canvas returns and what most image editors show. HSL is the useful one for modification: keeping hue and saturation and changing only lightness gives you a tint or shade that still belongs to the same colour family.
Copying HEX is one click; the other formats are shown so you can read them without converting by hand.
| Format | Example | Used by |
|---|---|---|
| HEX | #38F2CF | CSS, Figma, most brand guides |
| RGB | rgb(56, 242, 207) | Canvas, image editors |
| HSL | hsl(168, 88%, 58%) | Tints, shades, palette work |
Compression changes the colour
A JPEG that has been saved and resaved shifts individual pixels slightly. Two neighbouring pixels in a supposedly flat area can differ by two or three steps in each channel, which is invisible to the eye and visible in a hex code.
If exactness matters, work from a PNG or a lossless screenshot. If you must use a JPEG, click the centre of the largest flat area and accept that the value is approximate.
Good to know
- Works offline once loaded, including on flights and in locked-down networks.
- No file size limit beyond your device's own memory.
- Free to use, with no account and no usage counter.
- Results are produced locally, so they are not logged or shared with anyone.
Questions
Is anything uploaded when I use Color Picker?
No — everything runs inside your browser, so the data you enter never leaves your device.
Can I use the result commercially?
Yes, whatever you generate or calculate here is yours to use.
Does it work on any image format the browser supports?
Yes — PNG, JPG, WebP, GIF and SVG all load into the canvas. Animated files show their first frame.
Is the image uploaded?
No. It is decoded and drawn in your tab; nothing is transmitted.
Keep going
More design tools
Color Converter
Convert colours between HEX, RGB, HSL and HSV, check contrast ratios and copy ready-to-use CSS values.
Open toolCSS Gradient Generator
Design a gradient with two or three colours, adjust the angle and copy the CSS.
Open toolBox Shadow Generator
Create a box shadow with live preview and copy the exact CSS declaration.
Open toolColor Palette Generator
Start from any colour and get five tints, five shades and three harmony colours with one-click copying.
Open toolFavicon Generator
Design a simple favicon from a letter or emoji, then download a multi-size .ico plus PNG versions.
Open toolBorder Radius Generator
Set each corner independently and copy the ready-to-use border-radius CSS.
Open tool