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