生活

Googleの「カラー選択ツール」の使い方｜検索方法や基本的な使い方を解説【Google活用基本のき】

2023/6/26

ホームページなどを作成するときに無視できないのが、“色”のこと。CSSを入力して色を試してみるも、絵の具やスポイトを使うように直感的にはできず、やりにくさを感じることがあるかもしれません。そんな時に役立つのが、カラー選択ツールです。

カラー選択ツールを使えば、より直感的に多様な色を指定することが可能です。Googleでも、カラー選択ツールが提供されています。この記事では、Googleの検索で使えるカラー選択ツールについて解説します。

目次
そもそもカラー選択ツールとは？
Googleの検索でカラー選択ツールを使う
 どんな時にカラー選択ツールを使う？
最後に

そもそもカラー選択ツールとは？

そもそもカラー選択ツールとは、デザインや開発などの現場で広く使用されているツールのこと。パレットのように、色を選択できるのが特徴です。こういったカラー選択機能は、ペイントやPhotoshopなどの有名な画像編集ソフトにも搭載されています。

使い方としては一般的に、カーソルを移動させて任意の色を選びます。また、色相などを調整してさまざまな色を作り出すことも可能です。選択した色のコードはコピーして、CSSなどに貼り付けたりすることで利用できます。

なお、カラー選択ツールを操作していると「RGB」や「HEX」といったカラーコードを目にすることがあるかもしれません。これらの用語についても確認しておきましょう。

「HEX」は６桁（２文字３組）の16進数で色を表現するものです。例えば「#eb4034」と記載します。「#」の後に0から9、AからFが続くことで色を表すものです。16進数のカラーコードを使用することで、人間が知覚できると考えられている範囲を超えて1,600万以上の固有色を表示することができます。ウェブサイトで色を指定する時に、よく出てくる形式です。

「RGB」は光の三原色「Red（赤）・Green（緑）・Blue（青）」のこと。モニターやデジタルカメラなどでは、この形式で色を表現しています。R・G・Bのそれぞれは10進数による指定で、256段階に指定できるので、理論上は256×256×256＝16,777,216通りの色を再現できるということになります。「86,186,209」というように表記します。

「CMYK」は、Cyan（シアン）・Magenta（マゼンタ）・Yellow（イエロー）・Key plate（キープレート、黒）の頭文字をとって表したものです。印刷物でよく用いられ、表記には「99%,0%,58%,1%」というようにパーセントが使われます。

「HSV」は、Hue（色相）・Saturation（彩度）・Value（明度）という３つの数値の組み合わせで色を表現したもので、「HSV色空間」と呼ばれたりもします。人間の感覚に近い指標を利用しているので、想像したような色を選びやすいという特徴があります。形式は「145°,99%,99%」というように表記します。

「HSL」は、Hue（色相）・Saturation（彩度）・LightnessまたはLuminance（輝度）の３つの数値の組み合わせで色を表現する形式です。「HSV」に似ていますが、彩度の高い色の場合、HSLでは輝度を100%に近づけると白っぽくなり、HSVの明度は100%の時に純色となるという違いがあります。形式は「145°,99%,99%」というように表記します。

Googleの検索でカラー選択ツールを使う

では、実際にGoogleの検索からカラー選択ツールを使ってみましょう。呼び出し方はとても簡単。Googleの検索で、「カラー選択ツール」「カラーピッカー」などと入力すると、検索結果一覧に「カラー選択ツール」というものが出てきます。

このカラー選択ツールのように、Googleの検索には一般的に「隠しコマンド」と呼ばれるものが存在し、カラー選択ツール以外にもサイコロ、ハンドスピナー、三目並べ、チューナーなどが用意されています。役に立つツールから面白いゲームにいたるまで、いろいろな種類があるので、気になる方は調べてみてください。

さて、パレット（右側）の任意の場所をクリックすると、そこに白い丸が移動し、指定した色が左側に表示されます。また、色の変化に合わせてパレットの下にある「HEX」「RGB」「CMYK」などの項目の数値も変化。それぞれの項目の数値は編集もできるので、細かい色の調整も可能です。さらには、数値も普通のテキストのようにコピーできるので、CSSの編集作業をしている時などに重宝することでしょう。

他にも、赤・青・緑・黄と色相を変えたい場合は、パレットの下にスライダーがあるので、これを左右に動かすことで変えることができるのです。

Googleのカラー選択ツールには、共有機能も備わっています。パレットの右上に共有するためのアイコンがあるので、ここでSNSやリンクで他者と共有できるのです。例えば、カラー選択ツールで赤い色を選択したら、それを表示するためのリンクが提示されます。青い色を選んだ場合でも、それを表示するためのリンクに変わります。

どんな時にカラー選択ツールを使う？

カラー選択ツールを使うシーンには、どのようなものがあるのでしょうか？

自分のホームページなどを作成するときや、ビジネスシーンだとデジタル広告などの色を指定する時が挙げられるでしょう。そんな時、RGBなどの数値をCSSに入力するだけでは、お目当ての色を表現するには大変な場合もあります。そこで、カラー選択ツールを使えば、希望する色を直感的に探し当てることができるのです。近いけれど、微妙に異なる色を探す時にも助かるでしょう。

他にも、異なるカラーコードの値を知りたい時にも役立ちます。例えば、ウェブサービスの開発現場において、ウェブデザインを担当するデザイナーと機能面の実装を行うエンジニアに作業が分離しているケースがあり、両者が使う開発ツールが異なるかもしれません。

その場合、色指定についてデザイナーではHEXが主に使われ、エンジニアではRGBがメインに使われているケースもあり得ます。このような時に、感覚ではなく、カラー選択ツールでカラーコードの数値を変換することで、正確に色を指定することが可能です。このようにして、デザイナーとエンジニアの間の色に対する認識の違いを解消することができるでしょう。