ペイントでRGBやカラーコードを調べる|その他の便利ツールも紹介

この記事の内容

おしゃれなサイトの配色を自分のサイトで簡単に実現できる

【難易度】

RGB情報を簡単に調べたい
おしゃれなサイトの配色をマネしたい

おしゃれなサイトを見つけたとき、配色などを調べてマネしたくなりませんか?

調べる方法は2つあります。

  1. Windowsペイント
  2. Chrome拡張機能

いざという時に必ず役立つ知識なので、少しのぞいていきませんか?

この記事を書いた人

ヤットキプロフ

業界歴9年のWeb解析士GAIQ保有。

ガラケー時代からSNSに携わってます。

Twitterはこちら→ @yattoki_mashita

この記事を書いた人

ヤットキプロフ

業界歴9年のWeb解析士

GAIQ保有

ずっとSNSに携わってます。

Twitterはこちら: @yattoki_mashita

目 次

ペイントでRGBやカラーコードを調べる|簡単な方法を紹介

ブログ記事を作ったり、サイトのデザインに手を加えるとき、画像のRGB情報を調べることがあります。

その際、簡単・便利でよく使う方法は次の2つです。

  1. Windowsペイント
  2. ColorZilla(Chrome拡張機能)←もっとも簡単

ご自分に合った方法をお試しください。

その1:WindowsペイントでRGBを調べる

スクリーンショット→ペイントに貼り付け→スポイトツール→色の編集と4つのプロセスを経るので、少し手間かもしれません。

ただ、ツール等をインストールしなくてもよいのがメリットです。

では、方法を説明します。

STEP
スクリーンショット

お気に入りサイトの該当部分のスクリーンショットを取りましょう。

[Winduswキー]+[Shift]+[S]で簡単に撮影できますよ。

ペイントでRGBやカラーコードを調べる
STEP
画像をペイントで起動してスポイトツールを使用

今回は例として、サイトロゴの丸いオレンジのRGBを調べてみます。

STEP1で撮影したスクリーンショットをペイントで開き、スポイトツールを選択してください。

ペイントでRGBやカラーコードを調べる
STEP
『色の編集』を選択

スポイトツールでオレンジの部分を1回クリックしてください。その後、『色の編集』をクリックしましょう。

ペイントでRGBやカラーコードを調べる
STEP
RGB情報を確認

STEP3で『色の編集』ボタンを押すと下のような小窓が表示されます。ここにRGB情報が表示されます。

下の画像では、RGB=(255,168,36)ですね。これでRGB情報の取得は完了です。

ペイントでRGBやカラーコードを調べる
STEP
HEXに変換

STEP4でRGB情報は取得できましたが、実際はHEXで使うことが多いですね。

HEXとは『#●●●●●●』のような形式の表示方法です。

ということで、RGBからHEXに変換する方法もお伝えします。

上の例では、Googleの検索窓にrgb(255,168,36)と検索してください(”rgb”は小文字アルファベットで)。

するとこんな検索結果を返してくれます。これがHEX形式のカラーコードです。

今回のHEXのカラーコードは#ffa824だそうです。

ペイントでRGBやカラーコードを調べる

以上でペイントでのRGB情報の取得は完了です。お疲れさまでした!

その2:【ColorZilla】でRGBを調べる

RGBを調べる方法として最も手軽な方法が、ColorZilla(カラージーラ)です。

これはChromeブラウザの拡張機能で、本当に簡単です。

まず、最初にツールをインストールしなければいけませんが、最初の一回だけです。

それが終われば快適にRGBを調べられます。

インストール方法

まず、chromeウェブブストアに移動しましょう。

画面左上にツールの検索窓がありますので、ここに『ColorZilla』と入力してEnterキーを押してください。

ペイントでRGBやカラーコードを調べる

すると、次のような検索結果が表示されますので、『Chromeに追加』ボタンを押しましょう。

ペイントでRGBやカラーコードを調べる

その後、こんな感じのポップアップが表示されるので、『拡張機能を追加』ボタンを押せばOKです。

ペイントでRGBやカラーコードを調べる

これでインストールが完了です。

次に、いつでも利用できるようにブラウザ上にブックマークします。

下の画像のように、赤丸内にあるパズルのピースのようなアイコンをクリックして下さい。

ペイントでRGBやカラーコードを調べる

そして、『ColorPick Eyedropper』の横にある押しピンマークをクリックしてください。

ペイントでRGBやカラーコードを調べる

上記の手順が完了すると、『ColorZilla』のアイコンがブックマークバーに表示されるようになります。あとは、必要な時にこのアイコンをクリックしましょう。

ペイントでRGBやカラーコードを調べる

これで必要な準備が終わりました。お疲れさまでした!

ではいよいよ、『ColorZilla』を使ったカラーコードの抽出方法を説明します。

【ColorZilla】の使い方

ColorZillaはカラーコードを抽出する専用ツールなので、操作は1クリック。超簡単です!

現時点では、このツールが一番使いやすいです。

STEP
ツールバーのColorZillaのアイコンをクリック

ツールバーのColorZillaのアイコンをクリックしてください。

ペイントでRGBやカラーコードを調べる
STEP
十字キーを調べたい箇所に合わせる

十マークが表示されます。それをカラーコードを調べたい箇所に重ねます。すると、こんなツールバーが表示されます。

RGB情報はこの段階でメモしておいてください。

ペイントでRGBやカラーコードを調べる
STEP
調べたい箇所でクリックする

カラーコードを調べたい箇所に十マークを重ねたら、1回クリックしてください。すると、下のようなツールバーが表示されます。

ペイントでRGBやカラーコードを調べる

この状態になったら自動的にHEXのカラーコードがコピーされています。

あとはメモ帳などに貼り付ければ完了です!

ペイントで素敵サイトのRGBやカラーコードを調べる:まとめ

以上、ペイントのRGB情報を調べるための方法でした。

ColorZillaはペイントでのRGB調査方法ではありませんが、こちらを使えばより孤立的に確認できるはずです。

ブログを運営していると、こうしたカラーコードを確認したいときが出てきます。

そんな時のために、作業の効率アップとして本記事がお役に立てれば幸いです。

なお、画像編集には、Canvaが手軽に使えてかなり便利です。多くのブロガー愛用の画像編集ツールです。

それではまた、次の記事でお会いしましょう!

【色に関するペイントの記事】

色の塗りつぶし方法

画像の白黒反転や色反転

画像の背景を透明にする方法

グラデーションで塗りつぶす方法

ペイントによる色の置き換え方法

スポイト機能(色1・色2の使い方)

【関連記事】

ペイントの記事一覧

時短につながるパソコンの裏技機能

10分でマスター。ペイントの使い方(まとめ)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメントはお気軽にどうぞ!

コメントする

CAPTCHA


目 次
閉じる