【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運営(月間:4100PV)●本せどり(月商:31万)●新卒2年で脱サラ【経歴】大学/海外10数カ国渡航 ▶大学院/NPO法人チーム創設 ▶起業失敗 ▶IT企業で雑誌編集やメルマガ配信(45万/月.残業60H/月・副業本せどり15万/月)/ ▶退職 ▶会社経営(物販・Webマーケ)