Web制作中にカラーコードが気になることってありますよね。
ラフデザインや参考サイトの一部のカラーコードを調べるために、Chromeの拡張機能やPhotoShopを使う必要はありません。Macユーザー向けですが、標準機能のみで画面上のカラーコードをすぐに抽出できます。
今回はその操作方法をご紹介いたします。
Mac内蔵アプリ「Digital Color Meter」を使う
Macの標準機能で実装されている「Digital Color Meter」を使えば、簡単にカラーコードを抽出できます。
Spotlightやランチャーアプリ（command+スペースキー）を使って「color」と検索してください。
「Digital Color Meter」というアプリケーションがヒットしますので、起動します。
あとは、任意の箇所にカーソルを持っていけばOKです。
▲開発者ブログがつくれるWordPressテーマ「NULL」での例
ブラウザ上・画像データ上を問わず、画面上どこからでもカラーコードを瞬時に抽出できます。
あとは、（command + Shift + C）でコピーすれば、すぐに同じ色を再現可能です。
「Digital Color Meter」の便利なオプション
抽出される値やコピー形式などを選べるオプションがあります。それぞれご紹介いたします。
抽出される値の形式
初期設定ではカラーコードは10進数で抽出されますが、次の中からお好みで変更可能です。
- 10進数（R:255 G:255 B:255など）
- 16進数（#ffffffなど）
- パーセント（R:100% G:100% B:100%など）
画面左上のツールバーの「表示」＞「値を表示」から変更できます。
Web制作で使われることの多い、16進数に設定しておくと便利です。「#ffffff」という形で出力されます。
カラーのコピー形式
カラーのコピー形式は以下の2タイプを使えます。
- カラーをテキストでコピー（command + Shift + C）
- カラーをイメージでコピー（command + option + C）
画面左上のツールバーの「表示」＞「カラー」から変更できます。
CSSにカラーコードをコピペする際など、基本的にはテキストでコピーしてご活用いただけます。
一方、「カラーをイメージでコピー」はメールで第三者に共有する際などにご活用いただけます。
上記のようにカラーサンプルが出力されるので、直感的に色味のイメージが湧きますね。
まとめ
Macユーザー向けに画面上のカラーコードを確認する方法をご紹介いたしました。
ブラウザや画像ファイルを問わず、画面上のどこからでも確認できる点が便利です。
純粋に「ここのカラーコードを知りたい」という目的を瞬時に達成できます。
サイト全体の配色や組み合わせなどを探したい時は、下記記事でご紹介しているツールをご活用ください。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...
コメント