sounansa.net

使い勝手の良いカラーピッカーのjavascriptライブラリ 商用利用OKなもの14選 

スポンサーリンク

多くのケースでは、WEBシステムでカラーピッカーを実装しようと思うと、グラデーションのパレットから選択するよりも、あらかじめ決められたいくつかのパレットの中から選択させるほうが、ユーザービリティに優れていると思います。

検索しても出てくるのはグラデーションから選択するカラーピッカーばかりなので、絞り込まれた色のパレットからの選択方式のカラーピッカーを調べてみました。

Huebee

惜しいな。デザインのテイストは悪くないですが、実案件ではこんなにパレットの色は必要ないです。ライセンスはMITです。
カラーピッカーライブラリ「Huebee」

md-color-picker

Angular用のカラーピッカーです。Angular-Materialをベースに作られています。パレットのパターンがいくつもあります。無駄に高機能すぎるので、もっと機能を絞れると嬉しいです。ライセンスはMITです。
カラーピッカーライブラリ「md-color-picker」

Really Simple Color Picker in jQuery

jQueryベースのライブラリです。見た目がちょっとレガシーな雰囲気なので、Styleを調整して使いたいですね。でもこのくらいのシンプルさのほうが正直、案件では使いやすいとは思います。ライセンスはMITです。
カラーピッカーライブラリ「Really Simple Color Picker in jQuery」

jquery-simple-color

jQueryベースのライブラリです。パレットの色の数を指定できるようになっているなど、オプションの指定が充実しており、かなり使い勝手は良いです。ライセンスはMITです。
カラーピッカーライブラリ「jquery-simple-color」

JQuery Palette Color Picker

jQueryベースのライブラリです。デザインがきれいにまとまっているので、サクッとそのまま使いたいという場合にはおすすめ。ライセンスはMITです。
カラーピッカーライブラリ「JQuery Palette Color Picker」

Eight Bit Color Picker

JQueryには依存しない単独のライブラリです。わずか3KBという軽量な点は魅力です。Angular版も用意されています。ライセンスはMITです。
カラーピッカーライブラリ「Eight Bit Color Picker」

simpleColorPicker

jQueryベースのライブラリです。超シンプルです。ライセンスはMITです。
カラーピッカーライブラリ「simpleColorPicker」

ng-color-picker

Angular用のカラーピッカーです。ライセンスはMITです。
カラーピッカーライブラリ「ng-color-picker」

wColorPicker.js

jQueryベースのライブラリです。このプラグインを使ったお絵かきツールなどのライブラリもありますので、参考にできそうです。ライセンスはMITです。
カラーピッカーライブラリ「wColorPicker.js」

Spectrum

JQueryには依存しない単独のライブラリです。色々なオプションが用意されており、ドキュメントがとても充実しているのはありがたいです。ライセンスはMITです。
カラーピッカーライブラリ「Spectrum<」

Tiny Colorpicker

パレットが丸いデザインのカラーピッカーです。ちょっと変わったデザインを求めるならいかがでしょう?ライセンスはMITです。
カラーピッカーライブラリ「Tiny Colorpicker」

React Color

react用のカラーピッカーです。豊富なデザインパターンが用意されています。reactだったらこれで決まりではないでしょうか。ライセンスはMITです。
カラーピッカーライブラリ「React Color」

有料ライブラリ

jQuery Color Picker

全画面表示ができるカラーピッカーです。価格は$8です。
カラーピッカーライブラリ「jQuery Color Picker」

Material Color Picker

マテリアルデザインのおしゃれなカラーピッカーです。価格は$12です。
カラーピッカーライブラリ「Material Color Picker」

ColorPicker.Pro

シンプルで使い勝手のよさそうなカラーピッカーです。複雑すぎず、扱いやすいし、UX的にもちょうど良い仕様としてこのぐらいが良いかもね。価格は$12です。

スポンサーリンク

comments powered by Disqus