![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
画面の他の場所と同じ色を使いたいのですが色の情報が分かりません。
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
カラーピッカーを使えば画面上の色の情報を取得できます。
画面に表示されている色の情報を取得したい
WEB制作や画像編集を行っていると
![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
画面の他の箇所で使われているのと同じ色にしたい
ということがよくあります。
そういった時に使えるカラーピッカー(画面に表示している色の情報を取得できるツール)を紹介します。
- Windows / Mac でカラーピッカーを使って色の情報を取得する方法
Windows の場合
Microsoft Power Toys の Color Picker
Windows10、11の標準機能には画面の色を取得するツールはありませんが、Microsoft Power ToysというMicrosoft純正の機能拡張ツール群の中にColor Pickerがあります。
![](https://learn.microsoft.com/en-us/media/open-graph-image.png)
![](https://learn.microsoft.com/en-us/media/open-graph-image.png)
Microsoft Power Toys のインストール
以下のサイトからMicrosoft Power Toysをダウンロードします。
Assets
にあるPowerToysSetup-*.*.*-x64.exe
をクリックしてダウンロードします。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-336-1024x933.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-336-1024x933.png)
ダウンロードしたインストーラーのexeファイルをダブルクリックして実行します。
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h13_00.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h13_00.png)
インストーラーが起動しますので installボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h13_51.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h13_51.png)
インストールが行われますのでしばらく待ちます。
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h15_24.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h15_24.png)
インストール完了画面になるので Close
Coler Pickerの使い方
![](https://mik2062.jp/wp-content/uploads/2022/08/image-337.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-337.png)
マウスホイールを上に回すと、マウスカーソルの位置が拡大表示されてその中で色を選択する操作に変わります。
マウスホイールを下に回して拡大表示を閉じると元の操作に戻ります。
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h30_47-1024x795.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/2022-08-27_02h30_47-1024x795.png)
クリックすると画面が開いて、クリックした箇所の色の情報が表示されます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-338.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-338.png)
エディターの左上のスポイトアイコンをクリックすると、エディターが閉じてピッカー表示になります。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-347.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-347.png)
エディターの上部の歯車アイコンをクリックすると設定画面が開きます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-340.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-340.png)
Color Picker の設定
設定画面では、起動ショートカットキーや起動後の操作、表示する色の形式などを設定できます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-341.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-341.png)
Color Pickerを起動するショートカットキーの変更は、アクティブ化のショートカット
で行いします。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-345.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-345.png)
起動後の動作を変更したい場合は、アクティブ化
の動作を変更します。
設定 | 起動後の動作 |
---|---|
エディターを開く | 色は選択せずにエディターを開きます。 |
色を選択してエディターを開く | ピッカーが表示されて、色を選択するとエディターを開きます。 |
色の選択のみ | ピッカーが表示されて、色を選択してもピッカーのままです。(選択した色はクリップボードにコピーされます。) |
![](https://mik2062.jp/wp-content/uploads/2022/08/image-344.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-344.png)
規定の色の形式
で選択した形式でピッカーに色が表示されます。
色を選択した時もこの形式でクリップボードにコピーされます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-350.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-350.png)
色の名前を表示をオンにすると、ピッカーに選択している色の名前が表示されます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-349.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-349.png)
あまり使い所は無い気もしますが、色の名前で確認できる方が早い場面があるかもしれません。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-346.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-346.png)
6ヶ月で未経験からWebデザイナーになる!【デジタルハリウッド STUDIO by LIG】
Mac の場合
標準ツールの Digital Color Meter を使う
Mac OSに標準で入っているツールDigital Color Meterで画面の色を取得できます。
Digital Color Meter の使い方
Digital Color Meterは標準で入っていますので、Launchpadでcolor
などと入力して選択します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-183.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-183.png)
Digital Color Meter の画面は以下になります。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-353.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-353.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-357.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-357.png)
位置をロック
マウスカーソルを動かしても選択色が変わらないようにCommand
+L
キーで選択位置をロックできます。
また、水平方向や垂直方向のみロックすることもできます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-373.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-373.png)
拡大
マウスカーソル付近を拡大して表示できます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-375.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-375.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-376.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-376.png)
絞りサイズ
絞りサイズで色を取得する範囲の大きさを変更できます。
絞りサイズが1より大きい場合、選択色は絞りサイズ範囲の色の平均値になります。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-372.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-372.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-371.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-371.png)
選択色の表示形式
10進で表示
クリックボードにテキストでコピーすると244 157 185
のようにRGB形式での値がコピーされます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-360-1024x328.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-360-1024x328.png)
16進で表示
クリックボードにテキストでコピーすると#F49D89
のようにカラーコードの値がコピーされます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-361-1024x321.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-361-1024x321.png)
パーセントで表示
クリックボードにテキストでコピーすると96% 62% 73%
のようにパーセンテージの値がコピーされます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-362-1024x323.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-362-1024x323.png)
選択した色の情報を取得する
Digital Color Meterで選択した色のデータを取得する方法は2つあります。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-363-1024x330.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-363-1024x330.png)
カラーをテキストでコピー
252 187 207
,FCBBCF
といった選択色のカラーコードが文字列でクリップボードにコピーされます。
カラーをイメージでコピー
選択している色の画像がクリップボードにコピーされます。
![](https://mik2062.jp/wp-content/uploads/2022/08/image-366.png)
![](https://mik2062.jp/wp-content/uploads/2022/08/image-366.png)