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」アプリを起動した画面です。
ウィンドウの左側に、マウスカーソルの位置の周辺画像が表示されます。
ウィンドウの右側に、カーソル部分の色と、その色の数値が表示されます。
G: 31
B: 3
これが、現在の色の数値です。
画像表示を拡大
マウスカーソル周辺画像を拡大表示します。
メニューの「表示」「拡大」から倍率を選びます。
ここでは「8x」を選択して、8倍で表示してみます。
マウスカーソルの周辺画像が、8倍で表示されました。
細かい位置の色を指定する時は、倍率表示をしたほうが、便利です。
16進法で表示する。
16進法のカラーコードの表示方法です。
メニューの「表示」「値を表示」から、「16進」を選びます。
これで、HTMLなどで一般的に使われる、16進法によるカラーコードに切り替わります。
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」で「位置をロック」
- 他のアプリでペーストしてカラーコードを使う。
お気に入りの「色」をカラーコードでメモしておきましょう。
