Skip to main content

How to Deduplicate Hex Colors When Shorthand and Case Hide the Real Duplicates

Deduplicate hex color codes the right way: shorthand and uppercase variants of one color survive a plain dedup. Here is how to fold case, expand shorthand, and clean a palette.

Published By Li Lei
#hex colors #color palette #design tokens #css #deduplication

How to Deduplicate Hex Colors When Shorthand and Case Hide the Real Duplicates

Pull the hex colors out of any real codebase and you will find the same color written three or four different ways. A designer typed #FFF, a build tool emitted #ffffff, and someone pasted #FfF from a screenshot tool. To your eyes, and to the browser that renders them, those are one color: white. To a plain text deduplicator, they are three distinct strings that all survive the cleanup.

This is the trap with hex colors specifically. The format allows shorthand, it ignores case, and the same swatch can legally appear in several skins. If you run a generic "remove duplicate lines" pass over a palette, you keep every skin. That is the difference between a list that is technically deduplicated and a palette that is actually clean.

Why three spellings of one color slip through

A hex color is just a string of characters that maps to a single 24-bit (or 32-bit with alpha) value. The problem is that the mapping is many-to-one in two ways.

First, case. Hex digits a through f are case-insensitive. #FFCC00, #ffcc00, and #Ffcc00 all describe the same yellow. A byte-for-byte comparison sees three different strings.

Second, shorthand. CSS lets you collapse a six-digit color to three digits when each channel's two digits repeat: #aabbcc can be written #abc, and #ffffff can be written #fff. The browser expands the short form by doubling each character. So #abc, #AABBCC, and #aabbcc are the exact same color, but they share zero characters in two of the three cases.

Put those together and you get the concrete situation worth remembering: #abc, #AABBCC, and #aabbcc are the same color, but a plain text dedup keeps all three. A meaningful hex deduplication has to do two things before it ever compares two values — expand shorthand to the full form, and fold case to a single one — so that all three resolve to the same key.

What this tool actually does before comparing

I will not hand-wave this part, because the whole point is whether the dedup is real. The Hex Color Deduplicator normalizes each color first, then deduplicates on the normalized value. Reading the normalizer behind it, the steps are:

  1. Fold case. Every color is lowercased. #FFCC00 becomes #ffcc00.
  2. Expand shorthand. A 3-digit color like #abc is expanded by doubling each digit to #aabbcc. A 4-digit color with an alpha channel like #abcd expands to #aabbccdd the same way.
  3. Compare on the result. Deduplication keys off the normalized string and keeps the first occurrence, so #abc, #AABBCC, and #aabbcc collapse to a single canonical row — and the audit table records that the other two were dropped as duplicates rather than disappearing silently.

That covers the two failure modes plain dedup misses. Now the honest limits, because they matter when you sanity-check the output:

  • Alpha is not stripped. #ffcc00 and #ffcc00ff render identically — full opacity is the same as no alpha — but the tool treats the six-digit and eight-digit forms as different colors and keeps both. If your source mixes opaque hex with explicit ff alpha, expect two rows for that color.
  • Only 3 and 4-digit shorthand expand. That is the entire set of CSS hex shorthand, so this is complete for hex. It does not convert other color formats; an rgb() or hsl() value is a different string and is not reconciled against a hex one.
  • It compares colors, not intent. Two genuinely different but visually close colors (#0ea5e9 vs #0fa5e9) are different values and both survive, as they should.

Within those bounds, the dedup is the real thing: case and shorthand variants of one color collapse, and the count tells you how many spellings folded together.

A worked example: collapsing a messy palette

Here is a list pulled from a stylesheet plus a few values someone pasted from a design tool. Drop it into the tool's input:

#FFF
#ffffff
#abc
#AABBCC
#aabbcc
#0EA5E9
#0ea5e9
#ffcc00
#ffcc00ff
#GG0000

Keep "unique rows only" on, and the normalized output collapses to:

#ffffff
#aabbcc
#0ea5e9
#ffcc00
#ffcc00ff

Walk through what happened. #FFF and #ffffff folded into one #ffffff — shorthand expanded and case folded. #abc, #AABBCC, and #aabbcc became a single #aabbcc row with a duplicate count of 3. #0EA5E9 and #0ea5e9 merged on case alone. The yellow split into two rows — #ffcc00 and #ffcc00ff — exactly the alpha limit described above, which is a useful signal that your palette mixes opaque and alpha forms. And #GG0000 is not a valid hex color, so it lands in the invalid bucket where you can fix it instead of losing the swatch quietly. Ten input lines, five real colors, one flagged typo.

Cleaning a token file in practice

When I last did this for real, I had a tokens.css file that had been merged three times across two designers and a theming experiment. A quick line-level dedup in my editor left 41 "unique" color declarations. I pasted just the hex values into the deduplicator and got 23 actual colors back, with the counts showing which ones had three or four spellings each. The two that surprised me were a near-white that existed as #fafafa, #FAFAFA, and #fff (the last one was a mistake — someone meant the off-white, not pure white), and a brand blue that had drifted by one digit in one file. The plain dedup would never have surfaced either, because every one of those strings was technically distinct. Folding case and expanding shorthand first is what turned a noisy list into a decision I could act on.

Fitting it into your cleanup workflow

The deduplicator is one stop, not the whole pipeline. A few neighbors make the rest of the cleanup easier:

  • If you just want to pull every hex value out of a larger blob of CSS, HTML, or logs first, the Hex Color Extractor does the extraction step before you dedupe.
  • If your goal is to rewrite every color to one canonical form rather than drop duplicates, the Hex Color Normalizer applies the same expand-and-fold logic and keeps every row.
  • To check which entries are even valid before trusting the list, run it through the Hex Color List Validator.

Everything runs in your browser tab — the palette you paste, the file you load, the CSV you download. Nothing about your design tokens leaves the page, which is the right default for files that often carry internal naming and unreleased branding.

The takeaway is small but easy to get wrong: deduplicating hex colors is not a string operation, it is a color operation. Fold the case, expand the shorthand, then compare — and the duplicates that were hiding in plain sight finally collapse into the palette you actually have.

Made by Toolora · Updated 2026-06-13