16進数やRGB、HSVなどのコードがわかる

Google検索で「カラーピッカー」と検索すると、検索結果に簡易カラーピッカーが表示されます。

カラーピッカーとは、色を選択したり、ほかの画像などから抽出したりしたうえで、各種アプリで色を指定するコード(数値や文字列)を取得できるツールです。Web制作やデザインなどのために利用されます。

カラーピッカーを利用する

検索結果に表示されるのは、ごくシンプルなカラーピッカーです。以下の画面のように色相(色の種類)および明度と彩度(明るさと鮮やかさ)のグラデーションの中から色を選択すると、選択中の色のコードが5種類表示されます。

目的の色を選択するには、まず下の色相のグラデーションバー(虹色のバー)をスワイプし、次に明度と彩度のグラデーションの四角いエリアをスワイプします。選択中の色は左側のエリアに表示され、そのコードが下部に表示されます。

コードは、次の5種類が表示されます。
コード意味
HEXWeb制作などでよく使われる、RGB(光の3原色赤・緑・青)2桁ずつの16進数による色指定
RGB10進数のRGBによる指定。それぞれ0~255の値を取る
CMYK印刷物で使われるCMYK(インクの3原色シアン・マゼンタ・イエロー・および黒)による指定。それぞれ0~100%の値を取る
HSV色相(Hue)、彩度(Saturation)、明度(Value)の3つの値で色を指定するHSVモデルによる色指定。Hは0~360°、SとVは0~100%の値を取る
HSL色相(Hue)、彩度(Saturation)、輝度(Lightness)の3つの値で色を指定するHSLモデルによる色指定。Hは0~360°、SとVは0~100%の値を取る。HSVと似ているがSとVの値の推移が異なる

コードをコピーする

コードを利用するには、目視で別のアプリ等に入力するか、テキストを選択してコピーするかします。

Google検索結果のカラーピッカーが持つ機能は以上で、ほかの画像の色を抽出するなどの高度なことはできません。パソコンで色の抽出を行うには、以下の記事で解説しているPowerPointを使った方法がおすすめです。

PowerPointの「スポイト」でスライドの外側にある色を採取する方法。Webサイトの色と揃えたいときに便利!

製品紹介のスライドやWebサイトのレポートをパワポで作成するとき、製品やWebサイトの色と、スライド内の図形や文字の色を一致させると見栄えがよくなります。PowerPointの「スポイト」機能でブラウザーの色を採取する方法を解説します。