デザインや開発の作業をしていると、「この色、どんな色（コード）だろう？」と気になる時はありませんか？
Microsoft PowerToysの「Color Picker（カラーピッカー）」は画面上の色を取得し、HEXやRGBなどの形式で活用できる便利なツールです！
ショートカットキーで起動し、左クリックで選択することで簡単に画面上の色のコードをコピーできます。履歴の管理や色の微調整も可能です。
デザイナーや資料作成、SNS投稿の色選びにも役立ちます！
本記事では、「Color Picker」の基本的な使い方や設定方法を詳しく解説します。これを活用して、色取得の作業効率を向上させましょう！
Microsoft PowerToysをインストール
「Color Picker（カラーピッカー）」を使用するには「Microsoft PowerToys」をインストールし、機能を「オン」にしておく必要があります。
下記の記事でMicrosoft Storeより「Microsoft PowerToys」をインストール方法を詳しく解説していますので未インストール場合はぜひ、ご覧ください。
基本的な使い方
Win + Shift + C
「Win + Shift + C」を押下することで「Color Picker」が起動します。
マウスのカーソルを任意の場所に合わせると、ピクセルの「色」と「コード」を確認することができます。
※「ESC」ボタンで解除
左クリックでコピー
左クリックすると「エディター」が起動し、デフォルトで設定されている色の「コード（HEX）」がコピーされます。履歴（最大20個）も残ります。
貼り付け
そのまま任意のファイルに貼り付け（Ctrl + V）することができます。
拡大機能を活用
マウスホイールを回転
「Win + Shift + C」を押下し「Color Picker」を起動させた状態で、マウスホイールをスクロール（回転）すると周囲の色を拡大表示することができます。
細かいピクセル単位で色を選びたいときに便利です。
エディターで管理
左クリックで色を選択した際に起動する「エディター」で管理できる項目をご紹介します。
選択
「選択」を押下すると再度、画面上の色を確認できる状態に戻ります。
※「ESC」ボタンで解除
履歴を管理
取得した色の履歴が最大20個まで保存されます。
選択することで再度表示させることができます。
2段階の色を表示
左のバーより上から「2段階明るい色」、「選択中の色」、「2段階暗い色」を確認できます。
バーの上下2段階の色をマウスで選択することもできます。
色の調整
明るさや色合いを調整しながら、新しい色を作成することもできます。
※縦のバーの色も変わります
右クリックで削除とエクスポート
履歴の削除
任意の履歴上で右クリック＞「削除」を選択することで履歴から削除できます。
エクスポート
任意の履歴上で右クリック＞「エクスポート」を選択することで「色でグループ化」と「ファイル形式でグループ化」を選択することができます。
ファイルの種類はテキスト形式（.txt）とJson形式（.json）から選択できます。
ファイル名を入力し「保存」の押下で任意のフォルダに保存されます。
※「色でグループ化」をテキスト形式（.txt）でエクスポートした場合
※「色でグループ化」をJson形式（.json）でエクスポートした場合
設定
エディターの右上「歯車マーク」を押下することで「Color Picker」の設定が開きます。
※「Win + Shift + C」を押下し「Color Picker」を起動させ左クリックするとエディターが開きます
アクティブ化のショートカット
ここではショートカットキーをデフォルトの「Win + Shift + C」から変更することができます。
Windowsキー、Ctrl、Alt、またはShiftで始まる、ショートカットキーを押下し「保存」を選択すると変更できます。
アクティブ化の動作
「Win + Shift + C」を押下し「Color Picker」を起動させた際の、3通りの挙動を選択・設定できます。
以下の３つとなります。
シンプルにHTMLやCSS、資料などに貼り付けしたい場合はエディターが開かない「色の選択のみ」がおすすめです！
| エディターを開く | ショートカットキーを押下することでエディターが開きます。 |
| 色を選択してエディターを開く | デフォルトの設定です。 マウスの場所で色を確認し、左クリックすることでコードがコピーされ、エディターが開きます。 |
| 色の選択のみ | マウスの場所で色を確認し、左クリックすることでコードがコピーされます。 エディターは開きません。 |
既定の色の形式
左クリックでコードがコピーされる際の「形式」を設定することができます。
デフォルトで「HEX」が設定されています。
任意の「形式」が選択可能
色の名前を表示
「Win + Shift + C」で「Color Picker」を起動し、マウスで色を確認する際に色の名前が表示されるようになります。
デフォルトでは「オフ」となっており表示されていない状態となっています。
※オフの状態
※オンの状態。「濃い青緑」と表示される。
色の形式
新しい形式の追加
「新しい形式の追加」より任意の色をエディター画面に表示できるようになります。
コードの選択
左クリックで色を選択した際、エディター画面にデフォルトで「HEX」「RGB」「HSL」の3つのコードが表示・コピーできる状態となっています。その設定を変更することができます。
エディター画面に追加され、コードをコピーすることができます。
まとめ
今回は「Microsoft PowerToys」の機能の一つ「Color Picker（カラーピッカー）」の基本的な使い方と設定方法を紹介しました！
ショートカットキー（Win + Shift + C）から左クリックで誰でも簡単に色を取得することができます！
画面上の色を確認したい際は、ぜひ試してみてください！
最後まで読んでいただき、ありがとうございました！
