広告 How To

画面内の色のカラーコードを表示【WEBページ以外や画像でもOK】

HTMLカラーコード

画面内に表示されている色から、カラーコードを調べる方法の紹介です。

面倒なWEBツール等の使用は一切なし!

マウスカーソルを合わせるだけで、簡単にカラーコードが表示されます。

 

こんな人のお役に立てる記事です。

小豆
小豆
画面に表示されている画像内のカラーコードが知りたい。
テキストや見出しの色の調べ方は分かるけど、画像の場合はどうやるんだ?

Windows利用者向けの記事です。

画面に表示されている色のカラーコードを表示【画像内からも】

カラーコードを表示したい

小豆
小豆
この青、好きだなぁ。
自分のブログでも同じ色を使いたい。

画面上に表示されている色のカラーコードを知りたい時ってありますよね。

たとえば使用しているブラウザがChromeだった場合、以下のようにカラーコードを表示させることができます。

カラーコードを表示

関連Chromeでのカラーコードの調べ方

小豆
小豆
ネットで調べてこの方法は知ってたんだけど・・。
これって画像では使えないんだよなぁ。
画像から調べる方法がないわけでもないけど、面倒なんだよね。
でも最大のデメリットは、WEBページ上でしか使えないってことなんだよね。
大福
大福

 

というわけで、こんな時におすすめしたいのがこちら。

選択した箇所のカラーコードを表示

上記の通り、WEBページ上はもちろん、それ以外でも使用することが可能。

画面内に表示されているものなら、どこでもカラーコードを表示することができます。

ツールの使い方もすごく簡単。
キーボードショートカットでパッと起動できるよ。
大福
大福

 

使用したのはMicrosoft公式ツール

Microsoft Power Toys

カラーコードの表示に使用したのは、Microsoft公式ツール【Power Toys】。

Power Toys内には無料で使える便利な機能が満載です。

今回は、その中から「Color Picker」という機能を使用しました。

カラーコード表示ツール【Color Picker】の使い方

手順

  1. Power Toysのインストール
  2. Color Pickerをオンに
  3. ショートカットで起動

 

step
1
Power Toysのインストール

インストール

Microsoftストア  → Microsoft Power Toysをインストール

インストール完了画面が表示

こちらの画面が表示されれば完了

Power Toysがすでにインストール済みの場合は、この手順は飛ばしてね。
大福
大福

 

step
2
Color Pickerをオンに

Color Pickerの有効化

Color Picker → Color Pickerを有効化するをオンに

デフォルトでオンになっている場合は、そのままでOK。
大福
大福

Power Toysは、以下の手順で開くことができます。
スタートボタン → すべてのアプリ → Power Toys

 

step
3
ショートカットで起動

Color Pickerの起動と表示

Windows + Shift + C → カーソルがある箇所のカラーコードが表示

気になる色があったら、そこでクリック。
エディターが表示されて、さらに詳しい情報を見ることができるよ。
大福
大福

エディターの表示

カラーコードをコピー

小豆
小豆
ショートカットで気軽に起動できるのが便利だね。
そのままでもOKだけど、さらに自分好みにカスタマイズしたい場合は以下を参考にしてね。
大福
大福

 

Color Pickerの設定項目

Color Pickerの設定1

アクティブ化のショートカット Color Pickerを起動する際のショートカットキーを設定
※Windowsキー、Ctrl、Alt、またはShiftで始まるショートカットのみ有効
アクティブ化の動作 エディターを開く:カラーピッカーは起動せずにエディター画面を開く
色を選択してエディターを開く:Color Pickerを起動し、色の選択時にエディターを開く
色の選択のみ:色の選択を行ってもエディターは開かない(カラーコードはクリップボードにコピーされる)

Color Pickerの設定2

既定の色の選択 選択した形式でColor Pickerに色が表示される
色の名前を表示 選択した色の名前がColor Pickerに表示される

Color Pickerの設定3

色の形式 色の形式の編集・削除・非表示・並べ替え

覚えておきたい!Color Pickerの便利な使い方

せっかくColor Pickerを使うなら、以下の2つの使い方を覚えておいて損はなし!

さらに便利に使えて作業効率が上がります。

 

便利な使い方

✔️ 拡大領域から色の選択

✔️ エディターから好みの類似色を見つける

 

拡大領域から色の選択

拡大領域からカラーコードを抽出

マウスホイールを上にスクロールすると、領域が拡大。

選択しづらい細かい部分からも、正確にカラーコードをピックアップすることができます。

 

エディターから好みの類似色を見つける

色の調整も可能

エディターには選択した色を含め、明るさの違いで5色が表示。

また、選択した色を自分好みに調整することも可能です。

小豆
小豆
もう少し明るめで、さらにくすんだ色の方がいいなぁ。
こんな時にすごく便利だね。
大福
大福

 

まとめ:自分好みのカラーを使おう

この色、自分のブログでも使いたい!

こんな時は、ぜひ紹介したColor Pickerを使ってみて下さい。

WEBページ以外でも使えて、利便性抜群です。

 

  • 関連記事

 

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To