imgglide
English

Get color codes from an image

Drop in a picture, then tap or click wherever you want a color. Every pick is written out in four formats, and the picture's main colors sit underneath as a ready-made palette.

Open an image, then tap or click on it to pick a color.

or drop a file here

You can also paste an image with Ctrl+V (Command+V on a Mac).

Your files are processed on your own device and never uploaded.

How to use it

  1. Open a picture with ‘Choose a file’ or by dropping it on the page. For a screenshot, paste it with Ctrl+V, or Command+V on a Mac, or use ‘Paste image’ if your browser shows that button.
  2. Tap or click the spot you want. With a mouse, a magnifier follows the pointer; on a phone, press, hold and drag to see it above your finger, then lift to pick.
  3. Read the values under ‘Picked color’: ‘HEX’, ‘RGB’, ‘HSL’ and ‘CMYK (approx.)’. Each line has its own copy button.
  4. Scroll to ‘Main colors’ and set ‘Colors’ to anything from 5 to 10. Click a swatch to see that color's codes under ‘Picked color’.
  5. ‘Copy HEX list’ gives one code per line, ‘Copy as CSS’ gives custom properties, and ‘Save as PNG’ gives a palette image. ‘Open another image’ loads the next picture.

What it does

  • An 11 × 11 pixel magnifier

    Hover with a mouse, or hold and drag on a touch screen, and a magnifier shows an 11 × 11 grid of pixels with the target pixel boxed and its HEX code underneath. It sits beside the pointer on a computer and above your finger on a phone, so you can see which neighbor you are about to pick.

  • Four formats, one click each

    Every pick is listed as HEX, RGB, HSL and CMYK, and each line has its own copy button. A semi-transparent pixel gets an eight-digit HEX plus RGBA and HSLA values, with its opacity written out as a percentage.

  • The last 12 picks

    ‘Recent colors’ keeps your latest twelve picks and stores only their hex codes in this browser. Click one to bring it back, copy it, or press ‘Clear’ to empty the list.

  • Main colors with their shares

    The palette finds 5 to 10 dominant colors, 6 to begin with. Each comes with its share of the picture, written as a percentage and drawn as a proportional bar. They are worked out on a copy reduced to 256 pixels on the long side, and mostly transparent pixels are ignored.

  • A palette ready for code or slides

    The CSS version is a :root block with --color-1, --color-2 and so on, each followed by its percentage as a comment. The PNG shows one swatch per color with its HEX code and share underneath, and takes your file's name with -palette added.

  • Pick from anywhere on screen

    In browsers that have an eyedropper, mostly desktop Chrome and Edge, ‘Pick from screen’ samples any pixel visible on your display, from another window or a web page, not only from the opened picture. It works before you open any image, and the color lands in ‘Picked color’ and the recent list like any other pick.

Good to know

A color picker answers small, practical questions. Which exact blue is in this logo? What shade is the wall in this listing photo? Which colors does this slide photo use, so the heading can match? A code such as #E4572E goes straight into CSS and design tools, RGB and HSL are what most graphics programs speak, and CMYK is only a starting point for print.

Know what you are sampling. Each pick reads a single pixel, so a grainy photo or a JPG with compression noise can return a slightly different color from the pixel next to it. Pick a few neighbors and compare, or let the main colors give the overall impression. Values are in sRGB, the color space browsers use. The CMYK line is derived from RGB, which makes it a guess at best; ask the printer for a proof when a color must match exactly.

A small picture is shown enlarged up to 4× with hard pixel edges, so single pixels are easy to hit. Anything above 16.7 megapixels (4096 × 4096) is reduced to that limit first, the page says so, and colors are read from the reduced copy. From the keyboard, click the picture, move with the arrow keys (Shift jumps ten pixels) and press Enter to pick.

Questions and answers

Where do I find the HEX value of a pixel?

Click the pixel. The HEX value is shown beside the big swatch under ‘Picked color’, with its own copy button.

Can I pull a palette out of a photo?

Yes. ‘Main colors’ lists 5 to 10 of the picture's dominant colors with their shares. Copy them as a list or as CSS, or keep a palette image with ‘Save as PNG’.

Why does the CMYK line say approx.?

Screens mix light and printers mix ink, so a CMYK number derived from RGB is only an estimate. Ask the printer for a proof before you trust it.

Can I use a screenshot without saving it first?

Yes. Copy it, click the page and paste. The shortcut is Command+V on a Mac and Ctrl+V elsewhere, and ‘Paste image’ does the same where your browser allows it.

Why does ‘Pick from screen’ not appear for me?

Your browser has no eyedropper. Chrome and Edge on a computer do, most others do not. You can still pick from any picture you open.

Does the page remember my colors?

The last 12 stay in this browser as hex codes, so they are waiting next time. ‘Clear’ beside ‘Recent colors’ empties the list.

Related tools