CSSのfilterとVibrant.jsを使って、写真画像から色を抽出します。サンプルの7点の画像(jpeg)をスライダーの左右矢印から移動して選択し、下側のスポイトアイコンをクリックすると、5種類の色を画像から抽出し、16進数色コードとともに下側に表示します。その際、画像から色が下側に抜き取られ、画像がモノクロに変わる、もう一度スポイトアイコンをクリックするか、スライダーから次や前の画像に移動すると色を戻す、というアニメーション効果付きです。ただ、古めのブラウザではうまく動作しないかもしれません。また、画像によっては、期待した色を抽出できない場合もあるようです。
img01
img02
img03
img04
img05
img06
img07
  • ####### #######
  • ####### #######
  • ####### #######
  • ####### #######
  • ####### #######

 

※参照元:http://tympanus.net/Development/ColorExtraction/
戻るボタン