Color Mapper Utility

Overview

Open the console (F12) to see the detailed mapping results and the final colour‑to‑hex object.

This tool calculates the closest matching colours between two colour palettes. It is particularly useful when refactoring a legacy web application into a modern design system or theme, allowing you to map old colour tokens to a new standardized palette automatically.

How it works

The script converts each colour from hex to RGB, then to HSV, and finally computes a weighted distance (hue, saturation, value) to find the best match in the target palette.

Usage suggestions

• Replace legacy colour variables with the values generated by this script.
• Integrate the mapping logic into a build step to keep your CSS/theme files in sync.
• Adjust the weights array to prioritize hue, saturation, or value as needed.
• Call window.mapColors(sourceHexArray, targetHexArray) (or window.mapColorsSimple) from the browser console to obtain the mapped palette.

Example usage in the browser console:

// Simple mapping – returns an array of {original, mapped}
const result = window.mapColors(['#ff0000', '#00ff00'], ['#f00', '#0f0', '#00f']);
console.log(result);

// Simple list of mapped colours only
const newPalette = window.mapColorsSimple(['#ff0000', '#00ff00'], ['#f00', '#0f0', '#00f']);
console.log(newPalette);