The Problem with Manual Color Picking
Every designer has been there: you open a competitor's site, you love their palette, and you spend 20 minutes opening DevTools, finding background-color declarations, and copying hex codes one by one. It works — but it's tedious, error-prone, and misses the full picture.
AssetSnip automates that entire flow in under a second.
What We Actually Extract
When you run AssetSnip on a page, it doesn't just scrape raw CSS. It:
- Walks the computed style tree for every visible element.
- Resolves CSS variables — so
var(--brand-orange)becomes#ff7a2f. - Deduplicates and clusters similar shades (within a ΔE threshold) to give you a clean palette, not 400 slightly-different off-whites.
- Scores by surface area — a color used on 80 % of the page ranks higher than an accent used once.
The Clustering Algorithm
We use a simple CIELAB ΔE-based merge:
function mergeSimilarColors(colors: HexColor[], threshold = 4): HexColor[] {
const clusters: HexColor[][] = [];
for (const color of colors) {
const matched = clusters.find(
(cluster) => deltaE(cluster[0], color) < threshold
);
matched ? matched.push(color) : clusters.push([color]);
}
// Return the most-used color in each cluster
return clusters.map((c) => c[0]);
}
CIELAB gives us perceptually uniform distances, so the merge feels natural — two near-identical grays collapse into one, while a coral and a salmon stay distinct.
From Hex to Design Tokens
Raw hex values aren't enough. AssetSnip also:
- Converts to HSL so you can see the hue structure at a glance.
- Generates CSS custom property snippets ready to paste.
- Flags WCAG contrast ratios against white and black, so you know immediately if a color is accessible.
Try It Yourself
Install the AssetSnip extension and visit any site. Hit Inspect → Colors and you'll have a full, ranked palette in your clipboard within seconds.
Questions or feedback? Reach us on X / Twitter.