Color picker from image.

Getting an image in

On the Upload image tab, select Choose an image, or drop a file onto the upload area. One image is read at a time, and choosing a new one replaces the previous result. The input accepts any file the browser reports as an image; PNG, JPG, WebP, and GIF are the common cases. A file that is not an image shows a message instead, and an image the browser cannot decode shows "Colors could not be read from this image". The tool does not set a file size limit, but a very large photo still has to be decoded in full before it is sampled, so it takes longer.

The Unsplash photos tab searches Unsplash as you type and offers quick searches (Abstract, Geometric, Sand dune, Dark matte, Neon gradient). Results load twelve at a time, up to thirty per search. Selecting a photo extracts its colors the same way; the photo itself is loaded from Unsplash.

How the colors are chosen

Knowing what the extraction does explains most surprising results. The image is scaled down to about 64,000 pixels for the calculation, nearly transparent pixels are skipped, and pixels with similar hue, saturation, and lightness are merged into one color. The merged colors are sorted by how much of the image they cover and the ten largest are shown.

• Small details can disappear. A red logo on a large blue sky may cover too little of the image to make the top ten. Crop the image to the area you care about and upload the crop.
• A color can differ slightly from any single pixel, because it stands for a group of similar pixels. For an exact brand color, take it from the source file rather than a photo or screenshot.
• Transparent areas are ignored, so a logo saved as a PNG with a transparent background gives the logo's colors, not the background's.
• An animated GIF is read as a single frame, normally the first.

Copying values

The HEX, RGB, and HSL buttons above the swatches set the copy format; selecting a swatch copies its value in that format, and the value is printed under each swatch. HEX is copied in capitals with the #, RGB as rgb(5, 94, 104), and HSL with whole numbers, such as hsl(186, 91%, 21%). Because HSL is rounded, converting it back does not always give the same color: hsl(186, 91%, 21%) comes back as #055D66, not the original #055E68. Copy HEX or RGB when the exact value matters, for example to match an existing design token.

Export, variations, and similar palettes

Export palette opens the same export dialog as the palette generator: CSS custom properties, gradient CSS and Tailwind classes, a mesh gradient, and PNG or SVG files. Colors stay in the extracted order, so --color-1 is always the color with the largest area, which is often a good candidate for a background or surface. The arrow next to Export palette has Visualize, Open in the generator, Explore similar, View variations (tints and shades of every color), and View fullscreen.

Below the workspace, Similar palettes compares the five largest colors with the 400 palettes in the site's collection, using a weighted RGB distance, and shows up to 24 of the closest. This is useful when the photo's own colors are close to what you want but too muddy or too similar to each other to build a UI with.

Turning photo colors into a UI palette

The largest colors in a photo are usually muted, such as sky, wall, or shadow tones. They work as backgrounds and surfaces, but rarely as button colors or text. Pick the most saturated extracted color for actions, then check it: WCAG level AA asks for 4.5:1 contrast for normal text and 3:1 for large text and UI parts. If the color is close but fails, open View variations and take a darker row of the same column instead of a new color, so it still matches the image.

To run the same extraction in your own code, for example to tint a card from its cover image, install extract-colors and repeat what this page does. Remote images need CORS headers that allow your origin, otherwise the browser will not let a script read the pixels.

import { extractColors } from "extract-colors";

async function mainColors(src) {
  const colors = await extractColors(src, { crossOrigin: "anonymous" });
  return colors
    .sort((a, b) => b.area - a.area) // largest area first
    .slice(0, 10)
    .map((color) => color.hex);
}

const [dominant] = await mainColors("/covers/album.jpg");
document.querySelector(".card").style.backgroundColor = dominant;

Questions

Are my images uploaded to a server?

No. An uploaded file is opened in your browser with a temporary object URL and the colors are calculated on your device. Only Unsplash photos come from a server, Unsplash's own.

Which colors are picked?

The picker groups similar pixels and lists up to ten colors, starting with the ones that cover the largest part of the image. Small details may not appear if they cover very little of it; crop the image to that area to pick them up.

Can I pick the color of one exact pixel?

Not in this tool, which finds the main colors of the whole image. In Chromium-based browsers such as Chrome and Edge, the palette visualizer's color editor has a Pick color from screen button that samples any single pixel on your screen, including an image open in another window.

How do I get the colors into CSS or Tailwind?

Select Export palette and copy the CSS tab for custom properties (--color-1 to --color-10, largest area first), or the Gradient tab for Tailwind gradient classes. For a full theme with text, background, and button colors, choose Visualize from the arrow menu.