お家にいる方が楽しくなる一ヶ月間> 詳しくはこちら <

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

ペイントRGB情報調べるアイキャッチ
こんな人におすすめ
  • RGB情報を簡単に調べたい
  • おしゃれなサイトの配色をマネしたい

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

この記事は、そんなあなたにピッタリな内容です。

専用ツールを使ったりして難しいんじゃないの?

いえいえ、調べる方法はとても簡単。

Windowsユーザーにおなじみのペイント、Chrome拡張機能、Googleで検索する方法を説明します。

どれも1分あれば十分です!

この記事の内容
  • おしゃれなサイトの配色を自分のサイトで簡単に実現できる
【難易度】
1.0

物はためしです。

知っていれば損はしないので、少しのぞいていきませんか?


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

ガラケー時代からSNSの仕事をしてました。

Twitterはこちら→ @yattoki_mashita

目次

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

私は複数のサイトを運営しており、記事を作るときに画像を編集することがよくあります。RGB情報を調べることもしょっちゅうです。

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

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

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

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

この方法は他と比べて少し手間がかかります。

スクリーンショット→ペイントに貼り付け→スポイトツール→色の編集と4段階が必要なので少し面倒くさいです。

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

STEP
スクリーンショット

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

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

スクリーンショット撮影の詳細を知りたい方は、こちらの記事をどうぞ!

≫【スクリーンショット作成ツール】とても便利なSnipping Tool

STEP
画像をペイントで起動してスポイトツールを使用

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

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

なお、ペイントの起動方法はこちらの記事をどうぞ。

≫【Windows10】ペイントの場所は?迷わず1秒で起動する設定

STEP
『色の編集』を選択

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

STEP
RGB情報を確認

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

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

STEP
HEXに変換

STEP4でRGB情報は取得できましたが、実際はHEXで使うことが多いですね。HEXとは『#●●●●●●』のような形式の表示方法です。

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

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

するとこんな検索結果を返してくれます。これがHEX形式のカラーコードです。今回のHEXのカラーコードは#ffa824だそうです。

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

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

そして、イチオシがColorZilla(カラージーラ)です。

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

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

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

以下ではブラウザへのインストール方法から説明していますが、不要な方は読み飛ばして使用方法からご覧ください。

インストール方法

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

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

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

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

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

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

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

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

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

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

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

【ColorZilla】の使い方

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

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

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

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

STEP
十字キーを調べたい箇所に合わせる

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

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

STEP
調べたい箇所でクリックする

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

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

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

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

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

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

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

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

また、カラーコード意外にもフォントの種類を調べたい場合もあると思います。そんなときにはこちらの記事をどうぞ!

≫フォントの種類や文字サイズの調べ方

なお、↓の記事では使用頻度の高いペイントの使い方を解説しています。

ペイントの使い方でお困りの方は必見です!

≫ Windows10ペイントの使い方|10分でマスターする使いこなし術

また、本ブログではPC利用法などの記事もご用意していますので、ご参考にどうぞ。

≫【パソコン初心者でも大丈夫!】知って得する裏技的なPC利用法

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

ペイントRGB情報調べるアイキャッチ

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

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

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

コメントする

CAPTCHA


目次
閉じる