Huebee

JavaScript

オシャレなカラーピッカーを手軽に表示させれる「Huebee」

Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させることができるJavaScriptライブラリです。1クリックでサクッとカラーピッカーを呼び出すことが可能なので、とても便利です。

Huebee

Huebee

デモではRGB値が書かれたボックスをクリックすると、オシャレなカラーピッカーが表示されるようになっています。

さまざまな色が見やすいようにグリッド状に配置されており、そのなかから自分の好きな色をクリックするだけでカラーを決定することができます。シンプルで見やすいので、じっくりどの色にするか選べるのがいいですね。

また、Huebeeの実装面ではオプションもいろいろ用意されています。主なオプションは、setText、setBGColor、hues、hue0、shades、saturations、customColors、notation、staticOpen、classNameといった項目があります。

各オプションのセッティングにより、自分好みにカスタマイズして使えるところも魅力の一つです。

また、CSSを利用することでカラーピッカー自体のデザインのカスタマイズも可能です。例えば、カラーグリッドのサイズを変更したい場合には、「.huebee_cursor」というクラス名のwidthとheightの値を好きなサイズに設定してあげればOKです。

ほかにも、カラーピッカーの背景カラーを指定したり、ボーダーのデザインを調整したりと、さまざまなデザイン面でのカスタマイズができます。

シンプルなカラーピッカーをサクッと実装するのもよし、自サイトに合わせて細かいデザインまで追い込んでいくのもよし。いろいろと応用の効くカラーピッカーを探している人にはピッタリなJavaScriptライブラリといえそうです。

これからサイト内にカラーピッカーを設置したいと考えている人は、ぜひ「Huebee」を選択肢の一つに入れてみてはいかがでしょうか。

というわけで、以上、シンプルでオシャレで手軽に表示させることができるカラーピッカー「Huebee」のご紹介でした。

jQuery Scrollifyセクションごとにスクロールしてくれる「jQuery Scrollify」前のページ

複数の画像を表示したりスライドしたりできるスライダー「miSlider」次のページmiSlider

関連記事

  1. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  2. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  3. simplePagination.js
  4. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  5. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  6. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP