Webページからカラーコードを取得する方法【ツールいらず】



今見ているこのページの、この部分のカラーコードを知りたい!
という時があると思います。

Windowsユーザーであれば、どんな環境でも調査可能な方法を記載します。
 

カラーコード取得方法

Webページをキャプチャする

まずはカラーコードを取得したいページを開き、「Print Screen」ボタンで画像をキャプチャします。
プリントスクリーンボタンを押下
 

ペイントでRGB値を取得する

Windows標準搭載のペイント(すべてのプログラム→アクセサリ→ペイント)を開きます。
Painticon

Ctrl+V、もしくは「貼り付け」で、キャプチャした画像を貼りつけます。
Paint_pasteicon

「色の選択」を押します。
Paint_colorediticon

キャプチャした画像の欲しい色の部分をクリックします。
これで色の情報が取得されます。
目的の色にスポイトを当てている様子

「色の編集」を押すと、下記の部分に取得した色のRGB値が表示されています。
このRGB値を16進数に直せば、それがカラーコードとなります。
RGB値の記載箇所を図示
 

RGB値→カラーコードを計算する

Windows標準搭載の電卓(すべてのプログラム→アクセサリ→電卓)を開きます。
calcicon

表示→プログラマ で、プログラマ用電卓に変更します。

「10進」のチェックを入れた状態で、まずはRGB値のRの値を入力します。
電卓に10進で115を入力

その後「16進」にチェックを変えれば、自動的に16進の値が出てきます。
16進の73が表示された様子

この数字をRGBの順で並べれば、それがカラーコードとなります。

この例に出している灰色がかった緑は、
R値:115(10進)→73(16進)
G値:142(10進)→8E(16進)
B値:150(10進)→96(16進)

となり、カラーコードは「738E96」となります。
カラーコードの先頭に#をつけ、「#738E96」と表現することも多いです。

以上です。
快適なカスタマイズライフをお送りください。

シェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. icooonmono様からお借りしたチーターアイコン
  2. googleanalytics設定画面
  3. BlueMail設定 アカウントが追加された様子
  4. アフィリエイトサイトの構成図
  5. fotorで年賀状、テキスト入力

コメントをお待ちしております

Rippoutai管理人


モノづくり起業を応援するRippoutai管理人、電気女子の顔写真です


電気女子(はまこ)

ワーキングマザーをしながら、サイドビジネスで小型電子モジュールの製造・販売をしています。
クラウドファンディングで1000%支援達成の実績あり。

モノづくり副業応援!
山梨起業応援!

アーカイブ