The exact color, from your own picture.

Pick a color from a photo or screenshot and copy its HEX, RGB or HSL code, in your browser with nothing uploaded, and know how close the sample is.

By Suraj Kumar1 November 20264 min read

A series of teal tones and a teal-to-cream gradient

You like the blue in a photo, or need the exact green of a logo in a screenshot, and want its code. The KeepSimp color utility finds it in your browser: pick a point in a picture, or anywhere on your screen where the browser allows it, and copy the code in the form you need.

Pick from a picture.

Open the color utility and choose Get colors from a photo. Add a PNG, JPEG, WebP or GIF of up to 10 MB. The picture is read on your device; nothing is sent anywhere.

Click a point on the picture, or type its coordinates. A marker shows where you sampled, and the color appears with its opacity. Open it in Convert to copy it as HEX, RGB, HSL, OKLCH or another form.

Why a sample is close, not exact.

To keep the work small, the picture is read at most 256 pixels on a side. A click samples one pixel of that smaller copy, which blends a block of the original's pixels. For a flat area of color, such as a logo or a button, that is the color. For a thin line, a fine pattern or a noisy photo, the sample can differ from any single pixel you see.

Colors are converted to sRGB as the picture is read. A JPEG also shifts colors a little when it is saved, so a color from a photo of a logo is rarely the brand's own code. When the exact code matters, look for it in the brand's own guide.

Guide: brand color palettes with sources

Pick from anywhere on the screen.

Some browsers let a page offer a screen eyedropper. Where yours does, the color utility shows the button, and pressing it lets you pick any pixel on the screen, in another window too. MDN marks the feature as experimental and not available in every widely used browser, so the button only appears where it works.

The eyedropper samples the screen as shown, which is exact for that pixel.

Take the main colors at once.

The same panel finds a few representative colors in the picture by itself, ignoring parts that are mostly see-through. Send them to Palettes to tidy, lock and export them as CSS, JSON, design tokens or a PNG strip.

Before you set text in one of them, check how well it reads on its background.

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool