Please add a "copy" button in this picker

[AryanJaiswal]

Requesting a feature to copy the code in the input box

[AryanJaiswal]

And also how to change the box size that should be clicked to open the picker

[simonwep]

You can style .pcr-button or use useAsButton to create your own :)

[saeed74]

I changed save btn to copy with listeners:

    pickr.on('save', (color, instance) => {

        var data = $('.pcr-result').val();
        copyToClipboard(data);

    });

copyToClipboard function:

function copyToClipboard(text) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
}

you can also change text of SAVE to COPY if you want:

const pickr = Pickr.create({
    el: '.mepickr',
    theme: 'nano',
    swatches: [
        '#F44336',
        '#F9C70E',
        '#2AB3D1',
        '#0C32F5',
        '#D11AFF',
        '#1FD4C3',
        '#15C083'
    ],
    components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
            hex: true,
            rgba: false,
            hsla: false,
            hsva: false,
            cmyk: false,
            input: true,
            clear: false,
            save: true
        }
    },
    i18n: {
       'btn:save': 'Copy'
    }
});