1. まとめトップ

カラーピッカーjQueryプラグイン一覧。

ブログやホームページに埋め込めるカラーピッカプラグイン、jqueryで2行ぐらいのコードで簡単に設置できます。

更新日: 2015年12月18日

2 お気に入り 25889 view
お気に入り追加

この記事は私がまとめました

nemusumeさん

ブログやHP制作に導入できるカラーピッカー

自分のサイトにカラーピッカーを導入出来ます。
簡単なjavascriptのコードで実装可能です。

個人的にはウェブツールを作る時に使っています。
カラーピッカーも色々なタイプがあります。

以下は、解説サイト&デモ付きのリンク集です。
自分のおすすめ順で紹介しています。

Farbtastic Color Picker

おしゃれなカラーピッカー
白丸2つを動かして色を決定します。

個人的には一番シンプルでいいと思います。

excolor picker

スマホにも対応出来るカラーピッカープラグイン

HTML5 <input type="color">

javascript無しで以下のタグの入力だけでカラーピッカーが出ててきます。

<input type="color">

Bootstrap Color Picker

rgbaで透明度の指定も出来るので良い。

色々なカラーを選択するパターンがあります。
またカラーコードも、RGB・RGB(A)・HEX・HSL
と出力できます。

☆使い方
Bootstrap Color Picker Sliders
http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/

jQuery MiniColors
http://labs.abeautifulsite.net/jquery-minicolors/

カラーピッカーjs

JSColor

<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">

コードはこれだけで実行できてしまう便利なカラーピッカー

spectrum

jQuery.colorpicker

高機能カラーピッカ
表示できるカラーコードの種類は最多。

photoshop風カラーピッカ

前の色と比較出来ます
複数のカラーコード表示します。

Tiny jQuery colorPicker

1 2