画像から色を取り出してカラーコードやRGB値を調べる方法【for Windows】

この記事は、こんな野望&疑問を抱いているあなたのために書きました。

  • 憧れのブログに使われてる色をマネしたい
  • でもどうやって設定すればよいのかわからない
  • あーるじーびー? 何それ美味しいの?
ことり
前置きは必要ないでしょうから、サクッと本題に入りますね。

作業環境について

WindowsPCでできる方法です。

ことり
Mac(Macintosh)は持っていない&使ったことがないのでわかりません。

スポンサーリンク

事前に準備しておくもの

画像データを用意しておきます。

ウェブ上の画像を利用する場合はこちらの記事を参考にしてください。

右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】 ウェブ上のWEBP画像をJPG・PNG形式に変換してダウンロードする方法ウェブ上のWebP画像をJPG・PNG形式に変換してダウンロードする方法

「ペイント」を使って画像から色を抽出する具体的な手順

「ペイント」はWindowsに標準で装備されている画像編集ソフトです。

1

「ペイント」を起動する。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

  1. 「すべてのプログラム」をクリック
  2. 「アクセサリ」フォルダを開く
  3. 「ペイント」をクリック

画像から色を抽出してカラーコードやRGB値を調べる方法

 

2

画像をドラッグ&ドロップ。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

 

この子のトサカ部分の色を抽出してみますね。

 

3

スポイトのマークをクリック。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

4

トサカ部分にスポイトマーク(カーソル)を移動してクリック。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

ねね
パレットの絵の具をスポイトで吸い取るイメージね。

5

抽出完了!

抽出された色は「色1」に表示されます。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

スポンサーリンク

「RGB値」を知る必要があるときは?

1

右上の『色の編集』をクリックすると・・・

 

画像から色を抽出してカラーコードやRGB値を調べる方法

2

こんな画面が表示されます。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

3

この色のRGB値は「赤246:緑4:青3」の割合で表現されていることが判りました。

 

 

カラーコードを知りたいときは?

先ほどの数値「246(赤):4(緑):3(青)」にカッコ「 ( ) 」とカンマ「 , 」をつけ、rgb(246,4,3) と表記します。

ことり
全て半角ですよ。

それぞれの頭文字を取ったものです。

  • r・・・red(赤)
  • g・・・green(緑)
  • b・・・blue(青)

この文字列を Google Chrome の検索窓に入れて検索すれば、色とコードを教えてくれるのです。便利。

画像から色を抽出してカラーコードやRGB値を調べる方法

「 rgb 」を大文字「 RGB 」や全角「rgb」にしてしまうと求める検索結果が得られません。

ねね
その点だけ注意してね。

この色のカラーコードは f60403 でした。先頭に # を付けて、#f60403 と表記します。

画像から色を抽出してカラーコードやRGB値を調べる方法

反対にカラーコードから「RGB値」を調べることもできる?

先ほどと反対に、カラーコードは判ってるんだけどRGB値がわからない・・・という場合、逆引きも可能です。

#f60403 で検索すると、同じ色が出てきましたね。

このカラーコード「f60403」の先頭にある「f〔エフ〕」は、大文字になっていても大丈夫です。

ねね
「F60403」でもOKってこと?
ことり
うん。ただし半角を使ってね。

抽出した色を使ってできること

1

文字を書いたり。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

2

背景画像を作ったり。

 

画像から色を抽出してカラーコードやRGB値を調べる方法

 

他にもイロイロなことができます。

ねね
ぜひチャンレンジしてみてね。

関連記事

ことり
ウェブ上の画像を利用する場合はこちらの記事を参考にしてくださいね。
右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】 ウェブ上のWEBP画像をJPG・PNG形式に変換してダウンロードする方法ウェブ上のWebP画像をJPG・PNG形式に変換してダウンロードする方法

コメントを残す

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

CAPTCHA