WEB制作 便利ツールを使う

「このサイトのカラーコードが知りたい!」そんな時に使えるカラー抽出ツール

2022年2月20日

「このサイトのカラーコードが知りたい!」そんな時に使えるカラー抽出ツール

このサイトのカラーの色合いが好きなんだけど、カラーコードはなんだろ?

こんな風に思ったことはありませんか?

素敵な広告の配色を見たとき、好きな配色のブログやサイトを見たとき、この色とこの色の組み合わせが素敵だなと感じたとき、私は常々思っています。

そんな時に便利なのが、カラーコードを抽出してくれるツール!

  • このカラーが知りたい
  • 自分のサイトのカラーコードを抽出したい(カスタマイズ中に便利)

という人におすすめです。

※パソコン操作が前提になります

方法は目次からGO!

アプリをインストールする

ColorPick Eyedropper

Google Chromeウェブストアで無料でダウンロードができるColorPick Eyedropper」です!

普段「Google Chrome」を使用している人は、クリック一つで呼び出して使えるので、入れておきたいアプリケーション。

「Chromeに追加」で簡単に追加できます

右上の設定あたりに自動で追加されるので、あとは使いたい時に使用したい時に「アプリをクリック」

十字の矢印が出るので、見たいカラーのところでクリックすると「カラーコードが抽出」できます。

文字の色まで、細くて無理そうだなって所も、虫眼鏡のように拡大して抽出することができます!

私も普段はこれを使用しています!便利でおすすめ!

ColorPick Eyedropperを開く

アプリを入れずに抽出する

アプリを入れずに抽出する方法です。

ただし「右クリック禁止」にしているサイトやブログの場合は、本文の所では右クリックできません。そのため、本文の無いサイドバーや、ヘッダーあたりで右クリックしてみてください。

気になるサイトやブログを右クリックします。

【Google Chromeだと】>「検証」

【microsoft edgeの場合】>「開発者ツールで調査する」

で開きます。

使用する部分はここ。

どの部分でも大丈夫なんですが、このようなカラーコードのある場所を探してください。

今回参考に選んだのが黒色だったのですが、水色や赤、色々な色があると思います!

色の正方形の部分をクリックします。

スポイト部分が青色になってる場合は、そのまま気になる色の所まで「カーソルを持っていく」と色の抽出ができます。

スポイトが黒色になってる場合は、スポイトをクリックして抽出できます。

今回開いた「開発者ツール」は、マージンの高さや色などの変更を見ていくのに便利なツールで、指定した色などが直接サイトに反映されます。

私が今回使用した「色の抽出に使ったタグ」が文字色だったため、プロフィールカードの色が変更されました。

他人のサイトやブログが、書き換わった時はびっくりするかと思いますが、勝手に書き換わって保存されることはないので安心してください。

まとめ

色の抽出方法でした!

パワーポイントのスポイトでも、サイトの色の抽出ができるそうです!

アイキャッチや、見やすいサイトを作成している人は、参考になるサイトがたくさんあると思うので、ぜひ試してみてください!

カラー配色に悩んでいるときは、カラー別配色デザインbookを1冊持っておくとおすすめです!

  • この記事を書いた人
  • 最新記事

まめこ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-WEB制作, 便利ツールを使う
-,