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

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

使用方法
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か色の変化がわかるカラーピッカーjavascript「Interactive Color Picker」サンプルのソースをご覧下さい。

2007年12月08日

前の記事：jQueryベースでクールなグラフを作成するjavascript「Flot」
次の記事：imgタグ一つだけ！超簡単グラフ作成ツール「Google Chart API」

関連記事

• [mootools]Color Picker
• PhotoShopライクなカラーピッカーjavascript「Photoshop-like JavaScript Color Picker」
• 見栄えの良いカラーピッカーjavascript「Color Sphere」
• 色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」
• 色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」