Color Picker using clipboard.js

color-clipboard.php

<!-- https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js -->
<script src="clipboard.min.js"></script>
<script>
function copyc(color, element)
{
	new Clipboard('.block', {
		container: element
	});
}
</script>
<style>
.block
{
	display: inline-block;
	border: 1px solid #000000;
	margin: 3px;
	height: 20px;
	width: 20px;
	cursor: pointer;
}
</style>
<div style="margin: auto;">
<?php
$colors = array(
	"00",
	#"11",
	#"22",
	"33",
	#"44",
	#"55",
	"66",
	#"77",
	#"88",
	"99",
	"AA",
	#"BB",
	"CC",
	#"DD",
	#"EE",
	"FF"
);

foreach($colors as $red)
{
	foreach($colors as $green)
	{
		foreach($colors as $blue)
		{
			echo "<button onclick=\"copyc('#{$red}{$green}{$blue}, this')\" data-clipboard-text='#{$red}{$green}{$blue}' class='block' style='background-color: #{$red}{$green}{$blue};' title='#{$red}{$green}{$blue}'></button>";
		}
	}
}
?>
</div>

colors.php

<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<script>
function copyc(color)
{
	document.getElementById("cph").innerHTML=color;
	document.getElementById("cph").setAttribute("data-clipboard-text", color);
	new Clipboard('.block', {
		container: document.getElementById('cph')
	});
}
</script>
<style>
.block
{
	display: inline-block;
	border: 1px solid #000000;
	margin: 3px;
	height: 20px;
	width: 20px;
	cursor: pointer;
}
</style>
<button class="btn" data-clipboard-text="" id="cph" style="display: block;">#000000</button>
<div style="margin: auto;">
<?php
$colors = array(
	"00",
	"11",
	"22",
	"33",
	"44",
	"55",
	"66",
	"77",
	"88",
	"99",
	"AA",
	"BB",
	"CC",
	"DD",
	"EE",
	"FF"
);

foreach($colors as $red)
{
	foreach($colors as $green)
	{
		foreach($colors as $blue)
		{
			echo "<button onclick=\"copyc('#{$red}{$green}{$blue}')\" data-clipboard-text='#{$red}{$green}{$blue}' class='block' style='background-color: #{$red}{$green}{$blue};' title='#{$red}{$green}{$blue}'></button>";
		}
	}
}
?>
</div>