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

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

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

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

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

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

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

「HEX」は6桁(2文字3組)の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(明度)という3つの数値の組み合わせで色を表現したもので、「HSV色空間」と呼ばれたりもします。人間の感覚に近い指標を利用しているので、想像したような色を選びやすいという特徴があります。形式は「145°,99%,99%」というように表記します。

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

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

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

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

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

右側で色を指定する
それぞれのカラーコードは値を編集できる

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

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

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

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

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

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

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

最後に

Googleのカラー選択ツールを使うことで、直感的に色を指定できるうえ、選んだ色を他人と簡単に共有することもできます。異なるカラーコードであっても、数値を変換可能です。

また、Googleにはカラー選択ツール以外にも、前述したサイコロやハンドスピナーなど、便利なツールを検索から利用することができます。カラー選択ツールだけでなく、いろいろなツールを活用してみてください。

●構成・執筆/三鷹 れい(みたか れい|京都メディアライン・https://kyotomedialine.com FB
プログラマー。中小企業のDX化など、デジタル分野での支援をしている。主な開発分野はバックエンド・フロントエンド・アプリ。その他、歴史などの人文系にも興味を持つ。

 

関連記事

ランキング

サライ最新号
2025年
1月号

サライ最新号

人気のキーワード

新着記事

ピックアップ

サライプレミアム倶楽部

最新記事のお知らせ、イベント、読者企画、豪華プレゼントなどへの応募情報をお届けします。

公式SNS

サライ公式SNSで最新情報を配信中!

  • Facebook
  • Twitter
  • Instagram
  • LINE

「特製サライのおせち三段重」予約開始!

小学館百貨店Online Store

通販別冊
通販別冊

心に響き長く愛せるモノだけを厳選した通販メディア

花人日和(かじんびより)

和田秀樹 最新刊

75歳からの生き方ノート

おすすめのサイト
dime
be-pal
リアルキッチン&インテリア
小学館百貨店
おすすめのサイト
dime
be-pal
リアルキッチン&インテリア
小学館百貨店