Home > Web制作 > 画像で使われている色を配色として抽出してくれる「colr.org」

画像で使われている色を配色として抽出してくれる「colr.org」

Posted by: WebPersons編集部
2008年3月18日 18:54
Web制作

Web担当者をしていると写真を見ていて良いものがあると「この配色をサイトに使ってみたい！」とついついそんな目で写真や画像を見ている事が多いのですが、実際に写真に使われている色をWebで利用しようと思うと、コードを調べたりしなければなりません。

そんなときはカラーコードであれこれ調べる前に、colr.org にアクセスしてみて下さい。

このサイトはアップロードした画像から、配色を抽出してくれたり指定したURLからそのWebサイトで利用されている配色を抽出してくれます。

簡単に抽出する事ができますので、実際にサイトを見てみましょう。

アクセスすると画像共有サイトの「flickr」の画像がランダムに表示されているので今回はそれを使ってみます。

※配色を抽出したい画像がある場合は左側の画像の下にある　「load your own」をクリックして画像をアップロードします。

まず画像の上にマウスを持ってきてみて下さい。
すると利用されている色がモザイクのように抽出されます。

個別の色のコードやRGBの割合を知りたいときは画像上の色をクリックすれば右側のコード部分にコードが表示されます。

右側にある「more」を押せばRGBの割合も表示されます。

画像の上にある「Pick a scheme from image」をクリックします。

カラーパレットが表示されます。

パレットの色にマウスを合わせると、画像のどの部分に使われている色なのかがわかります。

パレットの右側にある「＋」をクリックするとカラーパレットに色を追加する事が出来ますしtagをつけたり、「more」から「.aco形式」のファイルをクリックすればカラーパレットとしてローカル上に保存する事も出来ます。

気になる配色の画像を見つけたら、ぜひこのcolr.orgで配色を調べて下さい。