Color Palette Extractor: Get HEX Codes Free

This color palette extractor pulls the dominant colors from any image you upload and lists each one with HEX, RGB and HSL codes plus its coverage percentage. Choose 5, 8, 12 or 16 colors, click a swatch to copy it, and export the results as CSS variables for your website, brand guide or design file.

What Is a Color Palette and How Is It Extracted From an Image?

A color palette is a small, deliberate set of colors that work together in a design. Extracting one from an image means finding the colors that appear most often and grouping similar shades into a single representative color.

A photo can contain hundreds of thousands of slightly different shades. A sunset sky alone may hold ten thousand versions of orange. The tool groups pixels that look alike, averages each group into one color, and reports how much of the picture that group covers. The group with the most pixels comes first.

Each color is shown in three formats, because different projects ask for different codes:

• HEX is a six-character code such as #E8662B, used in CSS, Figma and most design software.
• RGB lists red, green and blue values from 0 to 255, for example rgb(232, 102, 43).
• HSL lists hue (0 to 360 degrees), saturation and lightness, which makes it easy to build lighter or darker variants by hand.

How to Use the Color Palette Extractor

You can get a full palette in under a minute. The steps below match the controls you see on this page.

1. Drop an image onto the upload area, or click "browse to upload" and pick a JPG, PNG, GIF or WebP file.
2. Open the "Colors to extract" menu and choose 5, 8, 12 or 16. The default is 8.
3. Leave "Ignore near-white/black" checked if you want to skip blank backgrounds and deep shadows. Uncheck it when white or black is part of the look you want to capture.
4. Review the "Source Image" preview and the "Extracted Palette" bar and swatches. The bar gives each color a width in proportion to its share of the image.
5. Read the "Color Codes" table, which shows the Swatch, HEX, RGB, HSL and Coverage for every color. Click any swatch to copy its code.
6. Press "Copy CSS" to copy the whole palette as CSS variables and paste it straight into your stylesheet.

When you change the number of colors or the near-white/black option, the palette updates for the image already loaded, so you do not need to upload it again.

Worked Example: Extracting Colors From a Sunset Photo

Say you upload a beach sunset with an orange sky, a navy sea and a pale cream sun glare. You keep 8 colors and leave "Ignore near-white/black" checked.

The first row of the Color Codes table might read #E8662B, rgb(232, 102, 43), hsl(19, 80%, 54%) with a coverage of about 30%. That is the burnt orange of the sky. The second row might be a deep navy such as #1F2A44, rgb(31, 42, 68), covering about 22%. The remaining rows hold the pinks, purples and soft golds in between.

Here is how you would use it. The two largest colors become your main brand or page colors. A mid-coverage gold becomes the accent for buttons. The smallest colors work for borders and hover states. Press "Copy CSS" and the variables are ready to paste into your theme.

If the cream glare disappears from the palette, that is the near-white filter at work. Uncheck the option and run the extraction again to bring it back.

How Do You Read and Act on the Results?

The most useful number is coverage, the share of counted pixels that each color represents. Pixels removed by the near-white/black filter and fully transparent pixels are not counted, so the percentages describe only the part of the image you kept.

Choosing the right number of colors

Turning a palette into a design

A widely used guideline is the 60-30-10 rule: about 60% of a layout in a dominant color, 30% in a secondary color and 10% in an accent. Your top three coverage figures give you a natural starting point. Colors with very low coverage, under 3% or so, usually work best as accents or not at all.

Check contrast before you put text on a color. The Web Content Accessibility Guidelines call for a contrast ratio of at least 4.5:1 for normal body text. A bright orange on white often falls short, so pair it with a dark navy or near-black for readable text.

If two swatches look almost the same, drop to a lower color count. If the palette feels flat and misses a small but important detail, raise the count to 12 or 16.

How Can You Extract a Color Palette From a Website, Logo or Design File?

This tool reads image files, so any source you can save as JPG, PNG, GIF or WebP works. That covers more situations than you might expect.

• A website: take a screenshot of the page and upload it. You get the colors the page really displays, including photos and banners.
• A logo: upload the logo file on its own. Leave the near-white/black option unchecked if your logo uses black or white as a brand color.
• A slide or mockup: export the slide or artboard as an image, then upload it. This is a quick way to get codes without opening Photoshop, Illustrator, Canva or Figma.
• A product photo or mood board: upload it to build a palette for packaging, social posts or a wedding theme.

Designers, front-end developers, bloggers, marketers and small business owners all use the same workflow: start from an image you already like and turn it into codes you can paste.

Best Practices, Common Mistakes and Troubleshooting

Start with a good source image

A sharp, well-lit image gives cleaner colors. Heavily compressed JPGs can add noise that muddies the palette, and screenshots with browser frames add colors you do not want. Crop the image first with an image crop tool so the palette reflects only the area you care about.

Fix the most common problems

• "The image could not be decoded": the file is damaged or is not a real image. Re-export it as JPG or PNG and try again. If it is an iPhone photo in HEIC format, convert it first with a HEIC to JPG converter.
• "No suitable colors found": the image is almost entirely white, black or transparent. Uncheck "Ignore near-white/black" and run it again.
• The palette misses a color you can see: the color probably covers a very small area. Raise the count to 12 or 16, or crop closer to that area.
• Results differ slightly between runs: similar shades are grouped, and a repeat run can group borderline shades a little differently. The main colors stay the same, but save the codes you like once you have them.
• A dull palette from a vivid photo: averaging many pixels softens colors. Use a color picker to fine-tune a swatch, then adjust its saturation.

Next steps after extraction

If you need a code converted into another format, such as CMYK for print, a HEX to RGB converter shows the same color in several systems. If you want harmonies built around one extracted color, try the color palette generator. Large images used for palette work can also slow your site, so run final assets through an image compressor before publishing.

What Are the Limits of Palette Extraction?

The tool reports averages, not individual pixels. A HEX code in the table may not match any single pixel in your image exactly, but it will be a close representative of a group of similar pixels. For brand work that needs one exact color, sample the pixel directly with the image color extractor, which also lets you click a spot on the photo.

Colors can also look different on different screens, and the codes describe digital color only. Screen colors will not match printed colors exactly, so test any print project on paper. Because very small details occupy few pixels, thin lines, fine text and tiny logos inside a larger photo may not show up in the palette.

You can find more tools for working with pictures in the image editing and optimization category.

Upload an image above, pick how many colors you want, and you will have copy-ready HEX, RGB, HSL and CSS values in seconds. Try the same picture with different color counts and with the near-white/black option on and off to see which palette fits your project best.