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

ウェブサイトの色が気になり始めた@3_waです。

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

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

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

基本編

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

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

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

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

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

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

応用編

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

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

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

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

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

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

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

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

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

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

 

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

@3_wa