【Windows】カラーピッカーで画面に表示されている色のカラーコードを調べる【Mac】

2023年10月12日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

画面の他の場所と同じ色を使いたいのですが色の情報が分かりません。

先生

カラーピッカーを使えば画面上の色の情報を取得できます。

画面に表示されている色の情報を取得したい

WEB制作や画像編集を行っていると

生徒

画面の他の箇所で使われているのと同じ色にしたい

ということがよくあります。

そういった時に使えるカラーピッカー（画面に表示している色の情報を取得できるツール）を紹介します。

この記事で分かること

Windows / Mac でカラーピッカーを使って色の情報を取得する方法

Windows の場合

Microsoft Power Toys の Color Picker

Windows10、11の標準機能には画面の色を取得するツールはありませんが、Microsoft Power ToysというMicrosoft純正の機能拡張ツール群の中にColor Pickerがあります。

Microsoft Power Toys のインストール

以下のサイトからMicrosoft Power Toysをダウンロードします。

GitHub

Releases · microsoft/PowerToys Windows system utilities to maximize productivity. Contribute to microsoft/PowerToys development by creating an account on GitHub.

AssetsにあるPowerToysSetup-*.*.*-x64.exeをクリックしてダウンロードします。

ARM系のCPUのPCの場合はPowerToysSetup-*.*.*-arm64.exeを選択します。

ダウンロードしたインストーラーのexeファイルをダブルクリックして実行します。

インストーラーが起動しますので installボタンをクリックします。

インストールが行われますのでしばらく待ちます。

インストール完了画面になるので Close

Coler Pickerの使い方

Color Pickerを起動するには Win+ Shift+ Cキーを押します。

ピッカーが表示されて、マウスカーソルの位置の色の情報が表示されます。

マウスホイールを上に回すと、マウスカーソルの位置が拡大表示されてその中で色を選択する操作に変わります。
マウスホイールを下に回して拡大表示を閉じると元の操作に戻ります。

クリックすると画面が開いて、クリックした箇所の色の情報が表示されます。

エディターの左上のスポイトアイコンをクリックすると、エディターが閉じてピッカー表示になります。

エディターの上部の歯車アイコンをクリックすると設定画面が開きます。

Color Picker の設定

設定画面では、起動ショートカットキーや起動後の操作、表示する色の形式などを設定できます。

Color Pickerを起動するショートカットキーの変更は、アクティブ化のショートカットで行いします。

起動後の動作を変更したい場合は、アクティブ化の動作を変更します。

設定	起動後の動作
エディターを開く	色は選択せずにエディターを開きます。
色を選択してエディターを開く	ピッカーが表示されて、色を選択するとエディターを開きます。
色の選択のみ	ピッカーが表示されて、色を選択してもピッカーのままです。（選択した色はクリップボードにコピーされます。）