Web制作をしていると、ちょっとした色のコードを確認したいだけなのに、わざわざPhotoshopやIllustratorを立ち上げるのが地味に面倒…と感じたことはありませんか。私も「この色のHEXだけ知りたいのに」という場面で、重い画像編集ソフトの起動を待たされてイライラすることがよくありました。
そんな時に頼りになるのがGoogle検索です。実はGoogleで検索するだけで、その場でカラーピッカーが使えるんです。ソフトいらずでサッと色を選べるので、一度知るとかなり手放せなくなります。
関連記事：SVGファイルを初めて設定する時につまずきやすいポイント！リンクの設定とカラーの変更方法
Googleで「カラーピッカー」を使う方法
やり方はとても簡単で、Googleで「カラーピッカー」または「color picker」と検索するだけです。
検索すると検索結果の一番上にカラーピッカーが表示されます。あとはPhotoshopなどと同じ感覚で、スライダーやパレットをぐりぐり動かせば好きな色を選べます。
選んだ色は、その場でHEX・RGB・HSL・HSV（HSB）といった形式で値が並んで表示されます。たとえばHEXで表示された値を見ながら、同時にRGBの数値も確認できるので、それぞれの形式を相互に変換する用途にもそのまま使えます。「この色のHEXは分かるけどRGBだといくつ？」といった変換もこの画面だけで完結します。
さらに便利なのが、値の入力欄に手持ちのカラーコードを打ち込めば、その色をピッカー上で再現してくれる点です。記事を書いた当初は「コードを入力して色を出せたら最高なのに」と書いていたのですが、今ではしっかりその機能が備わっていました。手元のHEXを貼り付けて、そこから少しだけ明るさを調整する、といった使い方ができます。
ブラウザの開発者ツールにもカラーピッカーがある
もう一つ覚えておくと便利なのが、ChromeやFirefoxの開発者ツール（DevTools）に入っているカラーピッカーです。
Webページ上でF12キーを押して開発者ツールを開き、CSSの色を指定している箇所（colorやbackgroundなど）の横に出る小さな色のマスをクリックすると、カラーピッカーが立ち上がります。ここではスポイトで画面上の任意の色を吸い取れるので、今表示されているページの色をそのまま拾いたい時に重宝します。実際のデザインを確認しながら色を微調整できるのは、制作現場でかなり効きます。
使い分けると色まわりの作業がぐっと楽になる
ざっくり整理すると、こんな使い分けが私のおすすめです。
- とにかく手早く色を選んでコードを知りたい → Google検索のカラーピッカー
- HEXやRGBなど形式を変換したい → Google検索のカラーピッカー（値が横並びで確認できる）
- 今見ているページの色をスポイトで拾いたい → 開発者ツールのカラーピッカー
画像編集ソフトを起動しなくても、ブラウザだけでここまでできてしまいます。色のコードでちょっと迷ったら、まずはGoogleで「color picker」と検索してみてください。想像以上にサクサク進むはずです。
