Web制作中に画面の色をそのままCSSへ持っていきたくて、Macの標準ツールで取得した数値を貼り付けたら、思っていた色と微妙に違って見えた——そんな場面はないでしょうか。
結論からお伝えすると、原因はたいてい表示形式ではなく「どの色空間を選んでいるか」にあります。Macには「Digital Color Meter」という標準のカラーピッカーがあり、既定のままだと画面のディスプレイに合わせて変換された後の値を表示します。CSSで指定したい元の値と一致させるには、選ぶ色空間を変える必要があります。
Digital Color Meterとは｜Mac標準のカラーピッカー
Macには、画面上の色をピクセル単位で読み取れる「Digital Color Meter」という純正アプリが標準で入っています。追加のインストールは不要で、Finderの「移動」メニューから「ユーティリティ」フォルダを開くと見つかります。
注意したいのは、名前が日本語化されていない点です。実機のmacOS 26.3.1（app version 6.10）で確認したところ、アプリ名を格納しているローカライズテーブル（InfoPlist.loctable）には、日本語（ja）の表示名として「Digital Color Meter」がそのまま入っていました。フランス語では「Colorimètre numérique」、韓国語では「디지털 컬러 측정기」、簡体字・繁体字中国語でもそれぞれ翻訳された名前が用意されているのに対して、日本語だけ英語表記のままです。Spotlightの検索欄に「デジタルカラーメーター」と日本語で入力しても見つからないので、英語の「Digital Color Meter」で検索します。
もうひとつ、Digital Color Meterを開くと気づく点があります。画面収録が必要なアプリを開くと、通常macOSは許可を求めるダイアログを表示しますが、Digital Color Meterではこのプロンプトが出ません。コード署名を確認すると、com.apple.private.screencapturekit.nopromptとcom.apple.private.tcc.allowという、Apple純正アプリだけに許可された特別な権限（entitlement）を持っていることが分かります。サードパーティ製のアプリが同じように画面の色を読み取ろうとすると、通常はこの許可を求められます。
カラーコードを取得する基本手順
Spotlight（⌘＋スペースバー）を開き、英語で「Digital Color Meter」と入力して起動します。日本語名は用意されていないため、「デジタルカラーメーター」で検索しても見つかりません。Finderからなら「移動」メニューの「ユーティリティ」フォルダにあります。
起動すると、カーソルの動きに合わせて色を読み取る小さなウインドウが表示されます。色を拾う対象はスクリーンショットとして保存した画像であることが多いので、拡大表示してからカーソルを重ねると狙った位置を合わせやすくなります。カーソルを目的の色の上に置くと、ウインドウ内の数値がリアルタイムで切り替わります。
ウインドウ内にはR・G・Bそれぞれの数値が表示されます。ここまでの手順で取得したカラーコードは、初期状態では10進数で表示されているため、Webで使うにはひと手間必要です。切り替え方は次の章で説明します。
「表示」＞「値を表示」を「16進」にすると#付きでコピーできる
Digital Color Meterのメニューバーには「表示」というメニューがあり、その中に「値を表示」というサブメニューがあります。Apple公式ガイドでも「『表示』＞『値を表示』と選択します」と案内されている経路で、実機のメニュー表記とも一致しています。
「値を表示」を開くと、「10進」「16進」「パーセント」「浮動小数」の4つから選べます。Webでそのまま使うカラーコードが欲しいときは「16進」を選びます。「16進」にしておくと、⇧⌘Cでコピーしたときに#FFFFFFのように#付きで貼り付けられるので、CSSにそのまま使えます。
「10進」のままだと、黒なら「0 0 0」のように3つの数字がタブで区切られた形でコピーされます。この形はCSSにはそのまま貼れないので、コピーする前に「16進」になっているかを確かめてください。
sRGB・P3・ネイティブ｜どれを選べばWebのCSS値と一致するのか
Digital Color Meterには、表示する色空間を切り替えるポップアップメニューもあります。実機のmacOS 26.3.1（app version 6.10）で確認した選択肢は、次の8種類です。
- ネイティブの値を表示
- ネイティブの値を表示（EDR）
- ネイティブの値を表示（EDRリニア）
- sRGBで表示
- P3で表示
- Adobe RGBで表示
- BT.2020で表示
- Lab*で表示
Apple公式ガイドには「拡張ダイナミックレンジのコンテンツには、『ネイティブの値を表示（EDR）』を選択します」という案内はありますが、それ以外の色空間をどう使い分けるか、CSSの値とどう対応するかについては記載がありません。公式ガイドの本文を確認しても、色空間名の一覧すら出てこないため、この判断は自分で組み立てる必要があります。
CSSの#RRGGBBはsRGBで定義されている
Webで使う#RRGGBB形式の値がどの色空間を前提にしているかは、Apple側ではなくCSSの仕様書に書かれています。W3C CSS Color Module Level 4は、16進数表記についてこう定めています。
“The CSS hex color notation allows an sRGB color to be specified by giving the components as hexadecimal numbers”（CSSの16進数表記は、各成分を16進数の数値で示すことでsRGBの色を指定できるようにするもの）
同じ仕様書には、HTMLで指定した色や色空間の情報を持たない画像もsRGBとして扱う、という規定もあります。つまりCSSで#RRGGBBと書いたとき、その値はsRGBという色空間の中の一点を指しています。ここまではW3Cの仕様として明記されている事実です。
「ネイティブの値」がディスプレイ依存になる理由
一方、Digital Color Meterの「ネイティブの値」がなぜCSSの値とズレうるのかは、Apple公式ガイドに説明がありません。この仕組みは、macOS用のカラーメーターアプリ「Classic Color Meter」を開発したRicci Adams氏の技術記事「Mac Color Meters and Color Space Conversion」が説明しています。
同記事によると、macOSでは画像ファイルからアプリのウインドウ、そしてディスプレイに表示されるまでの間に、色情報を持ったバッファ（データの入れ物）を複数回経由します。それぞれのバッファには色プロファイルが紐づいていて、プロファイルが異なるバッファの間でデータが渡されるたびに色変換が発生します。Digital Color Meterのようなカラーメーターユーティリティは、この経路の最後にある「ディスプレイに紐づいたバッファ」の中身を読み取ります。そのため「ネイティブの値」は、画像ファイルやCSSで指定した元の値そのものではなく、そのディスプレイ用に変換された後の値になります。同記事は、この変換前の値に戻すには「Display in sRGB」を選べばよいとも述べています。
なお、この記事自体は2015〜2016年ごろに書かれたもので、本文中に登場するOSもMountain LionやYosemiteなど現行より古いバージョンです。ただし説明しているのは、macOSのColorSync（色管理の仕組み）が持つ「バッファごとに色プロファイルを管理する」という設計そのもので、Apple Developer Documentationがデバイス依存の色空間について説明している一般原理とも整合します。現在のmacOSでも変わっていないアーキテクチャの話として扱っています。
結論：Webで使うなら「sRGBで表示」を選ぶ
ここまでの理屈をつなげると、次のようになります。
- CSSの
#RRGGBBはsRGBの値として定義されている（W3Cの仕様） - Digital Color Meterの「ネイティブの値」は、ディスプレイ用に変換された後の値を読んでいる（macOSの色管理の仕組みから導かれる）
- したがって、CSSで指定したい元の値と一致させたいなら、変換前の値に戻す「sRGBで表示」を選ぶ
Apple公式が「Webで使うならsRGBを選んでください」と明言しているわけではありません。この結論は、CSSの仕様とmacOSの色管理アーキテクチャという、それぞれ別の一次情報を組み合わせて導いたものです。P3で表示やAdobe RGBで表示を選ぶと、sRGBより広い色域を前提にした数値になるため、通常の#RRGGBB表記に合わせたい場面では使いません。
コピーは2種類ある｜テキスト（⇧⌘C）と画像（⌥⌘C）の使い分け
読み取った色をコピーする方法は2つ用意されています。
- カラーをテキストでコピー（⇧＋⌘＋C）：ウインドウに表示されている数値をテキストとしてコピーします。「値を表示」を「16進」にしておけば
#FFFFFFの形でコピーされるので、CSSやコードにそのまま貼り付けられます。 - カラーを画像でコピー（⌥＋⌘＋C）：その色を塗った小さな画像としてコピーします。Slackやドキュメントに色見本として貼りたいときや、デザインツールにスウォッチとして持っていきたいときに向いています。
⇧⌘Cでコピーしたテキストの値も、ほかのコピーと同じようにMacのクリップボードに乗ります。複数の色を続けて拾って見比べたいときは、Macでクリップボード履歴を見る方法で紹介しているSpotlightのクリップボード履歴を使うと、直前にコピーした値まで遡って見返せます。
絞りサイズと「位置をロック」（⌘L）で細かい部分を安定して拾う
Digital Color Meterのウインドウには「絞りサイズ」というスライダーがあります。これは読み取る範囲の広さを調整するもので、スライダーを動かすと、1ピクセルだけを厳密に読み取るのか、周辺の色も含めた範囲を読み取るのかを切り替えられます。細かいアイコンの色を正確に拾いたいときは範囲を絞り、グラデーションの中で全体の傾向をつかみたいときは範囲を広げる、という使い分けです。
もうひとつ役立つのが「位置をロック」（⌘L）です。カーソルを目的の位置に合わせたあとで⌘Lを押すと、その位置に読み取り範囲が固定されます。カーソルが少し動いてしまっても数値がぶれないので、値をコピーする直前に位置を確定させておくと安心です。水平方向だけを固定したいときは「Xをロック」（⌘X）、垂直方向だけなら「Yをロック」（⌘Y）を使うと、一直線上を動かしながら色の変化を追うような読み取り方もできます。
まとめ
Digital Color MeterはMac標準のカラーピッカーで、追加のインストールなしに画面上のどんな色でも取得できます。日本語名が用意されていないため英語の「Digital Color Meter」で検索すること、「表示」＞「値を表示」で16進数に切り替えること、そして「sRGBで表示」を選べばCSSの#RRGGBBと同じ値になること——この3点を押さえておけば、Web制作で困る場面はほぼなくなります。
拾った16進コードは、そのままCSSに書き込むだけでなく、Claude Codeに画像からコーディングを依頼するときの指定にも使えます。色を数値で具体的に指定しておくほど、AIまかせにする部分が減り、あとからの手戻りも少なくなります。
AI活用とホームページ制作のご相談
「自分でやるのは難しそう」「まずは相談だけしたい」——どちらでも大丈夫です。
AI活用の進め方から、ホームページ制作・WordPress構築まで、まとめてご相談いただけます。
