Image → hex code, straight from the pixel
Get the hex code
of any pixel in an image
Drop in a screenshot, photo or logo and click the color you need. You get the exact HEX along with RGB, HSL, OKLCH and CMYK, a magnifier to land on the right pixel, and the whole palette underneath if one code is not enough.
- Nothing uploaded
- No signup
- No watermark
Drop an image here
or paste with Ctrl+V — JPG, PNG, WebP, GIF, AVIF or BMP, up to 50 MB
Your image is processed on your device and never uploaded.
Why the number is right
A hex code is only worth having if it is the color that is actually in the file.
01 — Read, not resampled
The value comes from the decoded image at its natural size, not from the scaled copy on your screen. Reading the scaled copy means reading pixels the browser invented while resizing — a color that is nowhere in the original.
02 — Averaged on request
JPEG compression shifts individual pixels off what the region really is. Switch the sample window to 3×3 or larger and the reading averages the neighbourhood, which cancels that noise instead of reporting an artifact as a brand color.
03 — Nothing uploaded
Decoding and reading happen in your browser. No server sees the image, so an unreleased design or a client file under NDA is safe to drop in here.
Reference
Five ways to write the same color
Every pick is reported in all five at once, so you can copy whichever one your tool wants without converting anything by hand.
HEX
#ff5733
Two base-16 digits per channel. The default in CSS, Figma, Sketch and almost every design handoff.
RGB
rgb(255, 87, 51)
The same three numbers in decimal, 0 to 255. Easier to read at a glance and what most image libraries expect.
HSL
hsl(10.6, 100%, 60%)
Hue, saturation, lightness. Use it when you want to shift a color by hand — drop the lightness and you get the same hue, darker.
OKLCH
oklch(68.04% 0.21 33.69)
Perceptually uniform, so an equal change in lightness looks equal. The right choice for building tints and shades that stay even.
CMYK
cmyk(0%, 66%, 80%, 0%)
Subtractive, for print. Approximate by nature — a real separation depends on the press, ink and paper.
What a hex code actually is
A hex code is three numbers wearing a disguise. #ff5733 is red 255, green 87, blue 51 — the same triple as rgb(255, 87, 51), written in base 16 so each channel takes exactly two characters. ff is the largest value a channel can hold, 00 the smallest.
That fixed width is the entire reason the notation caught on. Every color is six characters, so codes line up in a stylesheet, sort predictably, and can be read aloud or typed from a screenshot without ambiguity. There is no color a hex code can express that RGB cannot — it is a formatting choice, not a different palette.
The shorthand, the alpha and the case
Three-digit codes are a shorthand where each digit is doubled:#f53 means #ff5533. Only colors whose channels happen to be repeated digits can be written that way, which is why you see it on flat web-safe values and almost never on a color sampled from a photograph.
Four and eight digits add an alpha channel — #ff573380 is that same orange at 50% opacity. This tool reports the opaque value and ignores alpha, since transparency belongs to how you use the color rather than to the color itself. Case never matters: #FF5733 and #ff5733 are identical, and the readout emits lowercase because that is the prevailing convention in CSS.
Hex is not the only notation you need
Hex is the right thing to paste into a design tool and the wrong thing tomodify. Nothing about #ff5733 tells you how to make it 10% darker while keeping the hue — you would have to convert, adjust and convert back.
That is what the other rows are for. HSL exposes lightness directly, so you can build a darker variant by changing one number.OKLCH does the same but perceptually uniformly, meaning a 10% lightness change looks like the same size step on a yellow as on a navy — which plain HSL badly fails at. CMYK is there for print, flagged approximate because a real separation depends on the press and the paper.
Where the code goes
One value is a click to copy. A whole set is better handed over as code, which is what the export panel is for: a plain list of HEX codes for spreadsheets and scripts, CSS custom properties, a Tailwind v4 @theme block, SCSS variables, W3C-style JSON design tokens, or an SVG swatch strip to drop into a design file.
Before a sampled color carries body text, run it through the accessibility panel. It reports the WCAG 2.2 contrast ratio against any other color in the palette and proposes the nearest passing shade of the same hue when a pairing fails — the usual fate of a brand color pulled straight out of a logo.
Nothing leaves your browser
There is no upload step, no account and no image history. The file is decoded locally and the palette pass runs in a Web Worker on your own machine, so the tab stays responsive and the image stays on your device.
Frequently asked questions
How do I find the hex code from an image?
Ctrl+V, then click the pixel you want. A magnifier shows exactly which pixel you are over, and the HEX code appears immediately alongside RGB, HSL, OKLCH and CMYK. Click any value to copy it.How do I get a hex code from a screenshot?
Ctrl+V on this page — the image loads straight from your clipboard with no file to save first. Nothing is uploaded, so this is safe for unreleased work and internal tools.What is a hex code?
#ff5733. Each pair is one channel — red, green, then blue — running from 00 (none) to ff (full). That gives 16,777,216 possible colors, and it is the notation CSS and design tools expect.