画像からカラーコードを抽出する方法｜無料ツールで5秒で完了

デザインカンプや参考画像から、正確なカラーコードを抽出する方法を解説します。

クライアントから「こういった色あいにしたい」と言われるが、細かい色の名前やカラーコードまでは教えてくれない、分からないことも多いからです。

この記事では、無料ツールで5秒でカラーコードを調べる方法を紹介します。

カラーコードとは？

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

主に

• HEX
• RGB
• HSV

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

なので、今回はHSVは省いて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だと不透明になります。

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

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

このように「画像カラーピッカー」のサイトでは、簡単な操作だけで

指定部分のカラーコードを表示してくれます。

最後に

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

Web制作やWebデザインを副業や本業にする人にとっては

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

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

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

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