ウェブサイトで使われている画像の色(カラーコード)を調べるWEBサービス『Whats Its Color』の使い方

SPONSORED LINK
Color find

[email protected]_waです。

このサイトのこの部分ってどんな色を使っているんだろう?気になったことはありませんか?

調べたいけど、フリーソフトを入れるなど手間はかけたくない。そんな方にお勧めしたいオンラインサービス『Whats Its Color』の使い方を紹介します。

※このサービスはアルファブロガーのコリスさんのブログで知りました。

画像で使用されている色を調べるオンラインサービス -Whats Its Color | コリス
海外のウェブ関連の記事を中心に紹介しているコリスさん。いつも勉強させてもらっています。

 

基本編

私が実際に色を調べようとしたサイトを例に紹介します。

まず、自分が気になるサイトのURLを調べます。私はたまたま見つけたおしゃれなサイトCopenhagen Art Festivalの緑がかった青と、オレンジに近い赤のカラーコードを調べようとしました。

Color find01

気になるページのURLをWhats Its Colorのサイトにコピペして「Upload & Process」のボタンをクリックします。

Color find02

これだけです。簡単ですね。

しかし、今回のように動的なページや、写真がいっぱいあるページだとどうやらエラーになってしまうようです。

そこで、自分が気になった色のみをピンポイントで調べる方法を紹介しましょう。

 

応用編

URLではなく画像をアップしてカラーコードを調べる方法です。

まず、画像を切り取る(キャプチャーする)ためのツールを用意しましょう。FirefoxやChromeのアドオンでも構いませんが、私はSkitchという無料のMacアプリを使っています。

Skitchはスクリーンショットやコメントを簡単に加えることができる便利ツールです。この記事にある全ての画像はSkitchで切り取り&編集していますので、まだお持ちでない方にはダウンロードをお勧めします。

さて、先ほどのCopenhagen Art Festivalのページから気になる色をキャプチャーします。緑がかった青色を例にしましょう。

Color find03

次にWhats Its Colorのサイトで先ほど切り取った画像をアップします。

Clolor find04

「Upload & Process」のボタンを押すと画像のカラーコードが16進数形式で紹介されます。

Color find05

これなら他の色が混ざる心配はありません。

カラーコードが本当に正しいか調べる場合はColor Tableというサイトを利用しましょう。こちらも先ほどの6桁のカラーコードをコピペするだけです。

Color find06

コピペしてクリックすると背景色が変わりますので、簡単に色をチェックできます。

簡単ですね。これなら気になったサイトの配色も全て調べることができそうです。

 

以上、ウェブサイトの気になるポイントのカラーコードを調べる方法でした。

@3_wa

SPONSORED LINK
color_find