色の変化がわかるカラーピッカーjavascript「Interactive Color Picker」

HEXなどで指定した色を視覚的にインタラクティブに見せるカラーピッカーと呼ばれるものがあります。
Interactive Color Pickerでは、色の指定はもちろん、色を変更するときに変更前/後を両方表示できます。
これにより、どちらの色が好ましいか差を見ながら決めることができます。

sponsors

使用方法

InteractiveColor.zipをダウンロードします。
<script type="text/javascript" src="http://yourdomain/ColorPicker.js"></script>
<link rel="stylesheet" href="http://yourdomain/colorpicker.css" type="text/css">
以上をheadに書き込み、カラーピッカー直下に以下のscriptを挿入します。
<script type="text/javascript">
fixGradientImg();
	var currentColor = Colors.ColorFromRGB(64,128,128);
		new dragObject("arrows", "hueBarDiv", arrowsLowBounds, arrowsUpBounds, arrowsDown, arrowsMoved, endMovement);
		new dragObject("circle", "gradientBox", circleLowBounds, circleUpBounds, circleDown, circleMoved, endMovement);
		colorChanged('box');
</script>
メインのカラーピッカー部分は長いので割愛します。
zipファイル同梱のindex.htmlかこのページのソースをご覧下さい。

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル


Hex:
Red:
Green:
Blue:
Hue:
Saturation:
Value: