Googleで色を調べられるツールがあるって聞いたんですが、どうやって使うんですか？
Google検索に「カラー選択ツール」という機能が組み込まれています。検索するだけで使えて、インストールも登録も不要です。使い方と、逆に「これはできない」というポイントもあわせて解説します。
こんにちは、webディレクター兼個人ブロガー（兼プログラミング講師）のきつねコードです。
「この色のカラーコードが知りたい」「サイトの色を微調整したい」というとき、わざわざツールをインストールしなくても、Google検索だけで解決できます。
今回はGoogleの「カラー選択ツール」の使い方と、実務での活用ポイントをまとめます。
Googleカラー選択ツールとは？検索するだけで使える無料ツール
Googleカラー選択ツールは、Google検索の結果ページに直接組み込まれているカラーピッカー機能です。
アプリのインストールも、会員登録も、拡張機能の追加も一切不要。Google検索さえ使えれば、PCでもスマホでもすぐに使えます。
出し方：検索窓にキーワードを入れるだけ
Google検索の検索窓に、以下のいずれかを入力して検索してください。
- カラー選択ツール
- カラーピッカー
- color picker
検索結果の一番上に、カラーパレットが表示されます。これがカラー選択ツールです。別のページに移動する必要はなく、検索結果の画面がそのままツールになります。
カラーコードを直接入力してもOK
実はもう一つ便利な出し方があります。検索窓にカラーコードを直接入力する方法です。
#ff0000のようにHEXコードを入力rgb(255, 0, 0)のようにRGB値を入力
この方法で検索すると、そのカラーコードの色がセットされた状態でツールが開きます。「このカラーコード、実際どんな色だっけ？」を一瞬で確認できるので、コーディング作業中に地味に便利です。
ぼくはCSSを触っているときに、カラーコードだけ見て「これ何色だっけ」となることがよくあります。そういうときにアドレスバーからそのまま検索して確認できるので、けっこう重宝しています。
Googleカラー選択ツールの使い方
① 色を選ぶ（パレットとスライダー）
ツールの画面は大きく2つのパーツで構成されています。
- 大きな四角いパレット：横方向が「彩度（鮮やかさ）」、縦方向が「明度（明るさ）」。右上に行くほど鮮やかで明るく、左下に行くほどくすんで暗くなります
- 虹色のスライダー：基本となる色相（赤・黄・緑・青・紫など）を選ぶバー
使う手順はシンプルです。まず虹色のスライダーで大まかな色（青系・緑系など）を決めて、次に四角いパレットの中をクリックして明るさと鮮やかさを微調整する。これだけです。
② カラーコードを確認・コピーする
色を選ぶと、画面下部にカラーコードが表示されます。5種類の形式が同時に表示されるので、必要なものをコピーして使ってください。
各コードの入力欄は手入力も可能です。1つのコードを書き換えると、パレットの色も他のコードも自動的に連動して変わります。「RGBの値は分かるけどHEXが知りたい」という変換用途にもそのまま使えます。
5種類のカラーコードの違いと使い分け
表示される5種類のコード、それぞれの役割を整理します。
| 形式 | 表記例 | 主な用途 |
|---|---|---|
| HEX | #4286F4 | Web制作の基本。HTML・CSSで最もよく使う |
| RGB | rgb(66, 134, 244) | 画面表示用。CSSでも使える。透明度も加えたRGBAの元 |
| CMYK | cmyk(73%, 45%, 0%, 4%) | 印刷物用。チラシ・名刺などの入稿データで使う ※ただし簡易変換値なので入稿前に要調整（下記参照） |
| HSV | hsv(219°, 73%, 96%) | 色相・彩度・明度で指定。感覚的な色調整向け |
| HSL | hsl(219°, 89%, 61%) | 色相・彩度・輝度で指定。CSSで使える |
Googleカラー選択ツールで「できないこと」
ここが一番大事なポイントです。便利なツールですが、できないことが1つあります。
スポイト機能はない（画面上の色は抽出できない）
Google検索のカラー選択ツールには、スポイト（アイドロッパー）機能が搭載されていません。
つまり、「このWebサイトで使われているこの色のコードが知りたい」「この画像のこの部分の色を取得したい」といった画面上の色を抽出する用途には使えません。あくまで「パレットから色を選ぶ」「コードを入力して色を確認する」ためのツールです。
ここを勘違いして「Googleのツールでスポイトが使えない」と困っている方が多いので、はっきり書いておきます。
画面から色を抽出したいならChrome拡張機能を使う
「このサイトの色をスポイトで取りたい」という場合は、Chromeの拡張機能（カラーピッカー系）を使うのが正解です。
拡張機能を入れると、Webページ上の任意の場所をクリックするだけでカラーコードを取得できるようになります。Web制作をする人なら、正直これは入れておいた方が作業効率が段違いに上がります。無料で使えるものもあります。
実務での活用シーン
Webディレクターとして、実際にどんな場面で使っているかを紹介します。
WordPressの色カスタマイズ
例えばSWELLなどのWordPressテーマは、管理画面でサイトのメインカラーやボタンの色を設定できます。この設定欄に入れるのがHEXコードです。ただSWELLの場合は、カレーパレットが設定画面に出てくるシーンが多いのでGoogleカラー選択ツールを使うまでもありませんね。このまま管理画面から調整できます。
一方、で追加CSS（もしくはstyle.css）を書くときなどは、Googleカラー選択ツールでパレットを動かしながら理想の色を探して、HEXをCSSの該当箇所にコピーして貼り付けます。
カラーコードの確認・変換
「デザイナーからRGBで色指定をもらったけど、CSSにはHEXで書きたい」というとき、変換ツールとしてGoogleカラー選択ツールが使えます。RGB欄にのみ数値を入れれば、ほかも適用されてHEXが自動で表示されます。
資料・スライドの配色検討
PowerPointやCanvaで資料を作るときも、色の指定にHEXが使えます。「ブランドカラーに近い色をもう1色足したい」というとき、パレットを動かして近い色を探すのに便利です。
よくある質問
スマホでも使えますか？
スマホのGoogle検索でもカラー選択ツールは使えますか？
使えます。ただし画面が小さいぶん、パレットでの細かい色調整はPCの方がやりやすいです。カラーコードの確認だけならスマホで十分です。
選んだ色を保存できますか？
気に入った色を保存したり、パレットとして管理したりできますか？
Google検索のカラー選択ツールには保存機能はありません。シンプルに「色を選んでコードを取る」だけのツールです。複数の色を保存・管理したいなら、Chrome拡張機能かAdobe Colorのような専用ツールを使ってください。
Google内蔵ツールと拡張機能、どちらを使うべき？
結局、どっちを使えばいいんですか？
使い分けです。「色を新しく決めたい・コードを確認したい」ならGoogle内蔵ツールで十分。「既存の画面から色を抽出したい」なら拡張機能が必要です。Web制作をする人は両方使えると強いですが、たまにしか色を触らない人なら、Google内蔵ツールだけで事足りると思います。
まとめ
Googleカラー選択ツールについて整理しました。
インストール不要・無料・すぐ使えるという意味で、非常に優秀なツールです。「ちょっと色を確認したい」というときの選択肢として覚えておくと便利です。
画面上の色をスポイトで抽出したい方は、こちらの記事もあわせてどうぞ。
