※本ページにはプロモーション(広告)が含まれています

【2026年最新版】Macの「Digital Color Meter」と標準カラーピッカーで色を取得する方法【完全ガイド】

「Web上の素敵なロゴの色をそのまま使いたい」「写真の中のグラデーションをHEXコードで知りたい」「印刷物で使うCMYK値を確認したい」——デザイナーや開発者だけでなく、資料作成中の一般ユーザーにとっても色を正確に取得する作業は意外と頻繁に発生します。

そんなとき、Macには無料で使える優秀な標準ツールが実は2つ用意されています。Digital Color Meterとカラーピッカーです。本記事では、これらの使い方から、デザイナー向けの応用テクニック、サードパーティ代替アプリまで、Macで色を扱うための知識を徹底解説します。

Digital Color Meterとは何か？

Digital Color Meter（デジタル・カラー・メーター）は、macOSに標準で搭載されている無料のカラー測定アプリです。マウスカーソル位置の色をリアルタイムで取得し、RGB値・HEX値・CMYK値といった形式で表示してくれます。

Apple純正のため動作が極めて軽快で、外部からダウンロードする必要もなく、安定性も抜群。デザイナー・開発者はもちろん、一般ユーザーにも便利な隠れた名アプリです。

こんな場面で活躍する

• 気になる色を見つけてHEXコードを取得したい
• Webページのデザインからカラーを抽出したい
• 印刷物のCMYK値を確認したい
• 画像の特定箇所のピクセル色を測定したい
• キャリブレーション結果のテストをしたい

Digital Color Meterの起動方法

Digital Color Meterはアプリケーションフォルダの「ユーティリティ」内に格納されています。普段あまり目につかない場所のため、Spotlight検索を使うのが最も早いです。

手順1：Spotlight検索で起動

1. Cmd + Space でSpotlight検索を開く
2. 「Digital Color Meter」または「digital」と入力
3. Enterキーで起動

手順2：Finderから直接起動

1. Finderを開く
2. メニューバーから「移動 > ユーティリティ」を選択（またはShift + Cmd + U）
3. 「Digital Color Meter」をダブルクリック

手順3：Dockに常駐させる（おすすめ）

1. Digital Color Meterを起動
2. Dockのアイコンを右クリック
3. 「オプション > Dockに追加」を選択
4. 次回以降ワンクリックで起動可能に

Digital Color Meterの基本操作

起動すると、シンプルなウィンドウが現れます。カーソル位置周辺をズーム表示する小さな枠と、現在のカラー値を表示するパネルで構成されています。

基本の使い方

1. 取得したい色のある場所にマウスカーソルを動かす
2. カーソル位置のピクセルカラーがリアルタイムで表示される
3. 取得値の表示形式は表示メニューから切り替え可能
4. Shift + Cmd + L で位置を固定（ロック）できる
5. Shift + Cmd + H でカーソル下のカラー測定をホールド

カラー表示モードの種類

モード	用途	表示例
汎用RGB	Web・モニター用	R:88 G:206 B:145
sRGB	Web標準色空間	国際標準的に最も使われる
Adobe RGB	広色域・写真用	プロ写真家向け
表示RGB	現在のディスプレイ依存	画面で見える色そのまま
L*a*b*	機器に依存しない	L:75 a:-30 b:5

HEX値表示への切り替え

「表示 > 16進数の値で表示」（またはShift + Cmd + 6）を選択すると、RGB値が16進数（HEX）形式に切り替わります。CSS等で使う「#58CE91」のような形式が、コピペでそのまま貼り付け可能になります。

カラー値をクリップボードにコピーする

Digital Color Meterの真価は、取得したカラー値を瞬時に他のアプリへ貼り付けられる点にあります。コピー用ショートカットを覚えておけば作業効率が劇的に上がります。

主要ショートカット一覧

ショートカット	機能
Shift + Cmd + L	マウス位置のロック/解除
Shift + Cmd + H	カラー値をホールド（固定）
Shift + Cmd + C	カラー値をテキストでコピー
Option + Shift + Cmd + C	カラーそのものをコピー（画像）
Cmd + +/−	ズーム拡大/縮小
Cmd + S	測定値画像を保存

コピー設定の変更

「表示 > 値をコピー」サブメニューから、コピー時のフォーマットを以下から選べます。

• RGB値：CSSのrgb()記法で出力
• 16進数：HEX形式（#FFFFFF）
• カラーマスター値：通常はこちらが汎用的

システム標準カラーピッカーの使い方

もう一つのMac標準カラーツールが「カラーピッカー」です。これは独立したアプリではなく、各アプリ内で色を選択する場面で呼び出される共通ダイアログです。Pages・Numbers・Keynote・Preview・メモ等、ほぼ全てのApple純正アプリで使えます。

カラーピッカーの呼び出し方

1. カラー設定可能なアプリ（例：メモ）を開く
2. テキストやオブジェクトを選択
3. 「フォーマット > フォント > カラーを表示」または塗りつぶしカラーボタンをクリック
4. カラーピッカーウィンドウが表示される

カラーピッカーの5つのモード

• カラーホイール：直感的な色選択。彩度と色相を視覚的に調整
• カラースライダ：RGB・HSB・CMYK等を数値で精密設定
• カラーパレット：Apple純正・Web・Crayon等のプリセット
• イメージパレット：画像から色をピック（写真をドラッグ可）
• 鉛筆型カラーピッカー：画面上の任意の色をスポイトで取得

スポイト機能で画面上の色を取得

1. カラーピッカーのウィンドウ左上にある虫眼鏡（ルーペ）アイコンをクリック
2. カーソルがスポイトに変わる
3. 取得したい色の場所をクリック
4. そのまま選択中のオブジェクトに色が適用される

お気に入り色の保存

カラーピッカー下部にある小さな枠（カスタムカラー欄）へ、現在選択中の色をドラッグ＆ドロップすれば、よく使う色をパレットとして保存できます。プロジェクトのブランドカラーを登録しておけば、毎回数値を入力する手間が省けます。

デザイナー向け活用テクニック

標準ツールでも工夫次第でプロのワークフローに耐えうる使い方ができます。実際のデザイン現場で重宝されるテクニックをご紹介します。

テクニック1：競合サイトのブランドカラー調査

1. Safari等で対象Webサイトを開く
2. Digital Color Meterを起動
3. 表示モードを「16進数」に設定
4. ロゴ・ボタン・見出し等にカーソルを当てる
5. Shift + Cmd + C でHEX値をコピー
6. Figma・Sketchのカラースタイルへペースト

テクニック2：写真からカラーパレット抽出

1. カラーピッカー > イメージパレットを開く
2. 素材画像をドラッグ＆ドロップ
3. 表示された画像から色をクリックで取得
4. 気に入った色をカスタムカラー欄に保存
5. Web・印刷デザインのキー配色として活用

テクニック3：カラーキャリブレーション確認

外部モニター追加時、色味が想定と違うことがあります。Digital Color Meterで同じ画像を測定し、Macメインディスプレイと外部ディスプレイの値の差を比較することで、キャリブレーション必要性を客観的に判定できます。

テクニック4：CMYK値で印刷用色指定

表示モードを「汎用CMYK」に切り替えれば、印刷物で必要なC・M・Y・K値が即座に取得可能。Webからインスピレーションを得たデザインを印刷物に展開する際に重宝します。

サードパーティ代替アプリ

Apple純正ツールでも基本は十分カバーできますが、より多機能な代替アプリも存在します。プロのデザイン業務では以下のいずれかが定番です。

Sip（シップ）

シンプルかつ強力なメニューバー型カラーピッカー。HEX・RGB・CMYK・SwiftUI・Tailwind等、多数のフォーマットに対応。カラーパレットをチームで共有でき、Figma・Sketch・Adobe XDとの連携も非常にスムーズです。基本無料、Pro機能は有料。

ColorSlurp

無料で使える高機能カラーピッカー。マグニファイア（拡大鏡）が大きく、ピクセル単位の精密な取得が得意。コントラスト比チェッカーや、配色提案機能も搭載されており、アクセシビリティを重視するデザイナーに人気です。

Pixel Picker

常駐型ピクセル取得ツール。グローバルショートカットで瞬時に呼び出せ、サブピクセルレベルでの精度が魅力。デベロッパーがUI実装を行う際の細部チェックに最適です。

4ツールの比較

ツール	価格	主な強み	弱み
Digital Color Meter	無料（Mac標準）	CMYK・L*a*b*等専門表示	パレット保存機能なし
標準カラーピッカー	無料（Mac標準）	アプリ内の色設定で必須	単独利用には不便
Sip	基本無料/Pro有料	多フォーマット対応・チーム共有	Pro機能はサブスク
ColorSlurp	無料	コントラスト比チェック	機能を絞っている

困った時のトラブルシューティング

Digital Color Meterのカーソルが追従しない

「システム設定 > プライバシーとセキュリティ > 画面収録」でDigital Color Meterの権限を許可してください。macOS Big Sur以降は権限が厳格化されており、これがないと正常動作しません。

HEX値のコピーで「#」が付かない

「表示 > 値をコピー > 16進数の値」を選択してください。「カラーマスター値」だと数値のみコピーされます。

カラーピッカーで取得した色が違う

カラープロファイルが異なる可能性があります。「システム設定 > ディスプレイ > カラー」で適切なプロファイル（一般的にはsRGB）を選択してください。

FAQ：よくある質問

Q1. Digital Color Meterは無料ですか？

はい、完全無料です。macOS標準アプリとして全Macに最初から搭載されています。アプリケーション > ユーティリティから利用できます。

Q2. Retinaディスプレイでの色取得精度は？

Retina対応で、サブピクセル単位での測定が可能です。ただし、表示倍率が2x・3xの場合、論理ピクセルと物理ピクセルが異なるため、想定通りに測定するには「ズーム > 4倍」以上での確認をおすすめします。

Q3. 複数の色を一気に取得できますか？

Digital Color Meter単体では1色ずつしか取得できません。複数色を効率的に集めたい場合は、Sip・ColorSlurpといったサードパーティアプリのパレット機能を活用しましょう。

Q4. 印刷物の色をスキャナで取得できますか？

Digital Color Meterは画面上の色のみ対応です。印刷物を取り込む場合はスキャナで取り込んだ画像をプレビュー等で開き、Digital Color Meterで測定する2段階の手順となります。

Q5. Webデザイナーに必須なフォーマットは？

HEX値（#000000形式）が圧倒的に主流です。CSS・HTML・各種デザインツールで標準採用されているため、まずはHEXでコピー設定にしておけば困りません。透明度を扱う場合はRGBA記法も覚えておくと便利です。

Q6. ダークモードでDigital Color Meterは正しく動く？

正常動作します。ただし表示色そのものはディスプレイ表示色を取得するため、ダークモードでテーマ別の本来の色を取得したい場合は、ライトモードに一時的に切り替えることをお勧めします。

Q7. アクセシビリティ・コントラスト比のチェックも可能？

Digital Color Meter単体ではコントラスト比計算は不可能ですが、取得したHEX値をWebアクセシビリティチェッカーに入力すれば代用可能です。ColorSlurpであれば直接コントラスト比表示機能が組み込まれています。

まとめ：Mac標準ツールで色作業はほぼ完結する

Macには無料で使える優秀なカラーツールが標準搭載されています。Digital Color Meterと標準カラーピッカーを使いこなせば、日常的な色取得作業の95%は完結します。

• Digital Color Meterは「アプリケーション > ユーティリティ」内に格納
• HEX値表示は Shift + Cmd + 6、コピーは Shift + Cmd + C
• カラーピッカーはAppleアプリ内で共通利用可能
• イメージパレット機能で画像から色を抽出可能
• 本格的なデザイン業務にはSipやColorSlurpへのステップアップも検討

「ちょっとあの色を使いたいだけなのに」というプチストレスから解放され、デザイン作業の効率が飛躍的に上がります。まだ標準ツールを試したことがない方は、ぜひ今日から活用してみてください。