Skip to content
ColorScreens

Color palette from image

Drop in a photo, a screenshot or a piece of artwork and get the colors it is actually made of. Each one is given a role, from background through to text, along with the reason it was chosen. Your image is read on your own device and never uploaded.

Drag one in, or paste from the clipboard. Your image never leaves this device.

      Check contrast
      How the extraction works
      Worth knowing, because it explains why the results differ from other extractors.
      Grouped by eye, not by number
      Pixels are clustered in CIE Lab, a space built so that equal distances look like equal differences. Clustering in RGB instead splits colors that look identical and merges colors that plainly are not, which is why simpler extractors return five shades of the same thing.
      Real colors, not averages
      Each group is represented by the pixel nearest its centre rather than by the average of the group. Averaging is how an extractor ends up recommending a muddy color that does not appear anywhere in the picture. Everything here is a color you can point at.
      Text is measured, not guessed
      Every role except text is chosen on area and saturation. Text is chosen on contrast, and has to reach 4.5 to 1 against the background, the WCAG threshold for body copy. If nothing in the image manages it, the tool says so rather than handing you an unreadable pairing.
      Nothing leaves the device
      The file goes into a canvas element in your browser and the pixels are read from there. No request is made, so there is nothing to intercept, log or retain. Turn the network off and the tool still works.
      Common questions
      Is my image uploaded anywhere?
      No. The file is read into a canvas by your own browser and the colors are worked out on your device. There is no upload, no server to receive it, and no copy kept. The tool keeps working with the network switched off, which is the plainest proof of it.
      How does it decide which colors to pull out?
      It groups the pixels into clusters and takes one color from each. The grouping happens in CIE Lab rather than RGB, because Lab distance follows how different two colors look rather than how far apart their numbers are. Each cluster is represented by a pixel that genuinely appears in the image, so no color in the palette is an average of colors you cannot see.
      What do the roles mean?
      Background is whatever covers the most area. Primary is the most saturated color with meaningful area. Accent is vivid and far enough in hue from the primary to read as separate. Surface sits closest to the background in lightness. Text is chosen for contrast rather than area, and has to clear 4.5 to 1 against the background. Each one shows the reason it was picked.
      Are the roles a recommendation or a fact?
      A suggestion. Role assignment is a set of rules about area, saturation and contrast, not a judgement about your design. The reasons are shown next to each color so you can disagree with the tool where it deserves it. The only one held to a hard standard is text, which is chosen on measured contrast.
      What if no color in my image is readable as text?
      It says so, and suggests plain black or white instead, whichever has more contrast against the background. It is marked as suggested rather than extracted, because it is not a color from your image.
      Which Tailwind version does the export use?
      Both are offered. Tailwind v4 moved configuration into CSS, so that export is a theme block. Tailwind v3 used a JavaScript config file, so that export is one of those. Pick the one that matches your project rather than the newest.
      Can I pick one exact color instead of a palette?
      Yes. Click anywhere on the image and it reports that exact pixel, which is useful when you want a color from a logo or a single detail rather than the overall spread.
      All tools
      Share
      XPinterestFacebookReddit