MacとWindowsでスポイト機能を使う方法　「特定の色を抽出する方法」

デザインを作成したりブログ記事のテキストを塗装する時などにカラーコードを取りたくてもどう取ったらいいかわからないという方もいるかと思います。
そんな方に向けてスポイト機能が付いたアプリや拡張機能について説明したいと思います。

この記事を読むメリット：

① Macbookでの色を特定することができる
② Windowsでも色の特定ができるようになる
③ 拡張機能での色を特定することができる

Macbook編

Macには初期状態から「Digital Color Meter」というアプリが内蔵されておりこちらのスポイト機能を使うとその他アプリからのダウンロードをする手間を省けるのでおすすめします。

Launchpad内からDigital Color Meterを探す方法もありますが、
【command ⌘ + スペースキー】でcolorと入力するとよりスムーズにアプリを探すことができます。

アプリケーションを開くとこのように画面上にあるカラーを抽出してくれます。

16進数のカラーコードと画像で抽出するには？

使用する人によりますが、PhotoshopやCanvaでカラーコードを使用する機会やweb制作をする機会がある場合はこちらを採用することも多いかと思いますのでこちらの抽出方法についても解説していきたいと思います。🐈

16進数に変更するには「表示 ➡︎ 値を表示 ➡︎ 16進数を選択」で変更することができます。

カラー画像やカラーコードを入手する方法

16進数に変更したらカラーコードを出力する方法について話していきたいと思います。

カラーコードを出力するのはとても簡単です。
「カラー ➡︎ カラーをテキストでコピー or カラーを画像でコピーを選択」で出力ができます。

カラーをテキストでコピーについて

「カラーをテキストでコピー」を選択した場合はコピーができました通知がないため少しややこしくなるかもしれませんが、コピーが完了している状態になるので貼り付けたい場所にペーストしてもらえたらOKです！

ちなみにカラーコードのイメージはこんな感じです。

カラーコードのイメージ：「 #FFFFFF 」「 #030303 」など

ショートカットキー

コピーしたくても欲しい場所からずれてしまうという場合は欲しい色の上で「Shift + command ⌘ + C」でよりスムーズにコピーが可能です

カラーを画像でコピーについて

「カラーを画像でコピー」を選択した場合は画像でのコピーが完了している状態になり貼り付けをするだけでメールでもメモ帳でも機能します。

画像でコピーした際はこの下のように出力されます。

メモ帳に貼り付けた場合もこのように表示されます。

ショートカットキー

カラーを画像でコピーをしたくても場所からずれてしまって色を抽出できないという状態でも「option ⌥ + command ⌘ + C 」でもコピーが可能になってます。

Windows編

windowsではmacのように初期状態から内蔵されているアプリが存在しないためダウンロードする必要があります。

2024年の現在、無料で使えるアプリがこの「Microsoft PowerToys」というアプリの「Color Picker 」という機能でこちらは抽出したい色に向かって１クリックするだけで10進数と16進数を同時で出力してくれるので使い勝手が良さそうです。

ダウンロードが完了したら下記のような表示があると思いますので全体メニューから「Color Picker」を選択してもらうとスポイト機能が搭載されているのが確認できるかと思います。

Color Pickerにもショートカットで開くことができ上記のスクショからも確認できるかと思いますが
「 windowsキー + Shift + C 」で簡単に開くこともできます。
むしろショートカットで開くことを前提に想定されているのかもしれません

Color Pickerが起動しなかった場合

※ もし「Color Picker」が起動しない時は設定がオフになっているかと思われるのでPowerToysアプリを検索してColor Pickerを選択しオンからオフに切り替えることで使用することができますので動作しない場合はこちらの方法を試してみてくださいね☺️

Google Chromeブラウザからスポイト機能を使う方法

最後にChromeで使えるスポイト機能についての紹介です。

Chromeにも同じように色を抽出する拡張機能が存在しています。
それが「カラーコードスポイト」というものでこの拡張機能はChromeに追加をするだけで簡単にスポイト機能を使えるツールです。

実はもう１つカラースポイトツールという同じような拡張機能がありましたが、私自身は「カラーコードスポイト」の方が使いやすいと感じたため今回はこちらを紹介したいと思います。

カラーコードスポイトの使い方について

Chromeに追加をするとこのような画面が表示されます。
英語で色々書いてありますが要は、
①拡張機能を選択
　　　⬇
②カラーコードスポイトをクリック (よく使用する場合はピン留めをおすすめ)
　　　⬇
③PICK FROM WEBボタンをクリック
　　　⬇
④欲しい色を選択する
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
というだけなのでそこまで難しいものではありません！