如何使HTML5颜色选择器返回颜色名称而不是颜色代码


How to make HTML5 color picker to return color name instead of color code?

<label for="background-color">Choose a color for background :</label> 
<input id="background-color" type="color" /> 

我希望它返回颜色名称而不是颜色代码例如,用"蓝色"代替"#0000ff"。

$(document).ready(function(){
$("#showPaletteOnly").spectrum({
    showPaletteOnly: true,
    showPalette:true,
    hideAfterPaletteSelect:true,
    color: 'blanchedalmond',
change: function(color) {
        printColor(color);
    },
    palette:["red", "green", "blue"],
});
});
function printColor(color) {
alert(color.toName());
   //var text = "You chose... " + color.toHexString();    
   //$(".label").text(text);
    
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" type="text/css" href="https://bgrins.github.io/spectrum/spectrum.css">
<h2>Palette Only</h2>
<input type='text' id="showPaletteOnly"/>
<br />
<span class='label'>Choose a color</span>

您可以使用 java 脚本库"命名该颜色"。

<script type="text/javascript">
  var n_match  = ntc.name("#6195ED");
  n_rgb        = n_match[0]; // RGB value of closest match
  n_name       = n_match[1]; // Text string: Color name
  n_exactmatch = n_match[2]; // True if exact color match
  alert(n_match);
</script>