Stayput

↑↓ to move, Enter to open, Esc to close. Search runs on this page. Nothing you type is sent.

Get the HEX code of a colour in an image

Point at a pixel and copy its HEX code, ready for CSS, Figma, Canva or a brand guide.

Find the HEX code of any colour in an image. Point at a pixel, copy #RRGGBB, RGB or HSL. It is free, needs no account and adds no watermark, and your files are not uploaded: everything runs in your browser on your device. The size limit is your device’s memory, and phones hold less; give the page a short while after one visit to save itself for offline use, and then it works offline.

Drop an image to get HEX codes fromor click to choose a file.
    Details

    Save palette downloads the main colours and the ones you picked as an image, with every HEX code ready to copy.

    Working…

    Done

    Your files are processed on this device and never sent to a server. Reload the page to clear everything from memory.

    A HEX code, like #1A73E8, is how the web, most design tools and brand guides write a colour: a # followed by two hexadecimal digits each for red, green and blue. Drop an image here, point at the colour you want and its HEX code is on the card, one click from your clipboard.

    The same card shows the RGB and HSL forms. RGB is what many apps and print briefs ask for; HSL (hue, saturation, lightness) is handy in CSS when you want a lighter or darker version of the same colour. The card itself is painted in the colour, with black or white text picked for contrast.

    Nothing is uploaded: the page reads the pixel from a canvas in your browser tab. Logos, client work and screenshots of private apps stay on your device.

    The copied values are ready to paste as they are. HEX comes as #1A73E8, RGB as rgb(26, 115, 232) and HSL as hsl(214, 82%, 51%), the forms CSS accepts directly. In Figma, Canva and most other design tools, paste the HEX into the colour field; the # is accepted with or without. For a brand guide, list the HEX and RGB together, since some tools and suppliers ask for one and some for the other.

    To check a colour you have been given, such as a logo’s HEX from an old brand guide, pick it from a flat area of the original PNG export, well away from edges. Pixels along an edge are blended with the background and give a slightly different code. Picking two or three spots from the same flat area and getting the same code tells you it is exact.

    How it works

    1. Drop the image, or tap to pick one.
    2. Point at the colour. The magnifier helps you hit the exact pixel on a thin line or small text.
    3. Copy the HEX code. Click to keep several and copy each in turn.

    In your browser, not on a server

    Your browser decodes the image (libheif or the Squoosh decoders step in for HEIC, AVIF and JPEG XL) and draws it on a canvas in your tab. The colour under the cursor is read straight from that canvas, one pixel at a time, at up to 4096 pixels across, so a pick matches the file exactly. The main colours come from k-means clustering over a sample of about 20,000 pixels, run in the page with a fixed seed so the same image always gives the same palette.

    Compared with upload-based tools: Colour pickers online upload the picture to show it back to you, which is a strange trade for a screenshot of a client’s unreleased design or a photo from your phone. Browser extensions that pick colours can read every page you visit. Here the image never leaves your device, and there is nothing to install.

    Verify it yourself. Give the page a short while after one visit to save itself for offline use, then turn off Wi-Fi or switch to airplane mode and run the tool again. Or open your browser's developer tools (F12, or Cmd-Option-I on a Mac), pick the Network tab, and watch it while you convert. The panel above does the same count for you.

    Questions

    Are HEX codes upper or lower case?

    Either works everywhere: #1A73E8 and #1a73e8 are the same colour. This page shows upper case because it is easier to read.

    What about transparent pixels?

    Colours are shown as they look on white. A half-transparent red in a PNG reads as a pink, which is what you would see on a white page.

    Can I get the short three digit form, like #FFF?

    The page always shows the full six digits. A code can be shortened only when each pair repeats: #FFFFFF is #FFF and #336699 is #369. Most colours picked from a photo, like #1A73E8, have no short form. Both forms work in CSS, so there is rarely a reason to shorten it.

    Which HEX do I get from a gradient or a photo?

    The exact pixel under the crosshair, so a pick in a gradient depends on where you point. For a single code that stands for a whole area, use the strip of main colours under the image: clicking one of those swatches copies its HEX, which is an average of every pixel it covers.

    Is the file uploaded anywhere?

    No. There is no server in this process. The page is a static file and the work is done by code running inside your browser tab. Give the page a short while after one visit to save itself for offline use; then you can turn off Wi-Fi and it still works.

    More image tools

    Color picker from image

    Point at any pixel to get its HEX, RGB and HSL code, and see the main colours of the picture. The image stays on this device.

    Compress PNG

    Shrink PNG screenshots, logos and graphics while keeping them PNGs, transparency and all. Nothing is uploaded.

    Remove EXIF Data

    See what a photo reveals, then delete it. The image data is copied unchanged and only the metadata is removed; a sideways JPG is re-encoded only if Apply orientation is on.

    EXIF Viewer

    Drop a photo to read its metadata, including the location it was taken. The file is read on this device, so checking a private photo does not share it.

    Other conversions

    Guides