PDF Color Palette Extractor

Extract a PDF color palette in your browser: dominant colors with hex, RGB and HSL values and the exact fills declared in the file. Export as CSS variables, SCSS, JSON or Tailwind.

PDF

or drag and drop file here

PDF

Fast conversionSecure processingNo registration

What you get from a PDF color palette

Upload a brochure, a brand guide, a slide deck or a report and the tool returns the colors it is built from: each one as a swatch with its hex code, RGB and HSL values, and the share of the rendered pages it covers. White paper is left out by default so the accent colors come first.

The palette is a starting point for a website, a presentation template or a design system that has to match an existing document. If the PDF also carries photos or logos you want to reuse, Extract Images from PDF pulls those out as files.

Rendered colors and declared colors

Two readings are combined. The pages are rendered and every pixel is counted, which captures photographs, gradients and scanned artwork. Separately, the drawing instructions inside the PDF are read for the exact fill and stroke colors the designer set on shapes and text.

A swatch marked "declared" carries the precise value from the file, not an average of pixels, so it is the one to copy into a style sheet. A swatch marked "rendered" only comes from images or gradients, where no single exact value exists.

Export formats

FormatWhere it fits
CSS variablesA :root block with --color-1, --color-2 and so on, ready to paste into any style sheet.
SCSSSass variables for projects that compile their styles.
JSONName, hex, RGB, HSL, coverage and source for each color, for design tokens or scripts.
TailwindA theme.extend.colors block for tailwind.config.js, so the colors become utility classes.

How to extract colors from a PDF

  1. Select a PDF. The pages are rendered in your browser and scanned one by one.
  2. Pick how many colors you want and whether white paper should be ignored. The palette updates instantly.
  3. Click a swatch to copy its hex code.
  4. Choose CSS, SCSS, JSON or Tailwind and copy the code or download it as a file named after your PDF.

What to expect

Colors are read from the first thirty pages, which is enough for a brand guide or a deck; very long reports are sampled from their opening pages. Similar shades are grouped so that anti-aliasing does not produce dozens of near-duplicates, and the coverage percentages describe the rendered pages, not the number of times a color is used.

Colors defined through spot-color patterns, shadings or ICC profiles are captured only as rendered pixels. Password-protected PDFs cannot be opened here; run them through Unlock PDF first. To keep a whole page as an image at a chosen resolution, use PDF to PNG.

Frequently Asked Questions

Does the extraction happen in my browser?

Yes. Pages are rendered and colors are counted on your device, and the export file is generated locally. The privacy policy describes how uploads and usage data are handled in general.

Why do I get a slightly different hex code than the one in the brand guide?

Swatches marked "rendered" are averages of pixels, and anti-aliasing shifts them by a few units. Swatches marked "declared" are read from the PDF's drawing instructions and match the file exactly. If the guide states a CMYK or Pantone value, the PDF only stores its RGB rendering, which can differ from the printed reference.

Can I extract colors from a scanned PDF or a photo?

Yes. Scans and photos have no declared colors, so the palette is built from the rendered pixels alone. Grouping merges similar shades, and paper white is ignored unless you turn that option off.

What does the percentage on each swatch mean?

The share of all counted pixels across the scanned pages that fall into that color group. White paper is excluded from the count when the option is on, which is why a small accent color can show a meaningful percentage.

Which export should I use for a website?

CSS variables work everywhere and need no build step. Use SCSS if the project compiles Sass, the Tailwind block if the site uses Tailwind utility classes, and JSON when the colors feed design tokens or a script.

Can I rename the colors?

The export uses numbered names such as color-1 in coverage order. Rename them in your editor after pasting; the values stay the same.