閲覧しているページの文字や写真、背景の色がいいな！って思ったときに、簡単にそのサイトの色を調べる方法をご紹介します。ColorPick EyedropperというGoogle Chromeの拡張機能を使えば、16進数のカラーコードを簡単に取得できます。
ブラウザ機能だけで「この色は何色？」というのが簡単に解決できますよ。覚えておいて損なし！
サイトの色を調べる方法について
サイトの色を調べるためにGoogle Chromeのブラウザの拡張機能を使用します。
拡張機能はブラウザに新しい機能を追加できるもので非常に便利です。パスワードを覚えてもらう拡張機能だったり、全タブ1クリックで更新したりなど、いろいろな拡張機能があります。
Google Chromeの拡張機能を追加しよう
「ColorPick Eyedropper」という拡張機能を利用します。以下のリンクから追加するのが簡単です。
このページから
「Chromeに追加」をクリックして追加をすると、以下のようにURL表示欄の右側に4色のアイコンが表示されます。これがColorPick Eyedropperになります。
ColorPick Eyedropperの使い方
追加されたアイコンをクリックすると、カーソルが＋の形に変わります。ブラウザ上の色のついた好きなところにカーソルを合わせると「16進数カラーコード」、「HLS色空間」、「RGBカラー」が表示され、カーソルを合わせた部分がアップされます。
アップされるので細かい部分まで調べることができます。
使い方手順
この手順となります。これ以上は特にありません。あるとしたらちょっとした設定のみです。
ColorPick Eyedropperの設定
設定は特に利用する必要はないと思いますが、、、する場合は、色をクリックして色要素が出た時に歯車マークをクリックすることでできます。
別タブで以下のページが開きます。
日本語もちょいちょい編で、英語も混ざっていて完璧ではない設定ページです。
- メニューの大項目としては、以下３つになります。
設定をいじくるとしたら2番目のオプションになります。(と思います) チェックを外して「オプション保存」をして設定を保存します。
個人的にはデフォルトが一番使いやすいと思います。
まとめ：
この機能を覚えれば、Wordpressのサイトやブログなどでも簡単に、背景色や文字色を好きな色に変更することができます。
Appleなどデザイン性の高いページがどんな色を使っているかなど調べることも勉強になります。Yahoo!JAPANの赤色は、楽天の赤色は、Paypayの赤色はなどいろいろ見てみると面白いですよ。
サイト上の色のカラーピッカーではなく、普通にRGBなどのカラーコードを調べたい時は、Googleがブラウザで提供しているものが使いやすいです。
「color picker」とGoogle検索してみてください。
検索結果上で、カラーコードを調べることができるので非常に便利です。
コメント・質問する