pixel → HEX · RGB · HSL
Image color picker
Click a pixel of a picture to read its color: a pixel of #0060fd reads as rgb(0, 96, 253) and hsl(217, 100%, 50%). Add an image to pick colors from your own.
- rgb(0, 96, 253) = #0060fd
- rgb(255, 128, 0) = #ff8000
- #0060fd 75% + #ffffff 25%
Pick with a click, a tap or the arrow keys. Your image is drawn in this tab only and is never uploaded.
Scanned by 
NortonTM Safe Web
At a glance
- Price
- No charge
- Account
- None needed
- Upload
- None — the image is drawn in your browser tab and nothing is sent anywhere
- Formats
- PNG, JPEG, WebP, GIF, AVIF, BMP and SVG, as far as your browser decodes them
- Image size
- Drawn at up to 1600 pixels on the longest side; files up to 200 MB and 120 million pixels
- Palette
- Six dominant colors by median cut on about 20,000 sampled pixels
Picked colors and how the palette works
These rows were produced by the same code as the tool. The palette table uses a 4 × 4 pixel image with twelve blue pixels and four white pixels.
| Pixel color | HEX | RGB | HSL |
|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) |
| #ff8000 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| #00a86b | #00a86b | rgb(0, 168, 107) | hsl(158, 100%, 33%) |
| #767676 | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
| #fdd835 | #fdd835 | rgb(253, 216, 53) | hsl(49, 98%, 60%) |
| Palette color | Share of pixels |
|---|---|
| #0060fd | 75% |
| #ffffff | 25% |
How to pick a color from an image
Add an image
Drop a PNG, JPEG, WebP, GIF, AVIF, BMP or SVG file on the box, choose one with Browse, or paste an image from the clipboard. A sample image is shown until you add your own.
Click, tap or use the arrow keys
Click or tap a point, or drag across the picture. With the picture focused, the arrow keys move the crosshair one pixel at a time and Shift with an arrow moves it ten pixels. The tiles show the color as HEX, RGB and HSL.
Copy a color or a palette entry
Press Copy on a tile, or press a palette swatch to copy its HEX code. The palette lists the six dominant colors of the whole picture with the share of the picture each one covers.
How the colors are read
The browser decodes your file and the page draws it onto a canvas element in this tab. A picture larger than 1600 pixels on its longest side is scaled down to fit, so a color you read from a very large picture comes from the reduced copy, where neighboring pixels have been averaged. The page then asks the canvas for the red, green, blue and alpha values of the single pixel under the crosshair and prints them as HEX, RGB and HSL. A pixel with transparency is printed with its alpha value. A canvas stores colors multiplied by their alpha, so a channel of a partly transparent pixel can read a unit off: 200 reads as 199 at 50% opacity.
The palette uses median cut. The page looks at every n-th pixel, at most about 20,000 of them, and leaves out pixels that are more than half transparent. It puts these colors in one box and repeatedly cuts the box with the widest spread in one channel at the median of that channel, until there are six boxes or no box holds two different colors. Each box is shown as the average of its pixels, with the share of the sampled pixels it holds, largest first. The result is the same every time for the same picture. An image with fewer than six distinct colors gives a shorter palette, and animated images are read as a single still picture.
Image color picker questions
How do I get the HEX code of a color in an image?
Add the image, then click the spot you want. The HEX tile shows the code of that pixel, for example #0060fd, and Copy puts it on the clipboard. To get the main colors without choosing a spot, press a swatch in the palette instead.
Which image formats work?
PNG, JPEG, WebP, GIF, AVIF, BMP and SVG, as long as your browser can decode them. AVIF depends on the browser version. Other files, such as PDF or TIFF, are refused with a message. Files above 200 MB or above 120 million pixels are also refused.
How is the palette of six colors chosen?
By median cut on a sample of about 20,000 pixels: the colors are split into boxes at the median of their widest channel until there are six, and each box becomes the average of its pixels. The percentage under each swatch is the share of the sampled pixels in that box. Pixels that are mostly transparent are skipped.
Why do two nearby pixels give slightly different colors?
Photos and compressed images such as JPEG vary a little from pixel to pixel, so two points that look the same can differ by a few units per channel. Click several points, or use the palette, which averages many pixels, when you want a representative color.
Is my image uploaded anywhere?
No. The file is decoded and drawn by your browser in this tab, the colors are read from that drawing, and nothing is sent to a server. Closing or reloading the page discards the image.
What does the screen picker button do?
In browsers that offer the EyeDropper feature, the button lets you click any point on your screen, including other windows, and shows its color. Browsers without that feature do not show the button; the picture picker works everywhere.