Wordpressでサイトをつくる!はじめてみる

カラーコードを一瞬にして調べる「ColorPIck Eyedropper」Chrome拡張機能が便利!

【PR】この記事には広告を含む場合がございます。
カラーのcodeを調べる

カラーコードを一瞬して調べるツール「ColorPIck Eyedropper」についてご紹介します。

WEBサイトを閲覧していて、時々思う事があります。

このカラーって何色なのかな??どんなカラーコードを使っているのかな??って思う事があります。

自分でカラーコードのサイトをみて、一つ一つ調べていく方法もありますが、とてもじゃないけど大変。
そんな時に、役立つのが「カラーコード」を調べるツールです!!
とても便利なので気になる方はChromeに導入してみましょう。

何が便利かって、このツールは「調べたいカラーにマウスを当てるだけで、一瞬でカラーコード」を調べる事ができるんです!!

Chromeの拡張機能としては以前からあったツールなのですが、とても便利なのでここで紹介させていただきます。
使うためには、グーグルクロームに拡張機能を追加していく必要があります。

この記事の内容

ColorPIck Eyedropperはカラーコードを調べたい時にとても便利

手軽にカラーコードを調べる事ができるChromeの拡張機能のツール「ColorPIck Eyedropper」はとても便利です。

どんな人に便利かというと??



・WEBサイトを作成していてデザインの参考にする時

・広告のカスタマイズをしている人

・ウェブデザイナーの人

・ヘッダーやアイキャッチでカラーを参考にしてデザインする人

・WEBサイトで使用しているカラーコードを気になる時に手軽に調べたい人

が対象になるかなって思います

まずは、グーグルクロームに「colorpick Eyedropper」ツールを、追加しましょう!!

ColorPIck Eyedropper

Chromeに追加すると、colorfulなアイコンが表示されます「コレ」です!!

使い方はとても簡単なのです。

Chromeのブラウザを立ち上げると、上のマークがでてきますので、クリックします。
このアイコンをクリックして、ブラウザ上で調べたいカラーやロゴにマウスを当てるだけでカラーを調べる事ができます。
試しに、グーグルのアイコンマークで知られる「G」のマークでカラーコードを調べてみる事にします。

①グーグルのアイコンマークで、調べてみます。
・「赤の部分は何色のコードかな??」って思ってマウスをあててみます。
すると「♯EA4335」とでてきました。
この赤と同じ色を使いたい。と思った時は、これでコードを調べてると、同じ色を使う事ができる。という事がわかります。
ちょっとした同じような赤でも、コードが違っていたりするので、大変便利だと思います。

②グーグルのアイコンマークで調べます。
・「緑色の部分は何色のコードかな??」って思ってマウスをあててみます。
すると、「♯34A853」とでてきました。
この緑色のカラーを使いたいと思った時は、このコードを使う事で使えるんだ。と理解してください。

使い方は色々あるよね!!

このツールをChromeに導入するだけで、こんなカラーコードを一瞬に調べる事ができます。
はい、とても便利ですね。
一つ一つカラーコードを調べる方もいると思いますが、とにかく簡易的に的確なカラーを調べるならこの方法が一番効率的!!

カラーコードは一つづつ調べてもいいと思います。全く同じカラーにしないにせよ、似たような雰囲気のカラーを探した時にもこちらの、HTMLカラーチャートは参考になります。

もう一度「ColorPIck Eyedropper」は、どんな人に便利かというと、、、、

だと思います。(繰り返しになりますが。)

Chromeを使っていない人はChromeを使う必要があります。

まとめ

デザイン系の仕事をされている方は、知っているツールかなって思いますが、デザイン系の仕事だけではなく、色んな活用方法があるかと思います。
WEBサイト所有者やカラーを参考にしたい人。にとってはとても便利なツールになるかなって思います。オシャレなカラーというのはたくさんありますが、実際にはどのカラーを使っているかというのは、微妙に違ったりしていますので、自力で同様のカラーを探すのは大変なのです。

参考にしてみてくださいね。

カラーのcodeを調べる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
この記事の内容