javascript - RGB 到颜色名称映射(近似颜色映射)

Question

我正在构建颜色选择器。如果用户选择一个颜色方 block ，它将转换为近似颜色名称。

例如，如果用户为 C0C0C0 或 BEBEBE 选择颜色，则两个颜色字符串都将转换为 grey，即使每种颜色都有一个具体颜色名称。

我什至不知道如何解决这个问题，Google 也没有帮助我! :(

这是我的颜色函数的 sudo 代码

getApproxColor = (colorString) => {
    if(`BBBBBB` <= colorString  <= 'CCCCCC') {
        return 'grey'
    }
    ...
}

我应该在此函数上写下完整的颜色名称吗？有十六进制颜色的公式吗？

Answer 1

我不确定这是否是最好的方法，但如果我不得不做这样的事情，我想我会首先将这些十六进制值转换为 hsl。

然后，您必须检查饱和度和亮度，以便找到灰色并在您的发现中添加更多粒度。

这是仅使用 6 种基色并带有 stolen code from an older question 的粗略概念证明。执行此十六进制 => hsl 转换。

inp.oninput = e => {
  if (!inp.checkValidity()) return;
  var val = inp.value;
  if (val.length !== 3 && val.length !== 6) return;
  var color = hexToName(inp.value);
  if (color) {
    inp.style.backgroundColor = '#' + val;
    log.textContent = color;
  }
}


function hexToName(hex) {
  // first get hsl correspondance
  var hsl = hexToHsl(hex);
  if(!hsl){
    return;
  }
  // get the base color
  var color = getColorName(hsl[0] * 360);
  // check saturation and luminosity
  // needs more granularity, left as an exercise for the reader
  if (hsl[1] < .5) {
    return hsl[2] <= .5 ? hsl[2] === 0? 'black' : 'darkgray' : hsl[2] === 1 ? 'white': 'gray';
  }
  return hsl[2] <= .5 ? color : 'light' + color;
}
function getColorName(hue) {
  // here you will need more work:
  // we use fixed distance for this simple demo
  var names = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta'];
  var angles = [0, 60, 120, 180, 240, 300];
  var match = angles.filter(a =>
    a - 60 <= hue && a + 60 > hue
  )[0] || 0;
  return names[angles.indexOf(match)];
}
// shamelessly stolen from https://stackoverflow.com/a/3732187/3702797
function hexToHsl(hex) {
  if (hex.length === 3) {
    hex = hex.split('').map(c => c.repeat(2)).join('');
  }
  if (hex.length !== 6) {
    return;
  }
  var r = parseInt(hex[0] + hex[1], 16);
  var g = parseInt(hex[2] + hex[3], 16);
  var b = parseInt(hex[4] + hex[5], 16);

  r /= 255, g /= 255, b /= 255;
  var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var 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);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }

  return [h, s, l];
}

#<input id="inp" type="text" pattern="[0-9a-fA-F]+">
<pre id="log"><pre>