minto.tech スマホ（Android/iPhone）・PC（Mac/Windows）の便利情報をお届け！ 月間アクセス160万PV！スマートフォン、タブレット、パソコン、地デジに関する素朴な疑問や、困ったこと、ノウハウ、コツなどが満載のお助け記事サイトはこちら！
※本ページにはプロモーション(広告)が含まれています
Macには「デジタルカラーメーター」という隠れた便利ツールが標準搭載されています。画面上のどんな色でもカーソルを合わせるだけで正確なカラーコードを取得できる、デザイナーやエンジニアにとって非常に強力なツールです。また、カラーピッカーを使えばアプリ間で色を統一する作業も格段に楽になります。この記事では、Macのデジタルカラーメーターとカラーピッカーの使い方を初心者から上級者まで役立つ形で徹底解説します。
この記事でわかること
- デジタルカラーメーターの起動方法と基本操作
- カラー値のコピー方法（HEX・RGB・HSB対応）
- macOSのシステムカラーピッカーの使い方
- スポイトツールでの色取得方法
- デザイン・開発作業での実践的な活用例
- おすすめのカラーピッカーアプリとの比較
デジタルカラーメーターとは？
デジタルカラーメーター（Digital Color Meter）はmacOSに標準搭載されているユーティリティアプリです。画面上の任意の場所にカーソルを移動させると、その位置のピクセルの色をリアルタイムで表示します。
| 機能 | 詳細 |
|---|---|
| リアルタイム色取得 | カーソル位置の色を瞬時に表示 |
| 複数カラースペース対応 | RGB・HEX・HSB・P3・Lab等に対応 |
| 拡大表示 | カーソル周辺を最大96倍まで拡大可能 |
| クリップボードコピー | 取得した色値を即コピーして貼り付け可能 |
| ロック機能 | 特定位置の色をロックして値を確認 |
デジタルカラーメーターの起動方法
方法1：Spotlightから起動（最速）
- Command + Space でSpotlightを開く
- 「デジタルカラーメーター」または「Digital Color Meter」と入力
- 候補に表示されたらEnterキーを押す
方法2：Finderから起動
- Finderを開く
- 「アプリケーション」→「ユーティリティ」フォルダを開く
- 「デジタルカラーメーター.app」をダブルクリック
Dockに追加して素早くアクセス
よく使う場合はDockに追加しておくと便利です。
- アプリを起動した状態でDockのアイコンを右クリック
- 「オプション」→「Dockに追加」を選択
基本的な使い方
画面上の色を取得する
- デジタルカラーメーターを起動する
- マウスカーソルを色を知りたい部分に移動する
- アプリウィンドウに現在のカーソル位置の色がリアルタイムで表示される
- R・G・Bの各値（0〜255）がウィンドウに表示される
色をロックする（ロック機能）
特定の色を固定して値を確認したいときはロック機能を使います。
- Command + L：カーソル位置の色をロック（固定）
- 再度 Command + L：ロック解除
拡大率の変更
アプリウィンドウ左側のスライダーで、カーソル周辺の拡大率を調整できます。1×から96×まで変更可能です。細かいピクセル単位での色取得に役立ちます。
カラースペース（表示形式）の切り替え
デジタルカラーメーターの最大の特徴は、複数のカラースペースに対応していることです。用途に合わせて切り替えましょう。
カラースペースの切り替え方法
- メニューバー「表示」をクリック
- 「カラースペース」または「表示形式」を選択
- 用途に合ったカラースペースを選ぶ
| カラースペース | 表示形式 | 主な用途 |
|---|---|---|
| Display in sRGB | R: 255, G: 100, B: 50 | Web・一般的なデジタルデザイン |
| Display in P3 | R: 0.95, G: 0.42, B: 0.23 | ProMotionディスプレイ・映像制作 |
| Generic RGB | R: 240, G: 98, B: 48 | 一般的なRGB値の確認 |
| CIE 1931 | X: 0.41, Y: 0.35, Z: 0.18 | 色度座標の確認（専門用途） |
HEXコードで取得する方法
WebデザインやCSSで使うHEXコード（例：#FF6432）を取得するには、メニュー「表示」→「16進数として表示」を選択します。または Command + Shift + C でクリップボードに16進数カラーコードをコピーできます。
色値のコピー方法
キーボードショートカットでコピー
| ショートカット | 動作 |
|---|---|
| Command + Shift + C | 現在の色値をクリップボードにコピー |
| Command + L | カーソル位置をロック |
macOSシステムカラーピッカーの使い方
macOSには「カラーパネル」と呼ばれるシステム共通のカラーピッカーが搭載されています。テキストエディット、Pages、Keynoteなど多くのアプリで利用でき、スポイトツールも内蔵されています。
カラーパネルの起動方法
- テキストエディットやPagesなど色設定ができるアプリを開く
- 書式メニューや色ボタンから「カラーを表示」を選択（またはShift+Command+C）
- カラーパネルが表示される
カラーパネルのスポイトツールで画面の色を取得
- カラーパネル左端の「カラーホイール」タブを選択
- 左下の「虫めがねアイコン（スポイト）」をクリック
- カーソルが虫めがね型になる
- 取得したい色の部分をクリック
- 選択した色がカラーパネルに反映される
HEXコードを入力・確認する
- カラーパネルの「スライダー」タブ（横棒アイコン）を選択
- プルダウンで「16進数カラー」を選択
- HEXコードのフィールドが表示される
- 直接入力またはコピーして確認できる
実践的な活用例
活用例1：ウェブサイトの色を調べてCSSに反映する
- Safariでターゲットのウェブサイトを表示
- デジタルカラーメーターを起動
- 取得したい色の上にカーソルを移動
- Command + L でロック → Command + Shift + C でコピー
- CSSファイルに貼り付け（#FF6432 形式）
活用例2：デザインカンプの色を他のアプリに正確に再現する
- FigmaやSketchで開いたデザインカンプの色を取得
- デジタルカラーメーターで色をロック
- 取得した値（R:88 G:206 B:145 など）をXcodeやAffinityDesignerに入力
活用例3：プレゼン資料の色を統一する
- 既存スライドのメインカラーをデジタルカラーメーターで取得
- HEXコードをメモしておく
- 新しいスライドにそのカラーコードを適用して色を統一
おすすめサードパーティカラーピッカーとの比較
| ツール名 | 価格 | 特徴 | こんな人に |
|---|---|---|---|
| デジタルカラーメーター（標準） | 無料 | macOS標準、軽量、確実 | すぐ使いたい人 |
| Pastel | 有料（App Store） | パレット管理、チーム共有 | カラーパレット管理がしたい人 |
| Sip | 有料 | メニューバー常駐、履歴保存 | 頻繁に色を取得するデザイナー |
| ColorSnapper 2 | 有料 | グローバルショートカット、多形式出力 | プロのデザイナー・開発者 |
よくある質問（FAQ）
Q1. デジタルカラーメーターはどこにありますか？
A. 「アプリケーション」→「ユーティリティ」フォルダの中にあります。またはSpotlight（Command+Space）で「デジタルカラーメーター」と検索するのが最速です。
Q2. HEXコードを自動でコピーする方法はありますか？
A. はい。「表示」メニューで「16進数として表示」を選択した状態で、Command + Shift + C を押すとHEXコードがクリップボードにコピーされます。
Q3. 外付けモニターの色も取得できますか？
A. はい。Macに接続した外部ディスプレイ上のどこにカーソルを移動しても色を取得できます。ただし、ディスプレイのプロファイル設定によって色の表示が変わる場合があります。
Q4. 動画再生中の色も取得できますか？
A. はい。再生中の動画フレームの色もリアルタイムで取得できます。特定フレームの色を取得したい場合は、動画を一時停止してからカーソルを合わせてロックすると正確に取得できます。
Q5. RGB以外にCMYK値は取得できますか？
A. デジタルカラーメーター自体ではCMYK値は表示されませんが、macOSのカラーパネル（システム共通）では「CMYK スライダー」を選択するとCMYK値を確認・調整できます。
Q6. 取得した色を保存しておく方法はありますか？
A. デジタルカラーメーター単体では保存機能がありません。色をコピーしてメモアプリやテキストファイルに貼り付けて管理するか、SipやPastelなどの色管理アプリを併用することをおすすめします。
Q7. iPhone・iPadの画面上の色も取得できますか？
A. MacとiPhone/iPadをSidecarまたはMirroringで画面共有している場合、その画面上の色もデジタルカラーメーターで取得可能です。それ以外の方法（スクリーンショットをMacに転送してから取得）も使えます。
まとめ
Macのデジタルカラーメーターは、画面上のあらゆる色のRGB・HEX値を瞬時に取得できる、デザイナーや開発者にとって非常に役立つ標準ツールです。追加インストール不要、完全無料で、複数のカラースペースに対応しています。
特にWebデザインでのCSS色指定、デザインツール間での色統一、プレゼン資料の色調整など、さまざまな場面で活躍します。Command + L でのロック機能とCommand + Shift + C でのコピー機能を覚えておくだけで、日常の色取得作業が大幅に効率化されます。ぜひ日々の作業に取り入れてみてください。
