【楽天】ポイント最大7倍還元中!

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

2 min
こんな野望&疑問を抱いているあなたへ
  • あの画像に使われている色をブログに取り入れたい
  • でもどうやって設定すればよいのかわからない
  • あーるじーびー? 何それ美味しいの?

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

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

スポンサーリンク

必要なもの

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

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

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

大まかな流れ

  1. 「ペイント」を立ち上げる
  2. 画像を開く
  3. 気になる箇所の色を抽出する
  4. RGB値を確認する
  5. RGB値を Google で検索する
https://setouchi-kotori.com/wp-content/uploads/k-.png

ことり

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

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

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

  1. STEP

    「ペイント」を起動する

    「ペイント」の立ち上げ方(Windows10)
    1. Windowsマークをクリック
    2. 下方へスクロール
    3. 「Windows アクセサリ」をクリック
    4. 「ペイント」をクリック
  2. STEP

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

  3. STEP

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

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

  4. STEP

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

  5. STEP

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

    https://setouchi-kotori.com/wp-content/uploads/k-.png

    ことり

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

  6. STEP

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

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

  1. STEP

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

  2. STEP

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

https://setouchi-kotori.com/wp-content/uploads/k-.png

ことり

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

  • 赤・・・red
  • 緑・・・green
  • 青・・・blue

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

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

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

  1. STEP

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

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

  2. STEP

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

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

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

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

  1. STEP

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

  2. STEP

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

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

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

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

https://setouchi-kotori.com/wp-content/uploads/k-nene.png

ねね

https://setouchi-kotori.com/wp-content/uploads/k-.png

ことり

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

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

  • 文字を書いたり
  • 背景画像を作ったり

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

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

https://setouchi-kotori.com/wp-content/uploads/k-nene.png

ねね

関連記事

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

コメントを残す

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

スパム対策:日本語が含まれないコメントは無視されます。ご注意ください。