• メニュー
  • メニュー

【サイトの色を調べる】16進数カラーコードを取得する方法(ColorPick Eyedropper)

閲覧しているページの文字や写真、背景の色がいいな!って思ったときに、簡単にそのサイトの色を調べる方法をご紹介します。ColorPick EyedropperというGoogle Chromeの拡張機能を使えば、16進数のカラーコードを簡単に取得できます。

ブラウザ機能だけで「この色は何色?」というのが簡単に解決できますよ。覚えておいて損なし!


サイトの色を調べる方法について

サイトの色を調べるためにGoogle Chromeのブラウザの拡張機能を使用します。

拡張機能はブラウザに新しい機能を追加できるもので非常に便利です。パスワードを覚えてもらう拡張機能だったり、全タブ1クリックで更新したりなど、いろいろな拡張機能があります。

Google Chromeの拡張機能を追加しよう

「ColorPick Eyedropper」という拡張機能を利用します。以下のリンクから追加するのが簡単です。

ColorPick Eyedropperの追加

このページから

【サイトの色を調べる】16進数カラーコードを取得する方法(ColorPick Eyedropper)

「Chromeに追加」をクリックして追加をすると、以下のようにURL表示欄の右側に4色のアイコンが表示されます。これがColorPick Eyedropperになります。

サイトの色を調べる方法

ColorPick Eyedropperの使い方

追加されたアイコンをクリックすると、カーソルが+の形に変わります。ブラウザ上の色のついた好きなところにカーソルを合わせると「16進数カラーコード」、「HLS色空間」、「RGBカラー」が表示され、カーソルを合わせた部分がアップされます。

アップされるので細かい部分まで調べることができます。

使い方手順

  • アイコンをクリックする
  • カーソルが十字+になるので調べたり色にカーソルを合わせる
  • 合わせた場所の色が表示されるので左クリックする
  • 表示されたカラーコードをコピーする

この手順となります。これ以上は特にありません。あるとしたらちょっとした設定のみです。


ColorPick Eyedropperの設定

設定は特に利用する必要はないと思いますが、、、する場合は、色をクリックして色要素が出た時に歯車マークをクリックすることでできます。


別タブで以下のページが開きます。

日本語もちょいちょい編で、英語も混ざっていて完璧ではない設定ページです。

  • メニューの大項目としては、以下3つになります。
  • 歴史 → 変な日本語ですが、履歴になります。
  • オプション → ここがメインの設定です。
  • 高度なオプション → あまり触らないで良いと思います。

設定をいじくるとしたら2番目のオプションになります。(と思います) チェックを外して「オプション保存」をして設定を保存します。

  • ポップアップがクリックされるたびに色を選択し始める
  • ズームプレビューはピクセル化されています
  • Show hexadecimal
  • Show zoom preview near cursor while picking
  • Also show Hex, RGB and/or HSL (configure above)
  • 非アフィリエイトリンクの所属を無効にする
  • 使用統計を収集する(利用規約を参照)
  • 日統計の色(使用条件を参照)
  • Disable extension removal survey after uninstall

個人的にはデフォルトが一番使いやすいと思います。


まとめ:

この機能を覚えれば、Wordpressのサイトやブログなどでも簡単に、背景色や文字色を好きな色に変更することができます。

Appleなどデザイン性の高いページがどんな色を使っているかなど調べることも勉強になります。Yahoo!JAPANの赤色は、楽天の赤色は、Paypayの赤色はなどいろいろ見てみると面白いですよ。

サイト上の色のカラーピッカーではなく、普通にRGBなどのカラーコードを調べたい時は、Googleがブラウザで提供しているものが使いやすいです。

color pickerとGoogle検索してみてください。

検索結果上で、カラーコードを調べることができるので非常に便利です。

   

有益情報も流しているのでツイッターもぜひフォローお願いします。


                   
参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です