かっこいいカラーピッカーが実装できるjQueryプラグイン5選

UIデザインにカラーピッカーを取り入れる。

WordPressのテーマにはデフォルトテーマも含め、管理画面にカラーピッカーウェジットが設置されているものが数多くあります。

この傾向はWordPressに限らず、世のCMS全般に言えることです。

本日は、かっこいいカラーピッカー実装用jQueryプラグインを、5つ紹介したいと思います。

提供が終了している場合がありますのでご了承ください。

1. Farbtastic Color Picker

Farbtastic Color Picker

2007年に作成された、割と古いプラグイン。

ドーナツ型の色相ピッカー+スクエア型の彩明度ピッカーがカッコイイです。

ライセンスはGPLになります。

ダウンロードおよびDEMOは、下記URLからどうぞ。

http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

2. Colorwheel

Colorwheel

こちらもドーナツ型の色相ピッカー+スクエア型の彩明度ピッカー。

ただ、ドーナツ部分にpng画像を使っていないため、少々パーツの質感が荒いのが気になります。

ライセンス形態はMITです。

http://jweir.github.io/colorwheel/

3. Chromoselector – a jQuery Color Picker Plugin

Chromoselector

様々なカラーピッカーデザインがセットになっているjQueryプラグインです。

特にドーナツ型の色相ピッカーとグルグル動くデルタ型の彩明度ピッカーが、めちゃくちゃカッコイイ。

ただこちらは、有料になります。

詳細確認は下記URLです。

http://codecanyon.net/item/chromoselector-a-jquery-color-picker-plugin/3810545?ref=roccivic

4. colpick Color Picker

colpick Color Picker

フォトショップなどのデザインソフトを思わせる様なカラーピッカー。

ホワイト系とダーク系の2種類のデザインから選べます。

こちらは、MITとGPLのデュアルライセンスです。

https://github.com/josedvq/colpick-jQuery-Color-Picker

5. Bootstrap Color Picker Sliders

Bootstrap Color Picker Sliders

CSSフレームワークBootstrap向けのカラーピッカー。

フォームをクリックすると、ツールチップ上に設置されたスライド式カラーピッカーがふわっと出現します。

ライセンスはApache Licenseとなっております。

ダウンロードおよびDEMOは、下記URLからどうぞ。

http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply