Cách tạo bộ chọn màu HTML5 để trả về tên màu thay vì mã màu?

Question

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

Tôi muốn điều này đổi tên màu thay vì mã màu ví dụ: "Màu xanh" thay vì "# 0000ff".

Answer 1

$(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>

Answer 2

Bạn có thể sử dụng một java script thư viện "Name that color".

<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>