Reshader

JavaScript

カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

Reshaderは、カラーの濃淡を得ることができる便利なJavaScriptライブラリです。指定した任意のカラー値を基準にして、そのカラーより薄い色から濃い色までのカラー値を取得することが可能です。オプションも用意されているので、カスタマイズ性も高いライブラリに仕上がっています。

Reshader

デモ

Usageという項目がある場所に、カラーコード(hex)を入力するボックスが用意されています。デモページ読み込み時には「#6EEB83」という値が指定されていて、その下には指定したカラーコードを基準にして作られた濃淡の異なるカラーとカラーコードのリストが表示されています。

ボックス内に好きなカラーコードを入力すると、リアルタイムで反映されます。特定の色を元に濃淡の異なるカラーコードを取得したい場合にはとても役立つ機能ですね。

また、APIではcolorとoptionsのセッティングができるようになっています。colorには先ほどのhexのほか、rgbやhslでの指定も可能です。

optionsには、numberOfVariations、contrastRatio、outputModel、shouldIgnoreRepeated、shouldIgnoreWhites、shouldIgnoreBlacksといった項目があります。

多彩なカスタマイズを施せるのも、このJSライブラリの魅力になっています。

Reshader

関連記事

  1. HR Navigation Responsive Menu
  2. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  3. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  4. Hamburger Icon Menu
  5. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

最近の記事

  1. Anker PowerHouse 200

アーカイブ

PAGE TOP