【簡単】画像やスクリーンショットからカラーコードを調べる方法

Web制作の案件を受けていると、イメージ画像内の色がどのカラーコードに当たるのか調べたくなる時があると思います。

デザインカンプが用意されていて、カラーコードで色の指定まで記入されている場合は良いのですが

エンドクライアントから直接サイト制作を頼まれ、「こんな感じのデザインにしたいです！」と言われた際などには

「この部分の色は、何のカラーコードを指定していますか？」と聞いても明確な返答が返ってこないこともあるでしょう。

エンドクライアントのみんながみんな、Web業界に詳しいわけではないからです。

なので、「イメージはこんな感じなんですけど…」と渡された色味を参考に、自分でカラーコードを探していく場面も多いです。

ということで、今回は画像やスクショを挿入すると、自動でカラーコードを判別してくれるツールをご紹介します。

カラーコードとは？

そもそも、カラーコードとは何でしょうか？

カラーコードとは、色の情報を英数字の値に変換したものです。

主に

・HEX

・RGB

・HSV

の、3種類の表記方法がありますが、Web制作で良く利用するのはHEXとRGBですね。

HEX

HEXとは、Hexadecimal Valueの略で、16進数で表現されたカラーコードのことです。

HEXで指定する場合は、#f9f9f9や#fffのように

#と英数字3桁〜6桁で指定するのが特徴。

Web制作では、#000は濃いめの黒、#333は薄めの黒、#fffは白色、というように

HEXでの表現方法をよく使いますので、覚えておきましょう。

RGB

RGBとは、Red Green Blueの略で

コンピュータで画像や動画などを扱う際の標準的な色の表現方法です。

赤色、緑色、青色の濃淡を指定することで、様々な色を表現することができますが

混ぜれば混ぜるほど、つまり数値を大きくすれば大きくするほど明るい色になります。

赤色を表現する場合はrgb(225, 0, 0);

緑色を表現する場合はrgb(0, 225, 0);

青色を表現する場合はrgb(0, 0, 225);

の表記になり

例えば一般的な紫色を指定する場合は、rgb(167, 87, 164); という感じで指定をします。

また、透明度も指定したい場合はrgbに加えてaを付けます。

rgba(255 ,0 ,0 , .7)のように表記し、aの値が0に近いほど透明になっていき、1だと不透明になります。

HSV

HSVは、Hue Saturation Valueの略で、色相、彩度、明度の3つの要素から色を表す表現方法のことです。

明度はBrightnessと言い換えられることもあるので、HSBと呼ばれることもあります。

例えば、(19, 84, 100)などと表された時はオレンジっぽい色を表しますが

19が色相、84が彩度、100が明度を表します。

HSVは、あまりWeb制作で利用しないのでそんな理解しておかなくても大丈夫ですが

HEXのカラーコードやRGBの表記方法はよく使うので覚えておきましょう！

画像からカラーコードに変換できる「画像カラーピッカー」を紹介

画像からカラーコードを調べるためのサービスは色々ありますが、今回は「画像カラーピッカー」と呼ばれる、ラッコキーワードなどを展開している会社と同じラッコ株式会社のサービスを利用していきたいと思います。

カラーコードを調べる方法は簡単。

ページに遷移したら、画像を読み込む箇所があるので

ドラッグアンドドロップをするか、内部をクリックして画像を選択するだけ。

画像URLを指定しても判別できます。

そしたら画像が反映されますので、カラーコードを知りたい部分をクリックするだけ。

画像では、読み込んだアイコンの服の色をクリックしました。

HEXなら#b48b61、RGBならrgb(180, 139, 97)と表示されましたね。

このように簡単な操作だけで、指定部分のカラーコードを表示してくれます。

最後に

というわけで、今回は画像からカラーコードを簡単に出力してくれる「カラーピッカー」について解説してきました。

ワイヤーフレームからサイトを作成したり、デザインから構築まで全て自分でやる案件などでも使用する頻度が多いと思いますので

ぜひ利用してみてください。

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。