Mac標準アプリで!カラーコードを素早く抽出する

webサイトのデザイン手順は人それぞれありますが、
自分の場合はページの顔となるヒーローイメージからデザインを組んでいく…ということが多々あります。

「メイン画像のこの部分の色をポイントとして使いたい!」
「写真の雰囲気とマッチする配色を考えたい!」
「今開いているwebページのカラーコードを手っ取り早く確認したい!」
そんな時に便利なツール【Digital color meter】をご紹介します。

【Digital color meter】はMac OSのデフォルト機能として用意されており、アプリケーション→ユーティリティのフォルダからすぐに使用することができます。

ランチャー画面からもアクセスできます

DigitalColor Meter

「DigitalColor Meter」を選択すると小さなウィンドウが表示され、マウスポインターが置かれた位置の画面の色をRGB値で表示します。

値は10進数/16進数/パーセントのいずれか。
cssでカラー指定する際は16進数で行う場合が多いと思いますので、上部メニューの「表示」→「値を表示」から「16進」を選んで設定しておきます。

カラーコード「#F2C900」がコピーできました

カラーコードで抽出したい部分にマウスポインターを合わせて、コマンド+Shift+Cの同時押しでコピー。
コマンド+Vで、任意のカラーコードが簡単にペーストできます。

Mac OS限定の機能となりますが、とっても便利かつ時短に最適な機能です。
ぜひ使ってみてください。

--- Related Posts

  1. 大阪旅行に行きました

  2. background-imageで指定した画像にアニメーションをつける

  3. 夏に聴きたいラジオ番組

  4. 父にウイスキーを贈るようになりました