プログラムを書かずカラーピッカーを表示する「カラーピッカー.js」

「カラーピッカー.js」約5年前ぐらいに作成されたあとアップデートしていないようですが、いくつかあるカラーピッカーの中でもテキストボックスをクリックすると表示される動きとカラーピッカーのデザインとUIが良いんですよ。

カラーピッカー.jsの特徴

JavaScript（jQuery）などプログラムを書かずにテキストボックスをクリックするとカラーピッカーが表示されるところが特徴です。

プラグインのダウンロードと使用方法は、日本語で（カラーピッカー.js）作成者さんのサイトで確認できます。

簡単な説明をしますと、ダウンロードしたファイルを解凍してできたフォルダの中に「html5jp」フォルダを任意の所に配置します。

例として、使用するhtmlファイルと同じフォルダにhtml5jpフォルダを配置した場合、script要素を下のように設定します。

<script src="./html5jp/cpick.js"></script>

次に、カラーピッカーを使いたい箇所で下のコードを記述するだけで完成です。

<input type="text" name="c1" value="#e4521e" size="12" id="t1" class="html5jp-cpick" />

また、カスタマイズすることもできるので作者さんのサイトを確認してください。