Free tool

Color palette from image HEX, RGB and HSL, click to copy.

Drop a photo, a logo or a screenshot and get its main colors as swatches with codes and percentages. Pick exact pixels too.

Color palette from image at a glance

content.win reads the palette, free, with no limit on images.

Works with
JPG, PNG, WebP and GIF.
Comes back as
The dominant colors as HEX, RGB and HSL, with a copyable palette.
Runs
In your browser.
Limits
No daily limit and no cap on how many files.
Price
Free. No account, no watermark.

How to get a color palette from a photo

  1. Drop the image in. A photo, a logo, a screenshot. JPG, PNG, WebP or GIF.
  2. Choose how many colors and how to pick them. Dominant gives the colors that cover the most area. Vibrant favors the saturated ones that catch the eye.
  3. Copy or download. Click a swatch to copy its code, copy all of them at once, copy them as CSS variables, or download the palette as a PNG strip.

Dominant versus vibrant

Dominant
Groups every pixel by how much of the image it covers. Good for pulling brand colors from a product shot or a logo, or for finding the background color a screenshot should sit on. A big sky or a white wall will take a slot, which is often exactly what you want.
Vibrant
Weights pixels by saturation and ignores near-white and near-black, so the small, loud colors come through: the jacket, the sign, the accent in a logo. Use it for thumbnail text colors and caption highlights.
Light to dark, hue, or share
Light to dark reads like a palette from a design tool. Hue puts related colors next to each other. Share sorts by area, so the dominant color is first.

Using the palette

  • Text on a thumbnail: take the darkest swatch for text on the lightest, or the other way round. Aim for a contrast ratio of at least 4.5 to 1; a saturated mid-tone on another mid-tone will not read at feed size.
  • Captions and stickers: one accent color from the image makes overlays look like they belong to the shot instead of sitting on top of it.
  • Brand kits: extract from three or four of your own posts, keep the colors that appear every time, and you have a palette that already matches your feed.
  • One exact pixel: click the image. For a magnified pick with a loupe, the color picker tool is built for that.

Questions people ask

How do I extract colors from an image?

Drop the image in. The tool samples it, groups the pixels into the number of colors you asked for and shows each one as a swatch with its HEX code and the share of the image it covers. Click a swatch to copy the code, or click a point on the image to add that exact pixel.

How do I find the dominant color of an image?

Set the sort to "How much of the image" and the first swatch is the dominant color, with its percentage. Switch the method to Vibrant if the biggest area is a dull background and you want the color that stands out instead.

HEX, RGB or HSL, which should I use?

They describe the same color. HEX (#2556b6) is what design tools, CSS and most caption and thumbnail editors ask for. RGB is the raw red, green, blue mix. HSL is useful when you want to make a color lighter or more saturated by hand. The toggle switches all swatches at once.

How many colors should a palette have?

Five or six is the sweet spot for a brand or a content style: one background, one text color, one or two accents, one neutral. Three is enough for a single thumbnail. More than eight and the palette stops being a decision.

Can I pick one exact pixel?

Yes. Click the image and that pixel's color is added to the palette as a picked swatch. For a magnified, precise pick, use the color picker tool.