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. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  2. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  3. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP