Palette Comparator

Q: What kind of color difference does this use?

Colors are converted to CIE Lab and compared with ΔE76 (CIE 1976).

Q: How do I paste a palette quickly?

Use Paste list and provide HEX codes, RGB shorthand, or CSS color names separated by commas or newlines.

Q: What do the heatmap colors mean?

Green is close, red is far apart. Hover to see the exact ΔE.

Q: What’s the difference between Match by index and Greedy?

Index pairs A[n] with B[n]; Greedy picks the nearest remaining B color for each A color.

Q: Can I export the comparison?

Yes—download the distance matrix as CSV and the report as JSON.

Q: Any tips for comparing brand palettes?

Sort by hue then use greedy matching. Check the maximum ΔE and adjust saturation or tints if needed.

Paste or build two palettes, then compare them with a ΔE (CIE Lab) heatmap, best‑match mapping, and quick export for documentation. Helpful for brand refresh, vendor theming, and design system merges.

Palette A

Palette B

Palette Comparator — FAQs

What kind of color difference does this use?

The comparator converts colors to the CIE Lab space and measures distance with ΔE76. It’s fast and consistent for UI work. If you need finer perception tuning (like textiles), ΔE00 is popular—on our roadmap—but ΔE76 is perfectly serviceable for design system comparisons.

How do I paste a palette quickly?

Click Paste list under Palette A or B and drop in any of these: #rrggbb, #rgb, color names like tomato, or a comma/newline‑separated list. The tool cleans up duplicates and normalizes to HEX.

What do the heatmap colors mean?

Green cells = close match (small ΔE). Yellow/orange = some difference. Red = far apart. Hover a cell to see the exact ΔE between a color in A and a color in B.

What’s the difference between “Match by index” and “Greedy”?

Match by index pairs A[0]→B[0], A[1]→B[1], etc. Greedy finds the nearest remaining color in B for each color in A. Greedy tends to produce a more faithful mapping when palette orders don’t match.

Can I export the comparison?

Yes. Export the full distance matrix as a CSV for spreadsheets, and download a JSON report with inputs, the chosen match strategy, and the final mapping with per‑pair ΔE values.

Any tips for comparing brand palettes?

Sort both palettes by hue first, then run a greedy match. Watch the max ΔE: if it’s high, consider adding intermediary tints or adjusting saturation so states like warning and error don’t blur together across themes.

Keywords: palette comparator, compare color palettes, color difference heatmap, delta e calculator, brand palette comparison, UI color audit, design system color mapping, hex palette matcher.