デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。

このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。

詳しくは以下

さらにデモをご覧になりたい方は「Grade.js」からどうぞ。基本的には写真やイラストの配色を読み込んでもっとも利用されている色といろのグラデーションを取ってきているような印象です。写真の世界がより拡張されたような印象を与えてくれます。

ライセンスはMITライセンスとなっており、「grade-js」から実装方法をソースコードは「Github」からダウンロードすることができます。

grade-js