在minicolors jquery中显示颜色名称而不是颜色十六进制？

Question

在jquery-minicolors中，按其性质输入框，以十六进制显示颜色和颜色代码，如fiddle所示。

我试图找到一种可能的解决方案，使minicolors的文本框显示颜色样本和颜色名称，而不是颜色十六进制代码。

以下代码的结果对我不起作用。有什么线索和提示可以实现吗？谢谢。

// Hide all stuffs
$('.rw_widget_colour').addClass('rw_hidden');

// Init minicolors
$('.text').minicolors();

// Set color
$('.colorpicker').minicolors('value', '#2ed1c1');

// Show
$('.rw_widget_colour').removeClass('rw_hidden');

$.minicolors.defaults.theme = 'bootstrap';
$('input').minicolors({
  control: 'brightness',
  swatches:['#031b4d','#303e4d','#062847','#00122e','#115478','#243447','#152324','#11202f'],
  show: function() {
    $('.minicolors-grid,.minicolors-slider').css('display','none');
    $('.minicolors-swatches').css('margin-top','10px');
  },
  change: function(value, opacity) {
    var ColorName = {
                  '#031b4d':'Blue',
                  '#303e4d':'Black',
                  '#062847':'Orange',
                  '#00122e':'Pink',
                  '#115478':'Green',
                  '#243447':'Red',
                  '#152324':'Gray',
                  '#11202f':'Dark Gray'
                };
    console.log(value+':'+ColorName[value]);                
    $(this).val(ColorName[value]);
  }
})

.rw_hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.css">
<script src="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.js"></script>    


<form class="aui">
    <label class="rw_widget_colour">
        <div class="rw_widget_swatch">jaoja</div>
        <input class="text colorpicker" type="text" name="rw_widget_colour" value="#ff0"/>
    </label>
</form>

Answer 1

使用js库Name that Color，您可以获取如下颜色名称：

ntc.name(value)

摘要：

$('.rw_widget_colour').addClass('rw_hidden');
$('.text').minicolors({
    change: function(value, opacity) {
        var n_match  = ntc.name(value);
        $('.rw_widget_swatch').text(n_match[1]);
    }
});
$('.colorpicker').minicolors('value', '#2ed1c1');
$('.rw_widget_colour').removeClass('rw_hidden');

.rw_hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.css">
<script src="http://labs.abeautifulsite.net/jquery-minicolors/jquery.minicolors.js"></script>
<script src="https://rawgit.com/insomnious0x01/ntc-js/master/ntc.js"></script>

<form class="aui">
    <label class="rw_widget_colour">
        <div class="rw_widget_swatch">jaoja</div>
        <input class="text colorpicker" type="text" name="rw_widget_colour" value="#ff0"/>
    </label>
</form>