Is my image uploaded anywhere?

No. The image is opened, decoded and read by your browser on your device. It is never sent to a server and nothing is stored. If you allow analytics, the site records only that a button was used, never the image, its name, size or any color.

How do I get the HEX code of a color in an image?

Open the image, click the pixel you want and read the HEX line (for example #e8573a on the sample). Press its copy button to put the code on your clipboard.

Which pixel does the crosshair pick?

The crosshair marks one pixel of the image itself, counted from the top-left corner at x 0, y 0. If your image is larger than the preview, the preview is only a scaled-down view: the pick still reads the original full-resolution pixel. Arrow keys move one pixel; Shift moves 10.

Why do I get a slightly different color on a photo each time I click?

Photos contain noise and JPEG compression, so neighbouring pixels differ by a few levels even in a flat-looking area. Use the average setting (for example 5 × 5) to get a steadier value.

How is the dominant-color palette chosen?

By median cut, the algorithm Paul Heckbert described in 1982. The image is shrunk so its longest side is at most 256 px, its colors are counted, and the color space is split again and again at the median until there are as many boxes as swatches you asked for. Each swatch is the average color of its box. It involves no randomness, so the same image always gives the same palette.

What does the share percentage mean?

It is the fraction of the image’s visible pixels that fall into that swatch’s group of colors. Shares are rounded to one decimal, so they can add up to 99.9 or 100.1.

What do the contrast ratios with white and black tell me?

They are WCAG 2 contrast ratios for white text and for black text placed on that color. 4.5:1 is the AA minimum for normal text, 3:1 for large text, and 7:1 reaches AAA. A swatch where both are low is a mid-tone that needs a different text color or a larger size.

What happens with transparent pixels?

The pick reports the pixel’s alpha next to its color: a fully transparent pixel is flagged as such, and a half-transparent one shows an 8-digit HEX and an rgba() value. The palette ignores pixels that are less than half opaque (alpha below 128 of 255) and says how many it left out.

Does it handle phone photos with rotation?

Yes. Phone photos often store a rotation flag (EXIF orientation) instead of turning the pixels. The tool applies it when opening the image, so the preview is upright and the coordinates match what you see.

Is there a size limit?

Images above 50.0 MP (for example 8000 × 6250 px) are refused with a message, because the browser could otherwise run out of memory. Large images below that limit work: the preview and the palette use a reduced copy, and picks read the original.

Why does the color differ from what my design tool shows?

The browser gives sRGB values. An image with an embedded wide-gamut profile (such as Display P3) may be converted to sRGB when it is drawn, so its numbers can differ from a tool that reads the raw file values. Colors that were not converted are exact.

Can I export the palette?

Yes. Copy it as CSS custom properties (--palette-1, --palette-2 and so on, with the share in a comment) or as JSON with each color’s HEX, RGB values and share. To turn one swatch into a full scheme, paste its HEX into the color palette generator.

Image Color Picker

Open, drop or paste an image, then click it or move the crosshair with the arrow keys to read the color of any pixel as HEX, RGB, HSL and OKLCH. On the built-in sample image (160 × 100 px), the pixel at x 100, y 36 is #e8573a, which is rgb(232, 87, 58), hsl(10, 79.1%, 56.9%) and oklch(64.5% 0.1854 33.19). The tool also lists the image’s 6 dominant colors with their share of the picture; here the largest is #f0b27a at 28.6%. Each swatch shows its WCAG contrast against white and black text, and the palette exports as CSS variables or JSON. Everything runs in your browser: your image is never uploaded.

Updated 2026-10-18Runs in your browser: nothing you enter is uploadedHow this tool works

Image

Sample image: 160 × 100 px, made for this page.

Arrow keys: move the crosshair 1 pixel and pick that pixel. Shift + arrow keys: move the crosshair 10 pixels. Click or tap to pick.

Picked color

HEX: #e8573a
RGB: rgb(232, 87, 58)
HSL: hsl(10, 79.1%, 56.9%)
OKLCH: oklch(64.5% 0.1854 33.19)
Pixel: x 100, y 36
Sampled: Single pixel
Alpha: Fully opaque

Average a block of pixels

Dominant colors

Number of colors

Based on 16,000 pixels.

- White text 1.84:1, Fail
- Black text 11.35:1, AAA
- White text 5.25:1, AA
- Black text 3.99:1, AA large
- White text 1.26:1, Fail
- Black text 16.58:1, AAA
- White text 8.4:1, AAA
- Black text 2.49:1, Fail
- White text 6.87:1, AA
- Black text 3.05:1, AA large
- White text 3.58:1, AA large
- Black text 5.85:1, AA

Press a swatch to copy its HEX code. Contrast is the WCAG 2 ratio of white or black text on the swatch.

Export

CSS custom properties

:root {
  --palette-1: #f0b27a; /* 28.6% */
  --palette-2: #2a6fb0; /* 21.4% */
  --palette-3: #f3e3c3; /* 16.3% */
  --palette-4: #1b4f84; /* 16% */
  --palette-5: #2a6549; /* 12% */
  --palette-6: #e8573a; /* 5.7% */
}

JSON

{
  "algorithm": "median cut (Heckbert, 1982)",
  "analyzedSize": "160x100",
  "colors": [
    {
      "hex": "#f0b27a",
      "rgb": [
        240,
        178,
        122
      ],
      "share": 28.6
    },
    {
      "hex": "#2a6fb0",
      "rgb": [
        42,
        111,
        176
      ],
      "share": 21.4
    },
    {
      "hex": "#f3e3c3",
      "rgb": [
        243,
        227,
        195
      ],
      "share": 16.3
    },
    {
      "hex": "#1b4f84",
      "rgb": [
        27,
        79,
        132
      ],
      "share": 16
    },
    {
      "hex": "#2a6549",
      "rgb": [
        42,
        101,
        73
      ],
      "share": 12
    },
    {
      "hex": "#e8573a",
      "rgb": [
        232,
        87,
        58
      ],
      "share": 5.7
    }
  ]
}

Dominant colors of the sample image

Median cut with 6 colors on the 160 × 100 px sample, largest share first. Contrast is the WCAG 2 ratio of white or black text on the swatch.
Color	Share of image	White text	Black text
#f0b27a	28.6%	1.84:1 (Fail)	11.35:1 (AAA)
#2a6fb0	21.4%	5.25:1 (AA)	3.99:1 (AA large)
#f3e3c3	16.3%	1.26:1 (Fail)	16.58:1 (AAA)
#1b4f84	16%	8.4:1 (AAA)	2.49:1 (Fail)
#2a6549	12%	6.87:1 (AA)	3.05:1 (AA large)
#e8573a	5.7%	3.58:1 (AA large)	5.85:1 (AA)

Averaging a block of pixels

The average option reads a square block centred on the picked pixel. Near an edge the block is trimmed to the pixels that exist.
Setting	Pixels averaged	Good for
1 pixel (exact)	1	Flat colors, logos, screenshots and UI
3 × 3	9	Photos with a little grain or JPEG noise
5 × 5	25	Photos with a little grain or JPEG noise
9 × 9	81	Textured areas such as grass, skin or film grain
11 × 11	121	Textured areas such as grass, skin or film grain

Keyboard and pointer controls

Input	What it does
Arrow keys	Move the crosshair 1 pixel and pick that pixel
Shift + arrow keys	Move the crosshair 10 pixels
Click, tap or drag (mouse)	Pick the pixel under the pointer
Tab	Move between the image, the averaging menu, the copy buttons and the palette

How to pick a color from an image

Open an image. Choose a file, drop it on the box, or paste an image from the clipboard. JPEG, PNG, WebP, GIF and SVG work; nothing leaves your device.
Pick a pixel. Click or tap the image, or focus it and use the arrow keys (Shift moves 10 pixels at a time). The magnifier shows the pixels around the crosshair.
Choose how to sample. Keep “1 pixel” for an exact value, or average a 3 × 3 up to 11 × 11 block to smooth out noise in photos.
Copy the color. Use the copy button next to HEX, RGB, HSL or OKLCH. The result also states the pixel’s alpha, so transparent areas are not mistaken for black.
Use the palette. Choose how many dominant colors to extract (2 to 12), copy a swatch, check its contrast with white and black text, and copy the palette as CSS variables or JSON.

Frequently asked questions

Is my image uploaded anywhere?: No. The image is opened, decoded and read by your browser on your device. It is never sent to a server and nothing is stored. If you allow analytics, the site records only that a button was used, never the image, its name, size or any color.
How do I get the HEX code of a color in an image?: Open the image, click the pixel you want and read the HEX line (for example #e8573a on the sample). Press its copy button to put the code on your clipboard.
Which pixel does the crosshair pick?: The crosshair marks one pixel of the image itself, counted from the top-left corner at x 0, y 0. If your image is larger than the preview, the preview is only a scaled-down view: the pick still reads the original full-resolution pixel. Arrow keys move one pixel; Shift moves 10.
Why do I get a slightly different color on a photo each time I click?: Photos contain noise and JPEG compression, so neighbouring pixels differ by a few levels even in a flat-looking area. Use the average setting (for example 5 × 5) to get a steadier value.
How is the dominant-color palette chosen?: By median cut, the algorithm Paul Heckbert described in 1982. The image is shrunk so its longest side is at most 256 px, its colors are counted, and the color space is split again and again at the median until there are as many boxes as swatches you asked for. Each swatch is the average color of its box. It involves no randomness, so the same image always gives the same palette.
What does the share percentage mean?: It is the fraction of the image’s visible pixels that fall into that swatch’s group of colors. Shares are rounded to one decimal, so they can add up to 99.9 or 100.1.
What do the contrast ratios with white and black tell me?: They are WCAG 2 contrast ratios for white text and for black text placed on that color. 4.5:1 is the AA minimum for normal text, 3:1 for large text, and 7:1 reaches AAA. A swatch where both are low is a mid-tone that needs a different text color or a larger size.
What happens with transparent pixels?: The pick reports the pixel’s alpha next to its color: a fully transparent pixel is flagged as such, and a half-transparent one shows an 8-digit HEX and an rgba() value. The palette ignores pixels that are less than half opaque (alpha below 128 of 255) and says how many it left out.
Does it handle phone photos with rotation?: Yes. Phone photos often store a rotation flag (EXIF orientation) instead of turning the pixels. The tool applies it when opening the image, so the preview is upright and the coordinates match what you see.
Is there a size limit?: Images above 50.0 MP (for example 8000 × 6250 px) are refused with a message, because the browser could otherwise run out of memory. Large images below that limit work: the preview and the palette use a reduced copy, and picks read the original.
Why does the color differ from what my design tool shows?: The browser gives sRGB values. An image with an embedded wide-gamut profile (such as Display P3) may be converted to sRGB when it is drawn, so its numbers can differ from a tool that reads the raw file values. Colors that were not converted are exact.
Can I export the palette?: Yes. Copy it as CSS custom properties (--palette-1, --palette-2 and so on, with the share in a comment) or as JSON with each color’s HEX, RGB values and share. To turn one swatch into a full scheme, paste its HEX into the color palette generator.

How it works

The image is decoded by the browser with its EXIF orientation applied (createImageBitmap with imageOrientation “from-image”), and the pixel size is read from the file header first so an oversized image is refused before it is decoded. A pick reads the original pixels: the tool draws just the picked pixel, or the block of N × N pixels around it, onto a tiny canvas with smoothing turned off and reads it with getImageData. A block is averaged with each pixel weighted by its alpha (so the hidden color of a clear pixel does not tint the result), and the alpha shown is the plain mean. The value is converted with the same formulas as the color converter: HEX and RGB are exact, HSL is shown to one decimal, and OKLCH is computed from linear sRGB through OKLab. The preview is a canvas drawn from the image, shrunk in steps of at most half when the image is large. The palette is extracted from a copy whose longest side is at most 256 px: colors are counted in a histogram of 5 bits per channel, the box holding the most pixels is split along its widest channel at the median pixel until the requested number of boxes exists (Heckbert, 1982), and each swatch is the true average of its box. Pixels with alpha below 128 are skipped. Ties are broken by fixed rules, so the result is deterministic. Contrast is the WCAG 2 ratio (L1 + 0.05) / (L2 + 0.05) of relative luminance, shown cut to two decimals so a displayed 4.5 always passes 4.5. The built-in sample is a 160 × 100 px illustration made for this site from plain shapes; the page you see before choosing a file is computed from it.

Sources

All tools Home & DIY calculators