画像の主要な色を取り出す

ページの配色を写真に合わせたいとき、スタイルガイドが見つからないロゴからブランド色を復元したいときに。

ツールを読み込み中…

使い方

このページの処理はすべて、ブラウザのタブ内で動くコードが行います。ファイルはディスクからタブのメモリに読み込まれ、その場で変換され、ダウンロードとして書き出されます。当社にも第三者にも送信されません。

ブラウザの開発者ツール（F12）を開き、「ネットワーク」タブを選びます。
ファイルを読み込んでツールを実行します。
表示されるのは、ツール自身のコードの読み込みと、一部の重いツールでは公開CDNからのエンジン取得、それに loreatec.jp への小さなアクセス集計（ページのアドレスとタイトルだけ）です。あなたのファイルを運ぶ通信は1つもありません。

色はどう選ばれますか？

近い色をまとめ、画像の中で占める面積が大きい順に並べます。先頭に来るのが、いわゆる背景色です。同じ写真からは毎回必ず同じ配色が出ます。ブランド色を決める用途ではこれが大切です。

色がややくすんで見えるのはなぜですか？

各色がグループの平均値だからです。広いグレーの壁に赤いロゴがある写真は、面積で見ればほぼグレーであり、順位はそれを正しく反映しています。小さな色を出したい場合は色数を増やしてください。

ロゴの正確な色を取得できますか？

平坦な画像なら取得できます。面が均一なので平均値が実際の値と一致します。印刷物を撮影した写真では、照明が全画素をずらすため近似値が正直な答えです。

透過部分はどう扱われますか？

白として数えず、無視します。背景のないPNGロゴからは、白に支配された配色ではなくロゴ自体の色が得られます。