将工具提示RGB值替换为其颜色名称

Question

如何更改以下内容？
到工具提示显示颜色名称而不是生成的RGB数字。

<div class="sp-palette-container"> 
    <div class="sp-palette sp-thumb sp-cf"> 
     <div class="sp-cf sp-palette-row sp-palette-row-0"> 
      <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(12, 14, 16)" title="rgb(12, 14, 16)"> 
       <span class="sp-thumb-inner" style="background-color:rgb(12, 14, 16);"></span> 
      </span> 
      <span class="sp-thumb-el sp-thumb-light" data-color="rgb(231, 234, 238)" title="rgb(231, 234, 238)"> 
      <span class="sp-thumb-inner" style="background-color:rgb(231, 234, 238);"></span> 
      </span> 
      <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(104, 106, 109)" title="rgb(104, 106, 109)"> 
      <span class="sp-thumb-inner" style="background-color:rgb(104, 106, 109);"></span> 
      </span> 
      <span class="sp-thumb-el sp-thumb-dark sp-thumb-active" data-color="rgb(208, 14, 0)" title="rgb(208, 14, 0)"> 
      <span class="sp-thumb-inner" style="background-color:rgb(208, 14, 0);"></span> 
      </span> 
      <span class="sp-thumb-el sp-thumb-light" data-color="rgb(255, 171, 0)" title="rgb(255, 171, 0)"> 
      <span class="sp-thumb-inner" style="background-color:rgb(255, 171, 0);"></span> 
      </span> 
      <span class="sp-thumb-el sp-thumb-dark" data-color="rgb(119, 94, 160)" title="rgb(119, 94, 160)"> 
      <span class="sp-thumb-inner" style="background-color:rgb(119, 94, 160);"></span> 
      </span> 
     </div> 
    <div class="sp-cf sp-palette-row sp-palette-row-selection"></div> 
</div> 

Answer 1

如果你知道所有可能的RGB字符串（有anren't他们中许多人），你可以这样做：

var rgbToColorNames = { 
    "rgb(255, 0, 0)": "Red", 
    "rgb(0, 255, 0)": "Green", 
    ... 
} 

var spans = document.getElementsByClassName("sp-thumb-el"); 
for (var i = 0, len = spans.length; i < len; ++i) { 
    var span = spans[i]; 
    span.title = rgbToColorNames[span.title]; 
} 

否则就没有办法为RGB值转换回英语。所以，如果rgb值可以是任何东西，那么你有点不幸。也许你可以用数学将rgb值的范围组合在一起来表示一种颜色。