記事内にプロモーションを含みます。
「一般消費者が事業者の表示であることを判別することが困難である表示」にならないよう配慮し、法令遵守に基づいた運営を行っています。
ペイントRGB情報調べるアイキャッチ

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

  • URLをコピーしました!
こんな人に向けて書きました

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

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

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

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

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

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

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

有料プランなら透明化やリサイズなどが利用できるうえに、7500万点以上のイラストや素材、色んな便利機能が使い放題!

直感的に操作が分かるので、感動すら覚える画像編集ツールです(←実体験!)。

\ 透過画像もすぐできる /

42万点以上のテンプレも!

記事作成:ヤットキ
  • 大手通信企業の元SE
  • Web業界歴10年のWeb解析士
  • Googleアナリティクス個人認定資格(GAIQ)
目 次

ペイントで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情報を調べるための方法でした。

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

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

そして、ペイントよりも手軽に画像を編集したいなら、Canva Pro が断然おすすめです。

私はCanvaを2年以上利用していますが、かなり重宝しています。

背景画像をボタン一発で透明化できるのはもちろん、使い切れないほどのテンプレや7500万点のイラスト・素材が使い放題。

税込1,000円/月(年額払いの場合)ですが、費用対効果を考えると元は十分に取れています!

\ 透過画像もすぐできる /

42万点以上のテンプレで自分だけのオリジナル画像を!

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

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

質問はコメントへ!お気軽に!

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

画像の余白を消す方法

画像を貼り付ける方法

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

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

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

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

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

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

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

色の塗りつぶし方法

画像の白黒反転や色反転

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

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

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

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

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

【関連記事】

ペイントの記事一覧

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

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

  • URLをコピーしました!

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

コメントする

CAPTCHA


目 次