Mac、iPhone、iPad

アップル製品の悩み解決!

Macでカラーコードをコピー、画面の色の数字の調べ方「Digital Color Meter」標準アプリ

   

Macの画面に表示されている色と、同じ色を使いたい。

Macの標準アプリ「Digital Color Meter」を使って、画面に表示されている色のカラーコードを調べる方法です。

「Digital Color Meter」

画面の色の調べ方は、Macの標準アプリ「Digital Color Meter」を使います。

Macの画面の色の数値を調べるアプリ

  • 画面の色を、ウェブサイト制作で使いたい。
  • 画面の色を、プレゼンのスライド作成で使いたい。

ウェブサイトを見ている時に、気に入った色を、自分のプレゼン資料などに使いたい時ってありますよね。
そんな時に使うのが、Mac標準アプリの「Digital Color Meter」です。

Launchpadの中から、「Digital Color Meter」のアイコンを探して起動します。
アプリのアイコンが、見つからない時は、Finderのメニュー「移動」「ユーティリティ」から探してください。



DigitalColorMeterアプリの使い方

「Digital Color Meter」アプリを起動した画面です。

ウィンドウの左側に、マウスカーソルの位置の周辺画像が表示されます。
ウィンドウの右側に、カーソル部分の色と、その色の数値が表示されます。

R: 31
G: 31
B: 3

これが、現在の色の数値です。

画像表示を拡大

マウスカーソル周辺画像を拡大表示します。

メニューの「表示」「拡大」から倍率を選びます。
ここでは「8x」を選択して、8倍で表示してみます。

マウスカーソルの周辺画像が、8倍で表示されました。
細かい位置の色を指定する時は、倍率表示をしたほうが、便利です。

16進法で表示する。

16進法のカラーコードの表示方法です。

メニューの「表示」「値を表示」から、「16進」を選びます。
これで、HTMLなどで一般的に使われる、16進法によるカラーコードに切り替わります。

R: 0x1F
G: 0x1F
B: 0x03

色の数値の表示が、切り替わりました。
この「0x」が、16進法表示の記号です。
この色のカラーコードは、「#1F1F03」です。

カラーコードをコピーする。

カラーコードの数値をコピーする方法です。

メニューの「カラー」「カラーをテキストでコピー」を選びます。
これには、ショートカットキーがあり、「command + shift + C」の3つのキーの同時押しが、割り当てられています。

選択した位置をロックする。

マウスカーソルで選択した色を固定したい時には、選択した位置をロックできます。

メニューの「表示」「位置をロック」を選びます。
これには、ショートカットキーがあり、「command + L」の2つのキーの同時押しが、割り当てられています。

横方向だけを固定する「Xをロック」、縦方向だけを固定する「Yをロック」の機能もあります。

実際にカラーコードを使ってみる。

実際に、カラーコードを他のアプリで使ってみます。

マウスカーソルの位置のカラーコードは、「#FFD95F」です。
この状態で、「command + shift + C」の3つのキーを同時に押して、「カラーをテキストでコピー」します。

「command + L」の2つのキーを同時に押して、「位置をロック」した後に、メニューの「カラー」「カラーをテキストでコピー」を選択しても同じカラーコードがコピーできます。

カラーコードをメモする。

次に、メモに貼り付けてみます。

メモにペーストすると、カラーコードが記入できました。

この方法を使うと、ウェブサイトなどを見ていて、気になった色のカラーコードを、テキストとして、メモしておくことができます。

カラーパネルにカラーコードを入力する。

Keynoteのスライドで使ってみます。

Mac標準のプレゼンアプリの、「Keynote」です。
カラーパネル」にカラーコードを入力すると、指定の色が表示できます。

「カラーパネル」は、「Keynote」だけじゃなく、Macアプリで共通して使います。
ワープロの「Pages」、表計算の「Numbers」、動画編集の「iMovie」や「FinalCutProX」などでも使います。

カラーコードの仕組み

コンピューターで色を表示するカラーコードの仕組みです。

RGBカラーモデル

RGBカラーモデルとは、Red・Green・Blue、赤緑青の3色で色を表現する方法です。

赤緑青の3色それぞれに、0から255までの数値を割り当てて、一つの色を表現します。

  • 黒(0,0,0)
  • 白(255,255,255)
  • 赤(255,0,0)
  • 緑(0,255,0)
  • 青(0,0,255)

カラーコード、RGBを16進法の数字で表記

16進の数値で表示されます。

カラーコードとは、色のRGB値を16進法で表記した文字列のことです。
HTMLでは、RGBカラーコードは、先頭に「#」をつけて、「#FF0000」と短縮されて書かれます。

16進法

普段の日常生活で使用する数字は「10進法」です。9の次に桁が上がる数字の仕組みです。

「16進法」では、15の次に桁が上がる数字の仕組みです。

10進法の1から9までは、16進法でも同じ数字での表記です。
10進法の10は、16進法では「A」とアルファベットで表記します。
10進法の16は、16進法では「10」で、10進法の31は、16進法では「1F」です。
10進法の255は、16進法では「FF」となります。

16進法は「0x」、8進法は「0」で識別します。

16進法の数字を「0x1F」と、コンピューター分野では、書くことがあります。

この「0x1F」の、先頭の「0x」とは、16進法で表記していることの記号で、数字の「0ゼロ」と、16進法という英語「Hexadecimal」の「x」の組み合わせです。

コンピューターの分野では、古くから、16進法の識別に、この「0x」の記号が使われてきました。
つまり、「0x1F」は16進法の数字で、10進法で表すと「31」になります。

ちなみに、8進法は、先頭に「0ゼロ」をつけて識別します。
つまり、コンピューター分野では、「011」は8進法の数字で、10進法で表すと「9」になります。

カラーコードの例

代表的な色のカラーコードの具体例です。
  • 黒、#000000、(0,0,0)
  • 白、#FFFFFF、(255,255,255)
  • 赤、#FF0000、(255,0,0)
  • 緑、#00FF00、(0,255,0)
  • 青、#0000FF、(0,0,255)

まとめ、Macで画面の色のカラーコードを調べる方法

Macの標準アプリ「Digital Color Meter」を使います。
  • DigitalColorMeterの使い方
  • マウスカーソル周辺画像を拡大表示
  • 16進法のカラーコードの表示
  • 「⌘ + shift + C」で「カラーをテキストでコピー」
  • 「⌘ + L」で「位置をロック」
  • 他のアプリでペーストしてカラーコードを使う。
お気に入りの「色」をカラーコードでメモしておきましょう。

 - Mac