JSFiddle - React, Tailwind, and code Playground
HTML
<div class="copy-button green"></div>
<div class="copy-button white"></div>
<div class="copy-button red"></div>
CSS
.copy-button {
color:red;
width:120px;
height:120px;
float: left;
margin: 0 8px;
}
.green {
background:#2ecc71;
}
.white {
background:#fff;
}
.red {
background:#e74c3c;
}
JavaScript
var color = '';
$('.copy-button').click(function() {
var x = $(this).css('backgroundColor');
hexc(x);
alert(color);
})
function hexc(colorVal) {
var parts = colorVal.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
delete(parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
color = '#' + parts.join('');
document.execCommand("copy");
}