MAKE SOMETHING GREAT

Image Color Picker.

Name: How to pick an image color and export a palette
Uploaded: 2026-11-10T22:53:38Z
Duration: PT21.533S
Description: Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette.

Pick HEX, RGB and HSL colors from an image. Extract and edit a palette, check text contrast, then copy colors or export PNG, SVG, CSS or JSON.

Pick image colors and build a palette you can use

Inspect a pixel, copy its HEX, RGB or HSL value, and extract a starting palette from a photo. Keep the colors you like, edit the rest, check a text-and-background pair, and export PNG, SVG, CSS or JSON.

An image supplies individual color samples and a palette that can be refined and exported.

QUICK VIDEO TUTORIAL How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. English narration Watch the video

Features and controls

Pick a pixel with a magnified view

Click or tap the image to inspect a color, then copy its code.

Precise positioning and preview limitations

The magnifier helps you aim at small details. Focus the image and use the arrow keys to move one pixel, Shift plus an arrow to move ten, and Enter to pick. HEX, RGB and HSL have individual copy buttons. Browser-decodable sources are sampled in browser sRGB. When a normalized preview is used instead, its label identifies the colors and coordinates as approximate.

Extract a useful starting palette

Choose 3 to 12 Colors to extract and try Dominant or Vibrant.

How colors and percentages are estimated

Dominant favors the image's main colors. Vibrant gives colorful accents more influence. Extraction samples a bounded image, groups similar colors and returns up to the requested number; a flat image can contain fewer. Fully transparent pixels are excluded, and partial opacity reduces a pixel's weight. Percentages describe approximate sampled groups, not an exact count of every original pixel. Automatic extraction uploads the image to the server.

Keep, replace and reorder your colors

Lock useful swatches, edit their HEX values or add a picked or custom color.

Refining a palette before export

Select a swatch to edit its color, move it left or right, or remove it. Lock keeps a chosen color when you use Refresh palette or change the extraction settings. Add to palette uses the sampled RGB color; Add a custom color lets you enter a HEX value. A palette can contain 1 to 12 colors for export. Picked, edited and retained locked colors do not receive invented image percentages.

Understand transparent pixels

Choose Source color or Composite over a background under Sampling.

Source opacity and exported colors

Source color reports the selected pixel and its opacity in the copied code. Composite over a background shows its appearance after blending with Sample background. Palette colors and exports are opaque RGB values, so adding a translucent source color does not preserve its alpha channel. Sampling mode changes the inspected color; it does not recolor the source image or change automatic extraction.

Check a text and background pair

Use Check color contrast to compare two colors.

What the contrast result covers

Choose Text and Background with the color controls, enter HEX values or use the picked color. The preview shows a contrast ratio and separate Normal AA, Normal AAA, Large AA and Large AAA results for text. This checks the selected color pair only. It does not audit a whole page, account for every background image or certify that a complete design is accessible.

Export colors for the next step

Save a palette image, vector swatches, CSS variables or structured color data.

PNG, SVG, CSS and JSON

PNG produces a labeled palette card. SVG keeps the swatches and labels as vector content. CSS exports numbered variables such as --color-1. JSON contains HEX, RGB and HSL values. Select Save as and then Start to create one file named palette with the chosen extension. Copying a color or the whole HEX palette can be quicker when you only need values.

Files and processing

Input: JPG, JPEG, PNG, WebP, GIF, BMP, TIFF, HEIC and HEIF
Output: One PNG, SVG, CSS or JSON palette

25 MB maximum per file. One input file per run.

One source image up to 60 megapixels. Extraction samples at most 512 pixels per edge, ignores fully transparent pixels and may return fewer colors than requested. Export supports 1 to 12 opaque palette colors. Animated or multi-image sources use their first still frame.

The image is uploaded automatically to extract its palette and uploaded again for final export. Pixel picking and manual palette edits run in the browser. A format the browser cannot decode may also need a server preview. This tool uses conventional color processing, not AI.

Files are processed on the server. Preview preparation may also upload a file when browser decoding is unavailable or a document preview is needed. Server downloads are available to your session for up to two hours.

For an image result, use Continue to below the download results to choose a compatible next step. You can select which images to carry over; the next tool starts with its own settings.

Refreshing an editor or download page returns you to the tool page. Download the result before starting a new workflow. See our Privacy Policy for file handling.

FAQ

Good to know.

A few answers before you get started.

Temporary server processing

Can I get HEX, RGB and HSL from an image?

Yes. Pick a pixel and use the copy button beside the value you need. The picker shows opacity when relevant; opaque palette exports contain RGB colors.

What is the difference between Dominant and Vibrant?

Dominant emphasizes common image colors. Vibrant gives more influence to colorful accents. Both are sampled approximations, and neither promises to find a particular brand color automatically.

Why does a six-color request return fewer colors?

A source may have fewer distinct visible colors. The extractor returns the available groups instead of inventing duplicate swatches to fill the requested count.

Can I keep a color while refreshing the palette?

Yes. Select its swatch and use Lock color. You can also add a custom HEX value, reorder the swatches or remove colors before export.

Does everything stay in my browser?

No. Pixel picking and palette edits run in the browser, but automatic extraction and final export upload the source to the server. Some input formats also need a server-generated preview.

Tools95

Popular tools