PowerToysは、パソコンを今より便利に使えるようにするWindows専用の無料ツール集です。
その一つのColor Pickerは、パソコンの画面にある好きな色をスポイトのように吸い取って、その色の名前（番号）を教えてくれる機能です。
ショートカットキーを押してカーソルを合わせるだけで、色の値をコピーすることができます。
同じ色で絵をかきたいときや、資料作り、プログラミングでも役立つ機能です。
こちらでは、PowerToysのColor Pickerを使ってカラーコードを調べる方法や、おすすめ設定などについてご紹介します。
PowerToysのColor Pickerとは？
PowerToysのColor Pickerは、画面に表示されている色をその場で数値として取得できる機能です。」「この色をそのまま使いたい」と思ったときに活躍します。特別な画像編集ソフトを開かなくても、今見えている色をすぐに調べられます。
ここでは、Color Pickerで何ができるのかを順番に整理していきます。
Color Pickerでできること
Color Pickerを起動してカーソルを色の上に合わせると、その色のHEXやRGBといったカラーコードが表示されます。
取得したコードは自動でコピーされるため、別のアプリに貼り付けるだけで使えます。画像の中の色やWebページの背景色も対象になります。
この機能のポイントは、画面に表示されている色をそのまま取得できることです。目で見て近い色を選ぶのではなく、正確な数値として扱えます。
さらに、取得と同時にコピーまで完了するため、入力ミスの心配も減ります。
どんな人に向いている機能か
Color Pickerは、全員が毎日使う機能というわけではありません。ただ、色を正確にそろえたい場面があるなら出番があります。
Web制作やブログ装飾、資料作成など、同じ色を再現したい作業では便利です。ロゴやバナーの色を合わせる場面でも役立つでしょう。
特に効果を感じやすいのは、色を数値で正確に管理したい人です。目分量では不安な場面でも、数値なら再現できます。
また、複数のアプリで同じ色を使いたい人にも向いています。
Color Pickerが使える状態か確認する方法
PowerToysのColor Pickerが現在使える状態か確認する方法をご紹介します。
PCの下部のタスクバーにある「スタートメニュー」を選択します。
「ピン留め済み」の中から「PowerToys」を選択します。
「ユーティリティ」にある「Color Picker」の項目のチェックが「オン」になっているか確認します。
こちらは、「オン」の状態になっていますので、Color Pickerが使えることがわかりました。
Color Pickerでカラーコードを調べる方法
PowerToysのColor Pickerを使ってカラーコードを調べる方法をご紹介します。
例としてこちらのサイトで使われているカラーコードを調べます。
カラーコードを調べたいサイトを開き、Windowsキー + Shift + Cを押します。
マウスポインターにColor Pickerが表示され、ポイント（マウスを合わせる）したところのカラーコードがわかります。
画面をクリックするとカラーコードが表示されます。
※初期設定では、HEX、RGB、HSLが表示されます。
上部にある一番左の色が今クリックした色、それ以降は今まで確認した履歴です。
Color Pickerで調べたカラーコードをコピーする方法
PowerToysのColor Pickerで調べたカラーコードをコピーする方法をご紹介します。
例としてこちらのサイトで使われているカラーコードを調べて、メモ帳に張り付ける方法を試します。
カラーコードを調べたいサイトとメモ帳を開きます。
カラーコードを調べたいサイトを開き、Windowsキー + Shift + Cを押します。
↓
こちらのオレンジ色のところのカラーコードを調べます。
↓
カラーコードが表示されました。
Color Pickerで表示されているカラーコードの右側にあるコピーボタンをクリックします。
↓
コピーが成功しました。
メモ帳にカラーコードを貼り付けます。
※右クリックをして貼り付けを選ぶと貼り付けできます。
またはキーボードのCtrl + Vで貼り付けできます。
Color Pickerで調べたカラーコードをエクスポートする方法
PowerToysのColor Pickerで調べたカラーコードをエクスポートする方法をご紹介します。
上部にある色を右クリックします。
エクスポートを選択します。
↓
色でグループ化を選びます。
※「色でグループ化」と「ファイル形式でグループ化」の2種類ありますが、ここでは例として「色でグループ化」を選択します。
ファイル名を「色でグループ化」と入力して、デスクトップに保存します。
↓
保存します。
保存したファイルを開いて確認することができます。
↓
色でグループ化した結果が表示されます。
「ファイル形式でグループ化」で保存するとこのようになります。
Color Pickerのおすすめ設定
PowerToysのColor Pickerのおすすめ設定をご紹介します。
Color Pickerの設定をクリックします。
設定画面では、ショートカット、ピッカーの動作、色の形式が選べます。
色を選択している時に、色名を表示させてると便利なので、ピッカー動作の「色の名前を表示」を「オン」にするのがおすすめです。
↓
ピッカー動作の「色の名前を表示」を「オン」にするとカラーコードだけでなく色名も表示されます。
Color Pickerで表示される色の形式と特徴
Color Pickerで色を取得すると、「HEX」「RGB」「HSL」など、たくさんの形式が表示されます。「正直、どれを使えばいいの？」「違いがよくわからない…」、そう感じる方も多いと思います。
ここでは、PowerToysで表示される各色コードの意味と、実際にどんな場面で使うのかをわかりやすく表にしました。
| 色の形式 | サンプル（取得例） | とくちょう（かんたん解説） | こんなときに使う |
|---|---|---|---|
| HEX | ffe4b5 | 英数字6桁で色を表す。Webでいちばん一般的。 | ブログ・ホームページの色指定 |
| RGB | rgb(255, 228, 181) | 赤・緑・青を0～255の数字で表す | CSS編集・透明度を使うとき |
| HSL | hsl(38, 100%, 85%) | 色相・彩度・明るさで表す。調整しやすい | 明るさを少し変えたいとき |
| HSV | hsv(38, 29%, 100%) | 明るさを基準にした色の表し方 | デザインの微調整 |
| CMYK | cmyk(0%, 11%, 29%, 0%) | 印刷インク4色で表す方式 | チラシ・名刺など印刷物 |
| HSB | hsb(38, 29%, 100%) | HSVとほぼ同じ。Adobe系で使われる | Photoshopなど |
| HSI | hsi(38, 18%, 87%) | 人の見え方に近い計算方式 | 画像処理・研究用途 |
| HWB | hwb(38, 71%, 0%) | 白と黒の割合で色を調整する | 最新のCSS仕様 |
| NCol | R64, 71%, 0% | 色理論ベースの特殊な形式 | 専門的な色設計 |
| CIEXYZ | XYZ(77.3209, 80.0841, 55.1024) | 色を物理的な数値で表す | ディスプレイ校正 |
| CIELAB | CIELab(91.72, 2.44, 26.36) | 人間の視覚に近い色空間 | 印刷・色の差を比較 |
| Oklab | oklab(0.93, 0.01, 0.07) | より自然に見える最新形式 | UIデザイン |
| Oklch | oklch(0.93, 0.07, 81.38) | Oklabを使いやすくした形式 | Webの最新カラー指定 |
| VEC4 | (1f, 0.89f, 0.71f, 1f) | 0～1の小数で色を表す | ゲーム・アプリ開発 |
| Decimal | 11920639 | 10進数の整数で表した色 | システム内部処理 |
| HEX Int | 0xFFFFE4B5 | 16進数の整数形式 | プログラム内処理 |
PowerToysは、パソコンを今より便利に使えるようにするWindows専用の無料ツール集です。
その一つのColor Pickerは、パソコンの画面にある好きな色をスポイトのように吸い取って、その色の名前（番号）を教えてくれる機能です。
ショートカットキーを押してカーソルを合わせるだけで、色の値をコピーすることができます。
同じ色で絵をかきたいときや、資料作り、プログラミングでも役立つ機能です。
こちらでは、PowerToysのColor Pickerを使ってカラーコードを調べる方法や、おすすめ設定などについてご紹介しました。
少しでも皆様のお役に立てれば嬉しいです。
