Display Color name instead of color hex in minicolors jquery?

Question

In jquery-minicolors, input box by its nature, display the color and color code in hex as demostrated in fiddle.

I tried to find a possible solution that the text box of minicolors display the color swatch and the color name instead of color hex code.

The result of below code does not work for me. Any clue and tip I can achieve that? Thanks.

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

Using the js lib Name that Color you can get the color name like this:

ntc.name(value)

The snippet:

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