比较两个阈值颜色的 JavaScript

基于 JavaScript，我们可以编写一个函数，用于比较两个阈值颜色。以下是一个简单但完整的代码示例。

/**
 * 比较两个阈值颜色
 *
 * @param {string} c1 - 颜色1，格式为 "#RRGGBB"
 * @param {string} c2 - 颜色2，格式为 "#RRGGBB"
 * @param {number} threshold - 阈值，值从 0 到 255
 * @returns {boolean} 如果两个颜色之间的差异小于阈值，则为 true，否则为 false
 */
function compareThresholdColors(c1, c2, threshold) {
  // 将颜色字符串转换为 RGB 数组
  const rgb1 = c1.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).slice(1).map(x => parseInt(x, 16));
  const rgb2 = c2.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).slice(1).map(x => parseInt(x, 16));

  // 计算颜色之间的差异
  const diff = Math.sqrt(
    (rgb1[0] - rgb2[0]) ** 2 +
    (rgb1[1] - rgb2[1]) ** 2 +
    (rgb1[2] - rgb2[2]) ** 2
  );

  // 如果差异小于阈值，则返回 true，否则返回 false
  return diff <= threshold;
}

在上面的代码中，我们使用正则表达式将传递给函数的颜色字符串转换为 RGB 数组。然后，我们计算两个颜色之间的差异，使用三次平方根函数对颜色之间的欧几里得距离进行计算。

在阈值和颜色差异之间进行比较后，我们返回一个布尔值，表示两个颜色之间的差异是否小于阈值。

使用此函数，您可以比较两个阈值颜色并在需要时采取必要的措施。

// 比较两个阈值颜色
const c1 = "#FF0000"; // 红色
const c2 = "#FF7F00"; // 橙色
const threshold = 50; // 阈值

if (compareThresholdColors(c1, c2, threshold)) {
  console.log("这两个颜色之间的差异小于阈值！");
} else {
  console.log("这两个颜色之间的差异大于阈值！");
}

以上就是使用 JavaScript 比较两个阈值颜色的完整指南。