HSVColorPickerのデモ

textタグを選ぶとカラーピッカーを出す

HTMLコード

<script type="text/javascript">
	var colorPicker = new HSVColorPicker();
</script>
<input type="text" id="color" value="#ffffff" 
	onfocus="colorPicker.show(this.id);" onblur="colorPicker.hide();" />

ボタンを押すとカラーピッカーを出す（選択された色をボタンに反映する）

open

HTMLコード

<script type="text/javascript">
	var colorPicker = new HSVColorPicker();
</script>
<input type="hidden" id="color2" value="#cccccc" 
	onchange="$('button2').style.backgroundColor = this.value; colorPicker.hide();" />
<button id="button2" style="background-color: #cccccc;" 
	onclick="colorPicker.show('color2', 20, 20); return false;">open</button>

色相をクリックで選択する

HTMLコード

<script type="text/javascript">
	var colorPicker3 = new HSVColorPicker({
		"hueClick" : true
	});
</script>
<input type="text" id="color3" value="#ffffff" onfocus="colorPicker3.show(this.id);" />

選択できる色を増やす

HTMLコード

<script type="text/javascript">
	var colorPicker4 = new HSVColorPicker({
		"hStep" : 10,
		"sStep" : 0.125,
		"vStep" : 0.125
	});
</script>
<input type="text" id="color4" value="#ffffff" 
	onfocus="colorPicker4.show(this.id);" onblur="colorPicker4.hide();" />