Vibrant.js – 画像を解析して主だった色をピックアップ // MOONGIFT Archived

写真はそれ単体で載せるだけでなく、写真に合わせてコンテンツの雰囲気を変えたりするとより際だって表現力が高くなります。そのためには写真の解析が欠かせませんが、これは意外と難しいです。そこで使ってみたいのがVibrant.jsです。写真を解析し、主立ったカラーパレットを抽出してくれるライブラリです。

Vibrant.jsの使い方

Vibrant.jsを使って解析された画像の背景にメインカラーを当てています。

必ずしも一番多い色ではなく、その写真の中で一番目立っているところを使っているのが分かります。

この手のライブラリは幾つかありますが、どの色をピックアップするか、さらにどれを優先するかはアルゴリズムによって違って面白いです。写真を元にしたカラーリストの作成やデザインのインスピレーションを得るのにぴったりではないでしょうか。

Vibrant.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。