Image Color Picker

Find a color in a screenshot, logo or photo. Pick a pixel, inspect its transparency, and turn your selections into CSS or a JSON palette.

Your image is processed in this browser. No upload, account or screen-access permission is needed.

1. Open an image

Or drop one file here. You can paste an image while focus is inside this tool. Static images only: up to 8 MiB, 12 million pixels and 8,192 pixels per side.

Choose an image or try the sample chart to begin.

2. Pick a color

No image loaded.

Area averages use opacity-weighted sRGB channels. At an edge, only pixels inside the image are included. The preview background never changes the sampled values.

Selected color

No color selected.

Text contrast on the preview background

Select a color to check this pair.

Alpha is composited over your chosen background for this check. AA needs 4.5:1 for normal text or 3:1 for large text. This checks one color pair, not a complete design.

3. Build and export a palette

No saved colors. Add a selected color, up to 16.

    Suggestions group similar colors from at most 4,096 grid samples. They are approximate, opacity-weighted color groups, not an exact census or a perceptually optimized palette.

    How to pick a color from an image

    1. Open a static PNG, JPEG or WebP from your device, or try the generated sample chart.
    2. Click a point or enter its X/Y pixel coordinates. Use the magnifier and single-pixel mode for a sharp logo edge, or a small area average for a noisy photograph.
    3. Copy a CSS value, check its contrast against a chosen background, or add it to your palette. Export the palette as CSS variables or JSON.

    What the color values mean

    HEX, RGB and HSL describe the same sRGB color using different notation. HEX normally has six digits; an extra two digits preserve transparency. In RGB and HSL, the value after the slash is opacity: 0 is invisible and 1 is opaque. HSL values are rounded to one decimal place, so a conversion back may differ slightly.

    The sampled values come from the browser’s decoded sRGB canvas at its full pixel dimensions. CSS only changes how large the preview appears. Color profiles, JPEG compression, orientation handling and browser color conversion can make these values differ from an editor or the original file’s stored channel values. Coordinates refer to the decoded, displayed orientation. Fully transparent pixels have no visible color, and canvas processing cannot reliably recover their hidden RGB data.

    An area sample averages the encoded sRGB channels with opacity as the weight, then reports the mean opacity. It is not a linear-light blend or a perceptual color average. Changing the preview background affects appearance and the contrast check, but not the reported image sample.

    Limits and privacy

    Only static PNG, JPEG and WebP files are supported. GIF, SVG, AVIF, HEIC and animated files are rejected. Images larger than 8 MiB, 12 million pixels or 8,192 pixels on either side must be resized in an image editor first. Unusual or damaged headers may also be rejected. This tool does not silently resize accepted images.

    Image data and palette colors remain in this page’s memory. The tool makes no image-upload or remote-image request and uses no local storage. Clear everything removes its working image and colors; closing or reloading the page also discards them. Downloads are saved only when you request them. The site’s shared analytics and privacy policy still apply.

    Color notation follows CSS Color; the contrast calculation follows WCAG contrast guidance. Large text means at least 18 pt regular or 14 pt bold. Evaluate text size, weight, states and the actual background in your final design.