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」のご紹介でした。

関連記事

  1. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  2. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  3. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. jQuery Navobile
  6. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP