Macで画面の色のカラーコードを取得する方法
デザインやサイトで見た色を、コードでそのまま知りたいことがあります。Macには最初から道具があります。
デザインで見たオレンジが正確にどの値なのか知りたいことがあります。スクリーンショットを撮って Photoshop で開くのは大げさです。
Digital Color Meter
アプリケーション → ユーティリティ → Digital Color Meter に最初から入っています。
- 起動するとカーソル周りが拡大されて表示されます。
- 色を知りたいピクセルの上へ動かします。
- ⇧⌘C で値をクリップボードにコピーします。
表示形式は表示メニューで RGB や16進数などに変えられます。既定が sRGB とは限らないので、Web に使う値なら表示 → 値を表示 → sRGB としてを確認しておくと安心です。
拡大率は ⌘+・⌘- で調整します。外しやすい小さなアイコンは倍率を上げると正確になります。
Floatieの色の抽出
Floatie はキャプチャしたショットの上でそのまま色を拾います。ショットの隅のコーナーボタンに色の抽出を割り当てておけば、クリック1回でピクセルの色をクリップボードに入れます。ショートカットは ⌃⌥C です。
デザインをショットとして浮かべたまま色を拾う流れが自然です。元のウインドウを前に出す必要がなく、同じショットから続けて複数の色を拾えます。
試してみる
ショットのボタンを押してみてください
⌘C クリップボード
左上 · ゴースト
クリックは画像を透過します
値が違って見えるとき
同じ色なのに値が違うことがあります。たいていはカラープロファイルです。
- ディスプレイが P3 なのに sRGB の値を期待していると食い違います。メーターの表示形式を sRGB に合わせます。
- スクリーンショット経由で拾うとその画像のプロファイルに従います。画面から直接拾うほうが元に近いです。
- 半透明のレイヤーの上で拾うと合成後の色が出ます。実際の値が要るなら、その要素だけが見える状態で拾います。
値を1つ確かめるのにアプリを開き直す必要はありません。よく使うならコーナーボタンに置いておくのがいちばん速いです。
浮かぶ準備はできましたか？
14日間、すべての機能を無料で使える。その後は、買い切り購入でFloatie Proを使い続けるか、月額または年額プランで同じように使いながらFloatie Link Proを追加できる。