How do I pick a color from an image?

Drop or choose the image, hover over it to preview the pixel color, then click the exact spot you want. The picker instantly shows that pixel's HEX, RGB, and HSL with a swatch, and each value has a copy button.

Can I get the HEX code of a color in a screenshot?

Yes. Load the screenshot like any image, hover to find the shade you want, and click it. The HEX code appears next to the RGB and HSL values so you can copy it into CSS or a design tool.

Does the color picker keep transparency from PNG images?

It does. When a sampled pixel is not fully opaque, the alpha is carried through: RGB is shown as rgba(...) and the HEX gains an eighth alpha pair (#rrggbbaa), matching how the pixel actually renders.

What image formats can I pick colors from?

Anything your browser can decode to a canvas — PNG, JPEG, WebP, SVG, GIF, AVIF, BMP, and ICO. For exact brand colors prefer a lossless PNG, since JPEG and WebP can shift a flat fill by a shade.

Can I save several colors from one picture?

Yes. Every click adds the color to the Recent colors strip, up to a dozen picks. Click any swatch there to reopen it, then copy its HEX, RGB, or HSL to assemble a palette from the image.

Is my image uploaded when I pick a color from it?

No. The Image Color Picker draws your picture to a canvas and reads pixels entirely on your device. The image is never sent to ArrayKit or any server, so private mockups and photos stay local.

Image Color Picker Online

Drop an image, hover to preview any pixel, and click to grab its HEX, RGB, and HSL — all in your browser. The image never leaves your device.

The Image Color Picker decodes your image to a canvas and samples pixels entirely in your browser. The picture you drop and the colors you pick never leave your device and are not uploaded to ArrayKit.

Open the CSS Color Converter

About Image Color Picker

The Image Color Picker turns any picture into a color sampler. Drop or choose a photo, logo, screenshot, or design mockup, then move your cursor across it to preview the pixel under the crosshair, and click to lock that exact color. Each sample is shown as HEX, RGB, and HSL next to a live swatch, so you can drop it straight into CSS, a design token, or a paint bucket. A recent-colors strip keeps your last picks handy for building a palette, and every value has its own copy button. Transparent pixels keep their alpha, so PNG overlays read back as rgba and #rrggbbaa. It is built for designers, front-end developers, and anyone matching a brand color from an image. The picture is decoded to a canvas and sampled on your device — it is never uploaded.

Features

Hover an image to preview the pixel color live, then click to lock it in
Shows HEX, RGB, and HSL for every sampled pixel beside a live swatch
Per-value copy buttons for the HEX, RGB, and HSL notation you need
Recent-colors strip remembers your last picks so you can build a palette
Alpha is preserved — translucent PNG pixels read back as rgba and #rrggbbaa
Accepts PNG, JPEG, WebP, SVG, GIF, AVIF, BMP, and ICO images
Crosshair cursor and a checkerboard backdrop make transparent areas obvious
Runs entirely in your browser — the image is sampled on your device

How to use the Image Color Picker

Click the drop zone or drag an image file onto it
Move your cursor over the image to preview the pixel color
Click a spot to lock that color and reveal its HEX, RGB, and HSL
Copy the notation you need, or reopen an earlier pick from Recent colors

Example

Input

Sampled pixel: R 37, G 99, B 235 (opaque)

Output

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

One click on a blue button turns the pixel into ready-to-paste CSS color values.

Common errors & troubleshooting

The picked color looks slightly off from the source image. — JPEG and WebP use lossy compression, so flat fills can vary by a shade between neighbouring pixels. Sample a few nearby points, or use a PNG export of the design for exact brand colors.
A transparent area returns rgba(0, 0, 0, 0) instead of a color. — That pixel is fully transparent, so there is no color to read. Hover a filled part of the artwork; the checkerboard backdrop marks the see-through regions.
An SVG or high-resolution image shows a color from the wrong spot. — The picker samples the pixel under the crosshair at the image's own resolution. Zoom your browser in for finer control, or click precisely on the edge you want.

Frequently asked questions

How do I pick a color from an image?: Drop or choose the image, hover over it to preview the pixel color, then click the exact spot you want. The picker instantly shows that pixel's HEX, RGB, and HSL with a swatch, and each value has a copy button.
Can I get the HEX code of a color in a screenshot?: Yes. Load the screenshot like any image, hover to find the shade you want, and click it. The HEX code appears next to the RGB and HSL values so you can copy it into CSS or a design tool.
Does the color picker keep transparency from PNG images?: It does. When a sampled pixel is not fully opaque, the alpha is carried through: RGB is shown as rgba(...) and the HEX gains an eighth alpha pair (#rrggbbaa), matching how the pixel actually renders.
What image formats can I pick colors from?: Anything your browser can decode to a canvas — PNG, JPEG, WebP, SVG, GIF, AVIF, BMP, and ICO. For exact brand colors prefer a lossless PNG, since JPEG and WebP can shift a flat fill by a shade.
Can I save several colors from one picture?: Yes. Every click adds the color to the Recent colors strip, up to a dozen picks. Click any swatch there to reopen it, then copy its HEX, RGB, or HSL to assemble a palette from the image.
Is my image uploaded when I pick a color from it?: No. The Image Color Picker draws your picture to a canvas and reads pixels entirely on your device. The image is never sent to ArrayKit or any server, so private mockups and photos stay local.

Related tools

CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
EXIF Viewer & Remover — View and strip EXIF metadata (including GPS) from photos — nothing is uploaded.