【ブログデザインのお役立ち】とっても簡単！WEBサイトの色（カラーコード）を調べる方法 2選！

すごく好みなコーポレートサイトがあって、その配色をブログに取り入れたいなと思うんだけど、サイトのカラーコードってどうやって調べたらいいのかな？

やってみたことがあるけれど、自力で色を近づけるって難しいよね。

そうなの。なんか違う、、、ってなる。

今回は、WEBサイトの色を知りたい！という人のために、カラーコードをとっても簡単に調べられるツールを2つ紹介するね。

わー、2つも！

うん。ブラウザ「Google Chrome」を使っている人向けと、そうじゃないよという人向けの2種類だよ。

嬉しいな。簡単ていうのも魅力的 ♪

1. この記事はこんな人にオススメ
2. この記事を読めば、できること
3. まず最初に、カラーコードとは？
4. Chrome拡張機能 「ColorPick Eyedropper」で色を調べる
   1. ColorPick Eyedropper 導入方法
   2. ColorPick Eyedropper の使い方
5. ツール「iromiru」を使って調べる
   1. iromiru の使い方
6. おわりに

この記事はこんな人にオススメ

• WEBサイトの色（カラーコード）を調べたい人
• ブログの配色を変えたい人

この記事を読めば、できること

WEBサイトのカラーコードがとても簡単にわかるようになる

まず最初に、カラーコードとは？

ブログデザインを始めると、よく見かけるようになる

#ffffff　#fff035など　シャープ（#）に続く6桁の英数字からなる符号のこと

Webページ上で色を指定するときに使うコードだよ。

Chrome拡張機能 「ColorPick Eyedropper」で色を調べる

色の調べ方1つ目は、ブラウザ「Google Chrome」ユーザー向け。紹介するのは、カーソルを合わせるだけでカラーコードがわかる

ColorPick Eyedropper

この導入が面倒くさい…と諦めてしまうことがあるのかもしれませんが、「ColorPick Eyedropper」は、たった3ステップで完了。設定なども特に必要ないのでとっても簡単です。

• Step1ブラウザ「Google Chrome」で ColorPick Eyedropper にアクセスし、「Chromeに追加」をクリック

• Step2「ColorPick Eyedropperを追加しますか？」というウィンドウが現れるので、「拡張機能を追加」をクリック

• Step3ヘッダーメニューに「ColorPick Eyedropper」のアイコンが登場したら導入完了

• Step1カラーコードを知りたい！と思ったサイトにアクセス。サイトを開いたまま「ColorPick Eyedropper」アイコンをクリックするとカラーピックモードになり、カーソルが十字に変わる 画像引用元：えるマネージメント より

• Step2知りたい色のところに十字カーソルを合わせると、黄色のカラーコードが #ffcc00 だとわかる キップム

  びっくりするほど簡単だよ！

• Step33. 合わせたカーソルをクリックするとカラーコードをコピーできる4. ×印をクリックするとカラーピックモードが終了する

1度導入してしまえば、気になった時に、いつでもすぐにカラーコードを調べられるのでオススメです！

ツール「iromiru」を使って調べる

2つ目は、「Google Chrome」ユーザーじゃないよという人向けに。紹介するのは、手元の画像や画像URLから、カラーコードを集められるツール、

iromiru

余談ですが、ローマ字には、よく読まずになんだかオシャレ！と思わせてしまう力があるなと、サイト名を「iromiru? 」「イロミル」「 ！なるほど色見るね〜」と頭の中で3度変換して感じました。

日本語をローマ字にするアイデア、いつかどこかで使ってみたいと思った次第。

話を元に戻して。ここからは iromiru の使い方をご紹介。何度か試してみたのですが、画像URLだと読み込みに失敗するので、画像の使用がオススメです。

• Step1色を知りたい！と思ったサイトのスクリーンショットを撮る 画像引用元：RICANZA より

• Step2 撮ったスクリーンショットを iromiru にドラッグ&ドロップする

• Step3画像が表示され、下に画像内に使われている色すべてが抽出される

• Step4知りたい色の一部をクリック（画像or下に抽出されたカラー、どちらをクリックしてもOK）すると、右側にカラーコードが表示される

どちらの方法も簡単にカラーコードを調べることができるので、「このサイトの配色気になる！」「この背景色ブログに取り入れたい！」etcと思った時に、使ってもらえたらなと思います。

おわりに

「フォトショップを持っていない人はどうやってカラーコードを調べるのかな？」と思ったことが、この記事のスタートになりました。

今までは、自分の体験だけを記事にしていたのですが、ブログを書きながら自分の中から湧いてきた疑問を解くという視点で記事を書けたことは、新しい発見だったなと。

もしかしたら、1歩外の世界へ飛び出ることができたのかもしれません。

疑問を解消するためにいろいろ調べ、新しいことを知るのは楽しかったので、また謎が出てきたらブログに書き落としてみたいな、と思います。

文章： yoko（ @_yoko51_）