Image Color Extractor

Extract the dominant colors and full color palette from any uploaded image. Get hex, RGB, and HSL values.

Image Color Extractor tool

Loading...

Example

Input: An 800 x 600 image split into four equal blocks of pure red, green, blue and yellow

Result: Dominant Colors (4): #FF0000, #00FF00, #0000FF and #FFFF00 at 25.0% each, plus a ready-made CSS variables block

Pixels are sampled and grouped into color buckets, sorted by how often they occur, and shades too close to an already chosen color are skipped.

  1. Upload an image by dragging it onto the drop zone or clicking to browse files.
  2. The tool analyzes the image and extracts the dominant color palette automatically.
  3. View the extracted colors displayed as swatches with their hex values and share of the image.
  4. Use the copy button on a swatch to copy its hex code, or tap the swatch to reveal and copy its RGB and HSL values.
  5. Click Copy All for the full list of hex codes, or Copy CSS to grab the palette as CSS custom properties.

Pulling a Color Palette From a Photo

Upload an image and this tool finds its main colors, up to 12, with hex, RGB and HSL values for each. It is a fast way to build a palette from a photo, match a brand color from a logo, or see what colors a design really uses.

Here is how it works. The image is scaled down to 400 pixels on its longest side, and up to about 50,000 pixels are sampled. Similar colors are grouped into buckets, and each bucket is averaged into one color. The buckets are ranked by how many pixels they hold. Near duplicates are skipped, so every swatch is clearly different. Transparent areas are ignored, so a logo on a transparent background gives the logo colors only.

Each swatch shows its hex code and its share of the image. Tap a swatch to see and copy its RGB and HSL values. A palette bar shows each color in proportion to its share. Copy All gives you the full list of hex codes, and Copy CSS gives custom properties from --color-1 onward, ready for a stylesheet.

The results show dominant colors, not every accent. A small but important detail, like a red button in a gray photo, may not make the list if it covers too few pixels. Simple graphics often give fewer than 12 colors. Images up to 20 MB are analyzed in your browser.

To build a full scheme from one of the colors, open the Color Palette Generator. Before you use two colors for text and background, check them with the Color Contrast Checker.

Frequently Asked Questions

Upload the photo and look at the swatches. Each one shows its hex code with a copy button. If the color you want is small in the image, crop the image to that area first so it makes up more of the pixels, then upload the cropped version.
The tool ranks colors by how many pixels they cover, so small accents can lose out to large areas like sky or background. Very similar shades are also merged into one swatch. Cropping to the area you care about gives that color a bigger share and a better chance of appearing.
Up to 12, ordered by how much of the image each one covers. Photos with lots of variety usually fill all 12 slots. Logos, icons and flat illustrations often return fewer, because near-identical shades are merged and transparent pixels are ignored.
Click Copy CSS. You get lines such as --color-1: #C4653A; for every color, ready to paste into a :root rule. Then use them in your styles with var(--color-1). Rename the properties to meaningful names like --brand or --accent once you decide what each color is for.

Related Tools

Color Palette Generator

Generate harmonious color palettes. Create complementary, analogous, triadic, and split-complementary schemes.

Color Tools

Hex to RGB Converter

Convert hexadecimal color codes to RGB values instantly. Supports shorthand and 8-digit hex with alpha.

Color Tools

Color Picker

Pick any color visually and get values in hex, RGB, HSL, and CMYK. Interactive saturation panel and hue slider.

Color Tools

Image Resizer

Resize images to exact pixel dimensions with an optional aspect ratio lock, entirely in your browser.

Image and Media

Image to Base64 Converter

Convert any image file to a Base64-encoded string instantly in your browser. No server upload required.

Image and Media

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA compliance. Ensure your text is readable and accessible.

Color Tools