Dominant colors from a photo, each with its share of the pixels.
Runs entirely on your device. Nothing is uploaded.
▸ More about
Uses of image color palette
- Pulling a logo red out of a product photo before it is averaged away.
- Copying CSS custom properties from a picture that stays on this device.
- Seeing which stop is the wall, because its pixel share is most of the picture.
image color palette pitfalls
- Treating the average of a region as the palette, so the logo red never appears.
- Reading five near-identical grays as five colors when they are one wall.
- Copying a clamped hex from a wide-gamut photo and assuming it is the original sample.
image color palette questions (6)
How do I extract colors from an image?
Choose an image file. The page samples it in this tab and lists the dominant colors. Copy CSS writes one custom property per stop. Runs entirely on your device. Nothing is uploaded.
Why does a background become one color?
Near-identical pixels are merged after the cut. A wall that is several close grays becomes one stop, and the pixel share shows how much of the picture that stop is.
What does the pixel share mean?
It is the fraction of sampled pixels in that stop. A logo that is a tenth of the picture reads about 10%. The share is how you tell the wall from the subject.
Why is a hex marked as clamped?
A display-p3 sample can sit outside sRGB. The hex is the clamped sRGB value, and the line under the list says so. An ordinary sRGB picture stays quiet.
Does this page upload the picture?
No. There is no address field and no request. The file is read in the tab. Runs entirely on your device. Nothing is uploaded.
Why is a small logo missing?
The sample is a nearest-neighbor grid, not an average, but a mark thinner than one sample can be skipped. Crop closer to the logo and open the file again.