Color Converter Precision: Toolpilot vs 3 Competitors on HEX/RGB/HSL Accuracy

// Color conversion precision test: HEX → RGB → HSL → HEX round-trip
const REFERENCE_COLORS = [
  { hex: "#000000", rgb: [0, 0, 0], hsl: [0, 0, 0] },
  { hex: "#ffffff", rgb: [255, 255, 255], hsl: [0, 0, 100] },
  { hex: "#ff0000", rgb: [255, 0, 0], hsl: [0, 100, 50] },
  { hex: "#00ff00", rgb: [0, 255, 0], hsl: [120, 100, 50] },
  { hex: "#0000ff", rgb: [0, 0, 255], hsl: [240, 100, 50] },
  { hex: "#ffff00", rgb: [255, 255, 0], hsl: [60, 100, 50] },
  { hex: "#663399", rgb: [102, 51, 153], hsl: [270, 50, 40] },  // rebeccapurple
  { hex: "#ff6347", rgb: [255, 99, 71], hsl: [9, 100, 64] },   // tomato
];

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b];
}

function rgbToHsl([r, g, b]) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex([h, s, l]) {
  s /= 100; l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n => Math.round(255 * (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));
  return "#" + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, "0")).join("");
}

// Run round-trip test
const results = REFERENCE_COLORS.map(ref => {
  const rgb = hexToRgb(ref.hex);
  const hsl = rgbToHsl(rgb);
  const roundTrip = hslToHex(hsl);
  return {
    original: ref.hex,
    roundTrip,
    exact: roundTrip === ref.hex,
    hslDeviation: hsl.map((v, i) => Math.abs(v - ref.hsl[i])),
  };
});

const exact = results.filter(r => r.exact).length;
console.log(`Round-trip accuracy: ${exact}/${results.length}`);
console.table(results);