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

カラーコードの調べ方
キップム
キップム

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

yoko
yoko

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

キップム
キップム

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

yoko
yoko

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

キップム
キップム

わー、2つも!

yoko
yoko

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

キップム
キップム

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

スポンサーリンク

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

  • WEBサイトの色(カラーコード)が知りたい人
  • ブログの配色を変えたい人

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

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

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

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

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

キップム
キップム

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

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


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

ColorPick Eyedropper 導入方法

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

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

ColorPickEyedropper_01

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

ColorPickEyedropper_02

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

ColorPickEyedropper_03

ColorPick Eyedropper の使い方

1. まず、カラーコードが知りたいサイトにアクセス。サイトを開いたまま「ColorPick Eyedropper」アイコンをクリックするとカラーピックモードになり、カーソルが十字に変わる

ColorPickEyedropper_04
画像引用元:えるマネージメント より

2. 知りたい色のところに十字カーソルを合わせるだけで、黄色のカラーコードが #ffcc00 だとわかる。びっくりするほど簡単!

ColorPickEyedropper_05

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

ColorPickEyedropper_06

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

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

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

iromiru_01
画像引用元:iromiru より

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

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

iromiru の使い方

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

1. 色が知りたいサイトのスクリーンショットを撮る

iromiru_02
画像引用元:RICANZA より

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

iromiru_03

3. 画像が表示され、下の方にも画像内に使われている色すべてが抽出される

iromiru_04

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

iromiru_05

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

おわりに

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

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

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

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

文章: yoko(@_yoko51_

Comment