ごく軽量なjQueryプラグイン・jqColorPicker.jsを使って、多機能なカラーピッカーを実装します。

下側サンプル内の3つ並んだ色背景付きのinput欄は、左からそれぞれweb用の16進、rgb形式、hsl形式の色コードになっています。そのまま数値入力で色コードの変更が可能ですが、クリックすると、カラーピッカーを表示し、マウスで色を選択できます。その下側の3つアイコンは、クリックすると上の3つと同様のカラーピッカーを表示します。カラーピッカーは左側が色の明度、彩度を選ぶスケール、右側が色相を選ぶスケール、下側がアルファチャンネル（透明度）を選ぶスケールになっています。

「表示の切替：」selectから、用途に応じて、カラーピッカーの表示方法を変更できます。「モバイル用…」は、QRコードが表示され、それを読み込むことでモバイル用webページに飛ぶことができます。「下段に色を一時保存」は、ピッカーで選んだ色を右下の「S」をクリックすることで、下側に一時保存保存します。