HTML Color picker

HTML Color picker is used to choose different color. We can apply in our html element by choosing color from Color picker.

We can create Color picker using php and html as per as below example.

Example :

<html>
<head>
<title>Learn HTML Color Picker by aryatechno</title>
</head>
<body>
<h2>HTML5 Color Picker</h2>
<div class="content">
<label for="colorpicker">Color Picker:</label>
<input type="color" id="color_picker" onchange="javascript:document.getElementById('code').innerHTML=this.value;" value="#ff0000">
<p>
Hex Color Code: <span id="code" >#ff0000</span>
</p>

<p><h3>Pick Color with HEX and RGB code </h3></p>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="33%"><strong>Color</strong></td>
<td width="30%"><strong>Hex Code</strong></td>
<td width="30%"><strong>RGB Code</strong></td>
</tr>

<?
$colors = array();
while (true) {
$color = substr(str_shuffle('ABCDEF0123456789'), 0, 6);
$colors[$color] = '#' . $color;
if (count($colors) == 100 ) {

foreach($colors as $key=>$hexcode){
list($r, $g, $b) = sscanf($hexcode, "#%02x%02x%02x");

?>
<tr>
<td height='25' bgcolor='<?=$hexcode; ?>'></td>
<td><?=$hexcode; ?></td>
<td>rgb(<?=$r?>, <?=$g?>, <?=$b?>)</td>
</tr>
<?
}
break;
}
}

?>


</table>



</div>

</body>
</html>

Output :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

51304