シェアする

Macで画面の色のカラーコード調べるなら「Digital Color Meter」が便利

スポンサーリンク

ブログを運営していると、例えばキーカラーを決めて背景やメニューの色を統一したいという欲が出てきたりします…。

でも、画面の色見てもカラーコード(色を出力するコードのこと)が分からない。。

Windowsだったらやり方知っているのですが、Macで画面の色のカラーコードの調べ方はネットで検索してもいまいち解決法が分からず、放置してました。

しかし、今日あっさり解決してしまいました!

これはMacを使用している方向けの記事にはなりますが、紹介していきます。

Windowsをお使いの方は、無料ツールの「FE – Color Palette」がおすすめ。

これも機会があれば、また記事にしたいと思います!

Macに基本機能として実装されていた

まさかの、Macで画面の色のカラーコードを調べられない問題は、Macの基本機能で解決してしまいました。

それが「Digital Color Meter」というツールになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-22-21-34-58

場所は、[Finder]→[アプリケーション]→[ユーティリティ]にあります。

こんな場所にあったら、絶対に分からないですね(汗)

「Digital Color Meter」の使い方

使い方はいたってシンプル。

ダブルクリックをして起動をさせて、カラーコードを取得したい画面にカーソルを合わせるだけ。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-22-21-40-16

すると、このようにコードが表示されます。

このままだと、10進法(138など3桁のもの)なので、「#FFFFFF」といった16進法のカラーコードに表示形式を設定から変更する必要があります。

スポンサーリンク

16進法に表示を変更するには?

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-22-21-43-44

メニューの[表示]→[値を表示]→[16進]を選択します。すると・・・

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-22-21-45-39

これで16進法に表示が変更されました。

他のサイトでこのコードをそのままコピーできる方法があると書いてあって試したのですが、上手くいかなかったので、僕はこれを見て直打ちしました。

ちなみに最初、僕もこれの見方が分からなかったのですが、これの読み方は・・・

「#8A8180」で、最初の”0x”は省いて、後ろ2桁を上から順番に全部くっつけましょう!

スマホ表示ではビミョーに色味が違う

実は、スマホで表示される場合、実はビミョーに色味がPCと異なります。

スマホとパソコン別々で適用させたいという場合、スマホ用のカラーコードもコピーしておきましょう。方法は以下。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-22-21-50-19

[ネイティブの値を表示]→[sRGBで表示]に変更するだけ。

これでスマホ用のカラーコードがコピーできます。

 まとめ

Macで画面の色のカラーコードを調べたいという場合に、ぜひ活用してみてください!!

すぐにできるし、本当に便利なので。

こちらの記事もあわせていかが??

スポンサーリンク
The following two tabs change content below.
俵谷 龍佑

俵谷 龍佑

新卒入社から半年で社内失業に。社会不適合を自覚して2015年4月に独立。チームで働くのが苦手でWebを使って「マイクロ起業」を実践中。 ライター/ブロガー。音楽×地域活性×ITでオモシロイことを仕掛けるべく、音楽イベント団体「Musicrowd」を運営中。

シェアする

よく読まれている記事はこちら
LINE@の登録はこちらから!

登録はこちらからどうぞ↓

友だち追加

Twitterでも情報発信しています