すごく好みなコーポレートサイトがあって、その配色をブログに取り入れたいなと思うんだけど、サイトのカラーコードってどうやって調べたらいいのかな？
やってみたことがあるけれど、自力で色を近づけるって難しいよね。
そうなの。なんか違う、、、ってなる。
今回は、WEBサイトの色が知りたい！という人のために、とっても簡単にカラーコードが調べられるツールを2つ紹介するね。
わー、2つも！
うん。ブラウザ「Google Chrome」を使っている人向けと、そうじゃないよという人向けの2種類だよ。
嬉しいな。簡単ていうのも魅力的 ♪
この記事はこんな人にオススメ
この記事を読めば、できること
WEBサイトのカラーコードがとても簡単にわかる！
まず最初に、カラーコードとは？
ブログデザインを始めると、よく見かけるようになる
#ffffff #fff035など シャープ（#）に続く6桁の英数字からなる符号のこと
Webページ上で色を指定するときに使うコードだよ。
Chrome拡張機能 「ColorPick Eyedropper」で色を調べる
色の調べ方1つ目は、ブラウザ「Google Chrome」ユーザー向け。紹介するのは、カーソルを合わせるだけでカラーコードがわかる
ColorPick Eyedropper 導入方法
この導入が面倒くさいと諦めてしまうことがあるのかもしれないけれど、「ColorPick Eyedropper」は、たった3ステップで完了。設定も必要ないのでとっても簡単！
1. ブラウザ「Google Chrome」で ColorPick Eyedropper にアクセスし、「Chromeに追加」をクリック
2. 「ColorPick Eyedropperを追加しますか？」というウィンドウが現れるので、「拡張機能を追加」をクリック
3. ヘッダーメニューに「ColorPick Eyedropper」のアイコンが登場したら導入完了
ColorPick Eyedropper の使い方
1. まず、カラーコードが知りたいサイトにアクセス。サイトを開いたまま「ColorPick Eyedropper」アイコンをクリックするとカラーピックモードになり、カーソルが十字に変わる
2. 知りたい色のところに十字カーソルを合わせるだけで、黄色のカラーコードが #ffcc00 だとわかる。びっくりするほど簡単！
3. 合わせたカーソルをクリックするとカラーコードをコピーできる
4. ×印をクリックするとカラーピックモードが終了する
1度導入してしまえば、気になった時に、いつでもすぐにカラーコードが調べられるのでオススメ！
ツール「iromiru」を使って調べる
2つ目は、「Google Chrome」ユーザーじゃないよという人向けに。紹介するのは、手元の画像や画像URLから、カラーコードを集められるツール、
余談だけれども、ローマ字には、よく読まずになんだかオシャレ！と思わせてしまう力があるなと、サイト名を「iromiru? 」「イロミル」「 ！なるほど色見るね〜」と頭の中で3度変換して感じた。
日本語をローマ字にするアイデア、いつかどこかで使ってみたいと思った次第。
iromiru の使い方
話を元に戻して。ここからは iromiru の使い方をご紹介。何度か試してみたのだけれど、画像URLだと読み込みに失敗するので、画像の使用がオススメ。
1. 色が知りたいサイトのスクリーンショットを撮る
2. 撮ったスクリーンショットを iromiru にドラッグ&ドロップする
3. 画像が表示され、下の方にも画像内に使われている色すべてが抽出される
4. 知りたい色の一部をクリック（画像or下に抽出されたカラー、どちらをクリックしてもOK）すると、右側にカラーコードが表示される
どちらの方法も簡単にカラーコードを調べることができるので、「このサイトの配色気になる！」「この背景色ブログに取り入れたい！」etcと思った時に、使ってもらえたらなと思う。
おわりに
「フォトショップを持っていない人はどうやってカラーコードを調べるのかな？」と思ったことが、この記事のスタートになった。
今までは、自分の体験だけを記事にしていたけれど、ブログを書きながら自分の中から湧いてきた疑問を解くという視点で記事を書けたことは、新しい発見だった。
もしかしたら、1歩外の世界へ飛び出ることができたのかもしれない。
疑問を解消するためにいろいろ調べ、新しいことを知るのは楽しかったので、また謎が出てきたらブログに書き落としてみたいな、と思う。
文章： yoko（ @_yoko51_）
Comment