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

前置きは必要ないでしょうから、サクッと本題に入りますね。

Windows10 と Google Chrome を使う方法です。Mac（Macintosh）は持っていない＆使ったことがないのでわかりませぬ。

必要なもの

• パソコン（Windows10）
• ソフト「ペイント」（Win10標準搭載）
• Google Chrome
• 画像データ

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

関連

右クリック禁止の画像をダウンロード保存する方法４つ【悪用厳禁】

関連

ウェブ上のWebP画像をJPG・PNG形式に変換してダウンロードする方法

Win10「ペイント」で画像から色を抽出する方法

大まかな流れ

1. 「ペイント」を立ち上げる
2. 画像を開く
3. 気になる箇所の色を抽出する
4. RGB値を確認する
5. RGB値を Google で検索する

ことり

ここからは画像つきで詳しく説明しますね。

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

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

1. STEP

   「ペイント」を起動する

   

   1. Windowsマークをクリック
   2. 下方へスクロール
   3. 「Windows アクセサリ」をクリック
   4. 「ペイント」をクリック
2. STEP

   「ペイント」が立ち上がる

   

3. STEP

   画像をドラッグ＆ドロップする

   

   このニワトリさんのトサカ部分の色を取り出してみます。

4. STEP

   スポイトのマークをクリックする

   

5. STEP

   トサカ部分にスポイトマーク（カーソル）を移動してクリックする

   

   

   ことり

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

6. STEP

   抽出された色が「色１」に表示されます。

   

取り出した色のRGB値を調べる方法

1. STEP

   右上の「色の編集」をクリックする

   

2. STEP

   カラーパレットが表示される

   

ことり

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

• 赤･･･red
• 緑･･･green
• 青･･･blue

「rgb」はそれぞれの色の頭文字を取ったもの。

「rgb値」は半角英数字を使って「rgb(246, 4, 3)」「rgb(246,4,3)」と表記します。

RGB値から６桁のカラーコードを調べる方法

1. STEP

   先ほどの文字列を Google Chrome の検索窓に入れて検索する

   

   「rgb」を大文字（RGB）や全角（ｒｇｂ）にしてしまうと求める結果が得られないので注意。

2. STEP

   「HEX」欄に # と６桁の数字が表示される

   

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

カラーコードからRGB値を調べる方法

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

1. STEP

   「#f60403」を検索窓に入れる

   

2. STEP

   「RGB」欄に３つの数字が表示される

   

RGB値で検索しても、カラーコードで検索しても、同じ結果が表示されます。

なお、カラーコードに含まれるアルファベットは大文字になっていても大丈夫です。

「#F60403」でもOKってこと？

ねね

ことり

うん。ただし半角を使ってね。

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

• 文字を書いたり

• 背景画像を作ったり

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

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

ねね

関連記事

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

関連

右クリック禁止の画像をダウンロード保存する方法４つ【悪用厳禁】

関連

ウェブ上のWebP画像をJPG・PNG形式に変換してダウンロードする方法