【Chrome拡張機能】カラーコードを調べる方法【簡単】




悩み人

今ブログのデザインをどうしようか悩んでいます。特に色合いにこだわりたいのですが、あるサイトの色の雰囲気を真似したいです。色を調べる方法はありますか?

このような疑問に回答します。

本記事の内容

・Google Chrome 拡張機能【ColorPick Eyedropper】が使いやすいです

本記事の信頼性

hiroki6(@hiroki6__)

本記事を書いている僕は、今年の3月に会社を退職し、4月から会社経営をしています。複業の一環として、本せどりやWebライティング、ブログを運営しています。

今回は、カラーコードを調べる方法について共有します。

本記事を書いている僕は、複業としてWebライティングをしており、その一環でWebサイトのデザインにも少し手を加えたりしています。

その際に、色を調べることがあり、今回はその調べ方について共有します。

Google Chrome 拡張機能

Google Chromeの拡張機能を利用します。

そのため、色合いを調べるには、ブラウザはChromeである必要があります。

ステップ①:chrome ウェブストアで検索

まず、拡張機能をブラウザに加えるために、chrome ウェブストアにアクセスします。

ステップ①:chrome ウェブストアにアクセス

ステップ②:ColorPick EyedropperをChromeに追加

次に、「eye dropper」等と検索し、「ColorPick Eyedropper」をChromeに追加します。

※下記は、追加した後の画面

ステップ②:ColorPick EyedropperをChromeに追加

ステップ③:実際に使用してみる

Chromeに追加すると、以下のように、右側にColorPick Eyedropperのアイコンが表示されるようになります。まずは、これをクリックしましょう。

クリックすると、十字のカーソルが出てきます。それを調べたい色の上にかざし、クリックすると、以下のようにカラーコードが表示されます。

まとめ

ブログやサイトを運営している以上、サイトの色合いは気になると思います。

ちなみに、当サイトでよくアイキャッチとして使用しているサイト(unDraw)では、からコードで色を指定することができるので、よくこの拡張機能を利用しています。

今回は以上です。

シェアしてくれると喜びます。

ABOUT US

hiroki6
ブログ×本せどり / hiroki6運営(月4500PV)/ 本せどり(月33万)【経歴】大学 / イギリス留学 ▶ 大学院 / NPO法人チーム創設 ▶ 学生起業失敗 ▶ IT企業でWebマーケ担当(月45万 + せどり月15万)▶ 2年で退職 ▶ 会社経営(物販・Webマーケ)● 複業と独立を応援します ● 20代