How to Extract Hex Colors From CSS and Build a Clean Palette

Most stylesheets carry more colors than the design intended. A #3b82f6 shows up in the button file, then someone copies a card and tweaks it to #3b81f5, then a third person hard-codes #3a82f7 because they pasted from a screenshot. None of these look wrong on screen. All three look like the brand blue. But the palette is quietly fraying, and nobody notices until a redesign forces a full color audit.

Pulling every hex code out of the code is the first step to seeing that drift. Once you have the raw list, you can dedupe it, count the distinct values, and decide which ones are real tokens and which are accidents. That is exactly what the Hex Color Extractor is built to do, and the whole thing runs in your browser so the source never leaves the tab.

Why pull colors straight out of the code

You can open a stylesheet and eyeball it, but a 4,000-line compiled CSS file resists eyeballing. Colors hide in shorthand (#fff), in gradients, in box-shadow strings, in inline SVG fill attributes, in JSON theme exports, and in copied HTML you pasted from a component library. They are scattered across thousands of lines, and your eye will skip the near-duplicates that matter most.

Extraction flips the job. Instead of reading the file, you read the colors. Paste the whole thing, get back a flat list of hex values, and suddenly the question changes from "what does this file say" to "how many distinct colors does this project actually use." That second question is the useful one, and you almost never know the answer before you ask it.

What the parser actually matches

The extractor scans mixed text and pulls out hex colors prefixed with #. It matches both 3-digit shorthand like #fff and full 6-digit codes like #ffffff, which is important because real stylesheets mix the two constantly. The shorthand #0af and the long form #00aaff are the same color, and a good audit has to recognize both.

It works on context, not just on file type. A # inside an id selector like #header is not a color, so the tool surfaces those as invalid hits you can review rather than silently dropping or silently keeping them. A truncated #ff or a fragment with a non-hex letter lands in the same review bucket. Keeping the borderline catches visible means you trust the output because you can see what the pattern grabbed, not because a hidden filter told you to.

A worked example: CSS snippet to a unique color list

Here is a small slice of the kind of CSS you actually deal with:

.btn-primary {
  background: #3b82f6;
  border: 1px solid #3B82F6;
  box-shadow: 0 1px 2px #00000022;
}
.btn-primary:hover {
  background: #2563eb;
}
.card {
  background: #fff;
  color: #111;
  border: 1px solid #E5E7EB;
}
.badge {
  background: #fff;
  color: #3b82f6;
}

Paste that in, turn on dedupe, and the extractor collapses the noise. The raw scan finds nine hex hits across the snippet, but several repeat: #3b82f6 appears three times (once as uppercase #3B82F6), and #fff shows up twice. Deduping reveals how many distinct colors the snippet really uses:

#3b82f6
#2563eb
#000000
#fff
#111
#2563eb
#e5e7eb

After normalizing case and removing duplicates, seven hits become six distinct colors. That gap between hits and distinct values is the whole point. A stylesheet that feels like it has dozens of colors often resolves to a palette of ten or twelve, and the leftovers are the accidents worth chasing down.

Building a palette from existing code

Once you have the deduped list, you have a draft palette pulled straight from production, not from a design file that may already be stale. This is the honest version of your color system, because it is what ships.

From here the workflow forks depending on what you need. If you want the list as developer-ready output, switch the format to a TypeScript union or a JSON array and paste it into a tokens file. If you are about to feed it into another cleanup pass, sort the normalized values first so identical hues sit next to each other and visual scanning gets easy. For round-tripping the same list through a different transformation, the Hex Color List Converter takes a clean list and reshapes it into CSV, Markdown, SQL IN, or plain lines without you hand-adding quotes and commas.

The key habit is to treat the extracted list as a starting artifact, not a final answer. It tells you what exists. You still decide what should exist.

Catching stray off-brand colors

This is where extraction earns its keep. When I audited a side project's CSS last month, I expected maybe a dozen colors. The deduped list came back with thirty-one. Most of the surprises were near-misses: a #3a82f7 two units off the brand blue, a #222 where the system says #1f1f1f, a stray #e4e4e7 next to the official #e5e7eb gray. Each one came from a copy-paste or a screenshot eyedropper, and each one was invisible until the colors sat in a sorted list side by side.

Sorting is what makes the strays obvious. When #3a82f7 and #3b82f6 and #3b81f5 land on three consecutive lines, the eye catches them instantly even though they are indistinguishable on a live page. You replace the near-misses with the real token, recount, and watch thirty-one collapse toward your intended dozen. That is a color audit done in minutes instead of an afternoon of grep.

Keep the workflow local and repeatable

Everything above happens in the browser. The CSS you paste, the theme JSON you upload, the copied HTML from a component preview — none of it is sent anywhere, which matters when the source is a private codebase or a client's unreleased design. Read a file locally, extract, dedupe, export, and you are done.

The repeatable loop is short: extract every hex code, dedupe to find the true count, sort to expose the near-duplicates, fix the strays back to real tokens, then export the clean palette. Run it once before a redesign and you start from reality. Run it as a periodic check and the drift never gets a chance to pile up.

Start with the Hex Color Extractor, paste your stylesheet, and see how many colors your project really uses.

---

Made by Toolora · Updated 2026-06-13