WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： トレンド >サービス紹介

フォトショップやイラストレーターを使わずにWEBページ内の色を調べたいと思ったことはありませんか？WEB製作者の方であればデベロッパーツール内のカラーピッカーを使われている方も多いかと思います。
今回はそれ以外の方法で簡単にブラウザ内で色を確認するツールをご紹介します。

Chrome拡張機能のカラーピッカー

まずは、Google Chromeの拡張機能の中でおすすめのカラーピッカーをご紹介します。 普段のブラウザにChromeを使用している方におすすめです。

ColorZilla

こちらはフォトショップに似た操作感で色を拾うことが出来るカラーピッカーです。知りたい色の場所にカーソルを合わせてクリックすると、その上の黒いバーに情報が表示されます。クリックと同時にクリップボードにも保存されます。ブラウザ外の色も選択可能です。
また、カラーアナライザーなど様々な機能が備わっており、とても多機能なカラーピッカーです。

ColorPick Eyedropper

こちらの拡張機能は、まずページのスクリーンショットが作成され、スポイトでクリックした箇所の色情報がそこから取得されるという仕組みのカラーピッカーです。スポイトする際にピクセル単位で拡大されるため、細かい部分の色選択がしやすいです。また、先ほどご紹介した『ColorZilla』が多機能であるのに対し、こちらは機能がシンプルです。この部分のこの色情報だけを、すばやく簡単に知りたいという方におすすめです。

カラーピッカーWebツール

次にどのブラウザでも使用出来るwebツールをご紹介します。

イメージカラーピッカー

SYNCER(シンカー)というサイトで提供するイメージカラーピッカーです。画像をアップロードすると、使われている色が一覧で表示されます。また、知りたい色の部分をクリックすると、自動で色番号をメモしてくれます。日本語表記で使いやすく、スマホにも対応しています。

IMAGECOLORPICKER.com

こちらは英語表記のカラーピッカーです。画像をアップロードするだけで色の取得ができ、シンプルな操作で完了するため問題なく使えます。ピクセル単位で色を抽出出来るため細かい箇所の色を知りたい時は便利です。また、画像に使われている色を自動的にパレット化してくれます。

まとめ

以上カラーピッカー４選をご紹介いたしました。拡張機能やwebサイトで使えるものなど種類も様々ですので、ぜひご自分の使いやすいものを見つけてみてください。