Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="chromoselector.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#color').chromoselector({
target: '#picker',
autoshow: false,
create: function () {
$(this).chromoselector('show', 0);
},
width: 250
});
});
</script>
<style type="text/css">
form {
margin: 1em;
}
input {
width: 30%;
}
#picker {
border: 1px solid;
float: left;
padding: 1em;
background-color: #e4ccc1;
}
</style>
</head>
<body style="margin: 2em;">
<form>
<div id="picker">
<label for="color">Pick a color:</label>
<input id="color" name="basic2" type="text" value="#6e348e" />
</div>
</form>
</body>
</html>