.png)
ロゴマークの色に合わせたいな。
うちの会社ロゴマークのカラーコードってなんやろ、調べたろ。
って思うことがあったので、カラーコードの調べ方を記します。
たまにしか使わないことって、残しておかないと毎回調べる羽目になってしまう。
❚目次
❚WEBサイトの表示画面から調べる方法
❚画像ファイルから調べる方法
❚まとめ
❚後記
❚WEBサイトの表示画面から調べる方法
Google Chromeで目的のサイトを開き、F12（もしくは右クリック＞検証）をクリック。
右側に出てきたデベロッパーツールにあるStylesタブ内で、colorのcssでカラーコード前に表示されている色を示した四角をクリック。
カラーピッカーが開くので、中ほど左にあるスポイトアイコンをクリック。
変更されたマウスカーソルで、カラーコードを知りたい色の部分をクリック。
カラーピッカーのスポイトアイコンの下に表示された文字列がカラーコードです。
こちらの方法、Chromeの画面外に対しても使えます。
今調べたら同じロゴでもノートパソコンの画面とサブディスプレイとではカラーコードが違う…
ディスプレイによって異なるのか。なんてことだ。
❚画像ファイルから調べる方法
いずれもブラウザで利用でき、使い方はほぼ一緒。
ブラウザ上で該当ファイルを選択
表示された画像からカラーコードを知りたい色の部分をクリック。
❚まとめ
今回は資料作成時に使う色をサッと調べたいという目的で調べた方法です。
あくまで表示されている色のカラーコードを知ることができるだけなので、上述したようにディスプレイの機種や設定によっては、同じものを参照しても異なるカラーコードになる場合があります。
弊社はデザイナーがいないので、ロゴマークの正しいカラーコードなんて管理されてなさそうだなあ。
ロゴマークのPSDファイルは見たような気がするから、ちょっくら覗いてみようかしら。
果たしてあのPSDファイルも信用できるのかは疑問が残るところだけど。
❚後記
Google Chromeの拡張機能を追加することで使えるカラーピッカーもたくさんあります。
弊社のルールで拡張機能の追加ができないのと、たまにちょっと使いたいだけなのでわざわざ拡張機能を追加するほどではないということから今回ははぶきました。
ググればChrome拡張機能のおすすめカラーピッカーの記事はたくさん出てくるので、興味のある方は好みのカラーピッカーを探してみてください。
コメント
コメントを投稿