知らなきゃ損!ペイントでRGBやカラーコードを調べる方法|Colorzillaの使い方も紹介

ペイントRGB情報調べるアイキャッチ
こんな人に向けて書きました

おしゃれなサイトの配色自分のブログに取り入れたい!

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

このサイトの配色、センスいいな~!マネしてみたい!

本記事ではそんなときに便利な方法を2つ紹介します。

  1. ペイントでRGBやカラーコードを調べる方法
  2. ColorZilla(Chrome拡張機能)の使い方

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

ちなみに…

今まで利用してきた画像編集ツールのなかで、一番使いやすかったのはCanva Proです。

有料プランになりますが、背景画像の透明化やサイズ変更などができるので、費用対効果を考えると十分アリです。

詳細は↓の記事からどうぞ。

この記事を書いた人

ヤットキプロフ

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

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

この記事を書いた人

ヤットキプロフ

業界歴10年のWeb解析士

GAIQ保有

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

目 次

ペイントでRGBやカラーコードを調べる方法|Colorzillaの使い方も紹介

ブログ記事を作ったり、サイトのデザインに手を加えるとき、画像の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やカラーコードを調べる方法とColorZillaの使い方

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

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

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

とはいえ、手間がかかるなと感じる方には、Cnava Proがおすすめです。

税込月1,000円(年額払いの場合)ですが、60万枚以上のテンプレや7500万点のイラスト・写真素材が使い放題なので、想像以上に満足度の高いサービスです。

詳細は↓の記事からどうぞ!

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

【画像加工に関するペイントの記事】

画像の余白を消す方法

画像を貼り付ける方法

画像を円形に切り抜く方法

画像をトリミングする方法

画像のサイズを変更する方法

モザイク加工で画像をぼかす方法

角度を微調整して画像を回転させる方法

サイズ違いの画像をキレイに並べる方法

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

色の塗りつぶし方法

画像の白黒反転や色反転

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

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

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

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

ペイントでカラーコードを調べる方法

【関連記事】

ペイントの記事一覧

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

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

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

コメントする

CAPTCHA


目 次