【便利】写真やイラスト画像に使われている色を簡単に調べる方法

画像の色を抽出する方法

ボーイ

画像に使用されている色(カラーコード)を知りたい!

デザインをしたり、サイトの配色なんかを考えていると、写真やイラストの色を調べたいときってありますよね。

  • アイキャッチ画像で配色に統一感を出したいとき
  • フリー素材の色と背景色を合わせたいとき

こんな時、僕は画像に使われている色をある方法で瞬時に調べます。

そのある方法と言うのが、「イメージカラーピッカー」というサイトで調べるというモノです。

そこで今回は、この「イメージカラーピッカー」を使用して、画像などに使用されている「色」のコードを取得する方法をご紹介します!

イメージカラーピッカーとは?

イメージカラーピッカーとは、画像の好きな部分を指定して、その場所のカラーコードを抽出できる、Webサービスです。

現在はPCとスマホ両方に対応していて、簡単に画像に使われている色を知ることが出来ます。

また、簡単にクリップボードへコピーもできて、とても便利です。

イメージカラーピッカーを使用してカラーコードを抽出する方法

画像のカラーコードを抽出する方法は、簡単3ステップです!

  • STEP.1
    画像を選択

    下図の「ファイルを選択」をクリックして、色を抽出したい画像を選びましょう!

    イメージカラーピッカー

  • STEP.2
    使いたい色をコピー

    下図のように、画像に使われている色が一覧で表示されています。

    色をクリックすれば簡単にクリップボードにコピーされます。

    イメージカラーピッカー

  • STEP.3
    クリックorタッチでメモ

    また画像の任意の箇所のカラーコードを抽出したい場合は、画像にマウスを持っていくと(スマホの場合は指)カラーコードが表示されるので、クリック。

    イメージカラーピッカー

    すると、「色をメモしました。」と出るので、下に行ってメモを確認。

    イメージカラーピッカー

    後は、この色をクリックして、クリップボードへコピーします。

こんな時に使う!イメージカラーピッカー使用例

jpg画像の背景と色を合わせたいとき

アイキャッチ画像作ったりしているときに、こんな状況陥ったことありませんか?

ボーイ

イラストの背景画像とデザインの背景の色が合わない!!
例1

挿入した画像と背景の色を合わせたいですね。

僕もこれですごい悩んでいて、デザインの幅が狭くなっていました。

そんな時に「イメージカラーピッカー」を使えば、背景色を合わせることが簡単に出来ちゃいます!

例1

キレイに合いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA