Tack+

Mac のカラーピッカー:色を拾って、そのコードをコピーする

· 約 4 分で読めます


Web サイトやモックアップ、写真の中の色。そのコードを知りたいとき、macOS にはそのためのシステム全体のショートカットはありませんが、道具はそろっています。画面上のどのピクセルでも色を拾って 16 進コードをコピーする方法を、いちばん手作業の方法から、いちばん速い方法まで紹介します。

要点

  • Digital Color Meter(アプリケーション › ユーティリティ):色の上にポインタを置き、⇧ ⌘ C で値をテキストとしてコピー。
  • 16 進数で表示するには:表示 › 値を表示 で 16 進数を選びます。Web 用の色なら、色空間は sRGB を選びましょう。
  • macOS のカラーパネルを開くアプリ(テキストエディット、Pages、Keynote)なら、パネルのルーペで画面上のどこからでも色を拾えます。
  • Tack+:スポイトを 1 回クリックし、ピクセルを 1 回クリックするだけで、#RRGGBB のコードがクリップボードに入ります。

Digital Color Meter を使う

Digital Color Meter はどの Mac にも入っていて、アプリケーション › ユーティリティ にあります。ポインタの下にある色を、常に表示し続けます。

  1. Digital Color Meter を開き、ポップアップメニューで色空間を選びます。Web やアプリで使う色なら、sRGB です。
  2. コードを 16 進数で読むには:表示 › 値を表示 で 16 進数を選びます。
  3. 目的の色にポインタを合わせ、マウスを動かさずに カラー › カラーをテキストでコピー を選ぶか、⇧ ⌘ C を押します。

便利なショートカットが 2 つあります。⌘ L で色を取り込む範囲(絞り)の位置を固定でき、そのあとはポインタを動かせます。⌥ ⌘ C では、色を画像(小さな正方形の見本)としてコピーします。

難点は、アプリを開いて狙いを定め、ショートカットを押すあいだポインタを静止させておく必要があることです。また、値は色空間によって変わります。同じピクセルでも、sRGB と P3 では違うコードになります。

macOS のカラーパネルを使う

システムのカラーパネルを開くアプリ、たとえばテキストエディット(「フォーマット」›「フォント」›「カラーパネルを表示」)、Pages、Keynote などでは、パネルのルーペで画面上のどこからでも色を拾えます。続けて「カラーつまみ」で RGB を選ぶと、その色の 16 進コードが表示され、選択してコピーできます。

すでにそうしたアプリを使っているなら便利ですが、コードだけが欲しいときには回り道です。

Tack+ ならワンクリック

Tack+ は、あなたの Mac を画面の端の細いラインにしまい込みます。カーソルを端に押し当てると、パネルが開きます。そのツール列に、スポイトがあります。

  1. パネルを開いて、スポイトをクリックします。
  2. macOS のルーペが表示されるので、画面上のどこでも、目的のピクセルをクリックします。
  3. コードが大文字の 16 進数(#F5F0E6)でコピーされます。⌘ V でペーストしましょう。

ほかのコピーと同じく、このコードも Tack+ のクリップボード履歴に加わります。昨日拾った色もそこに残っていて、ブランドパレットの色はピン留めしておけます。

同じツール列には、範囲を選んで撮るスクリーンショット、フォーカスタイマー、メモ帳もあります。

3 つの方法を並べて比較

Digital Color MetermacOS のカラーパネルTack+
始め方ユーティリティでアプリを開くカラーパネルのあるアプリを開くカーソルを端に押し当てる
色の取り込み狙いを定めて ⇧ ⌘ Cルーペでクリックルーペでクリック
16 進コードあり(設定が必要)あり(RGB で表示)あり(すぐにコピー)
色の履歴—手動で保存した色クリップボード履歴に残る

よくある質問

Mac に標準のカラーピッカーはありますか?

はい。「アプリケーション」›「ユーティリティ」にある Digital Color Meter が、ポインタの下の色を読み取ります。また、macOS のカラーパネルには、それを使うアプリで色を拾えるルーペがあります。

Mac で色の 16 進コードをコピーするには?

Digital Color Meter で値を 16 進数表示にし(「表示」›「値を表示」)、色の上にポインタを置いて ⇧ ⌘ C を押します。Tack+ なら、スポイトをクリックしてからピクセルをクリックするだけで、#RRGGBB のコードが直接コピーされます。

同じピクセルなのに、コードが違うのはなぜ?

コードは色空間によって変わるからです。Digital Color Meter では、ディスプレイのネイティブの値、sRGB、P3 などを表示できます。Web 用なら、sRGB で読み取りましょう。

Tack+ のスポイトは、画面上のどこでも使えますか?

はい。macOS の色を取り込むルーペを使うので、どのアプリの、どのピクセルでも使えます。

関連ガイド

すべてのガイド (15)