今回は、jpgやpngなどの画像内に色をカラーコードとして読み込み（抽出）する方法を紹介します。
今回紹介する方法はあるツールを使用して、画像をアップし、選択した部分の色をカラーコードに落とし込む方法です。
また最後には実用例みたいなのも書いておきますので興味のある方は読んでいって下さい。
カラーコードってなに？って方は以下の記事を見て下さい。
イメージカラーピッカーを使用
今回使用するツールはイメージカラーピッカーと言う、カラーコードを抽出できるウェブサービスです。
カラーピッカーとは、通常グラフィックソフトウェア内またはオンラインにあるグラフィカルユーザーインターフェイスウィジェットで、色を選択したり、時には配色を作成したりするために使用する下記の様な円状or四角形のツールです。
ではイメージカラーピッカーとは何のかは、上記の様なカラーピッカーの画像版です。
画像内の色を選択するとその色が何色なのかをWEBカラーコードとして教えてくれます。
イメージカラーピッカーはWEB上に色々とありますが「SYNCER」が提供しているものが最もシンプルで使いやすいです。（しかもスマホ対応です。）
使い方は超簡単です。
- 画像をドラックしてアップロード
- 調べたい色味の部分をクリック
- 「メモ」にカラーコードが入るのでそれが抽出された色。
実際に当サイトのロゴ部分をスクリーンショットをしてpngデータとして色味の抽出を試してみました。
実際の色は「#f4b364」なのですが、イメージカラーピッカーで調べてみた結果としっかりと「#f4b364」と表示されました。
また影となってる部分は「#777」ですが、そこは「#c3c3c3」と表示されました。100%一致では無いがほとんど変わらないカラーなので何も高精度と言えるでしょう。
WEBサイトのカラーを抽出
もう一つ便利なツールを見つけたので紹介します。
下記は、WEBサイト上の画面のカラーコードを抽出する事が出来るChromeの拡張機能です。
これを使えば先ほど紹介したイメージカラーピッカーの様な色味の抽出をWEBサイト上全体で可能になります。（ただしChrome限定です。）
実際の使用場面
では実際の使用場面はどんな状況なのか？私なりにまとめてみました。
- テキストカラーとロゴカラーを統一したい。
- 画像と同じ色味のブロック要素を作成したい。
- 画像と同じ様な色味のイラストを作成したい。
この様に大半はWEB制作に関わってくるかと思います。
WEBサイトを作成する際にメインとなる色合い3つ程決めてから作成していきますが、どうしても画像に入ってくる色味は多くなりごちゃごちゃしがちです。そんな時は、考えを反転させて画像の色味にサイトを合わせたりしたりします。
この時に、画像のメインとなる部分の色味をイメージカラーピッカーで調べてカラーコードを抽出します。その色にサイトを合わせていきます。画像をイラスト化する時もイメージカラーピッカーで色を調べてからIllustratorで編集します。
以上が「画像内の色をカラーコードで確認する方法（jpgやpng等）」でした。
WEBサイトのクオリティを上げたいのなら、今回のような便利なツールは迷わず使っていきましょう。
