カラーコード抽出

このツールについて

気に入った写真の色味をWebサイトの配色に取り入れたい、商品画像に合わせて紹介ページの見出し色を決めたい、資料の図版を写真と同じ色でそろえたい。こうしたとき、画像に使われている色のコードがわかると作業が一気に進みます。

このツールは、画像全体の画素を集計して、よく使われている色を代表的な色として抜き出します。目視でスポイトを当てるのと違い、画像全体を通して見たときに面積の大きい色が選ばれるため、その画像の印象を決めている色を拾えます。

使い方

1. 画像をドロップするか、枠をクリックして選びます。
2. 抽出する色数を選びます。
3. 「色を抽出する」を押すと、色見本とコードが表示されます。

表示されたコードをクリックすると、その場でコピーできます。CSSやデザインソフトにそのまま貼り付けて使えます。

抽出される色について

色の抽出では、似た色をまとめて1つの代表色として扱います。写真には厳密には何万種類もの色が含まれているため、そのまま並べても使えないからです。まとめる粒度は色数の指定によって変わり、3色を指定すると大まかに、10色を指定すると細かく分かれます。

配色を決める目的であれば、まず6色で全体の傾向を掴み、必要に応じて色数を増やすのが実用的です。3色まで絞ると、その画像を特徴づけている色だけが残るので、ブランドカラーの候補を探す用途に向いています。

写真の多くは背景に白や灰色を含んでいて、面積が大きいぶん上位に来ます。配色に使いたいのが有彩色だけであれば、「ほぼ白・黒・灰色は除く」を有効にしてください。彩度の低い色を候補から外して集計します。

色コードの読み方

表示される値は16進数のカラーコードです。先頭のシャープに続いて6桁の英数字が並び、2桁ずつが赤、緑、青の強さを表しています。たとえば白は最大値がそろった状態、黒はすべてが最小の状態です。この形式はWebでも各種デザインソフトでも共通して使えます。

よくある質問

画像がどこかに送信されることはありませんか

ありません。このページの処理はすべて、お使いの端末のブラウザの中だけで完結しています。画像がネットワークを通じて送られることはなく、当サイトの運営者を含め誰も内容を見ることができません。ブラウザの開発者ツールで通信状況を確認すると、画像に関する通信が発生していないことを確かめられます。

特定の1点の色だけを調べられますか

このツールは画像全体から代表的な色を集計します。特定の位置の色を正確に知りたい場合は、先にその部分だけをトリミングしてから読み込ませてください。

抽出した色をそのまま使って問題ありませんか

配色の参考としては有効ですが、文字色に使う場合は背景との明暗差にご注意ください。写真から拾った色同士を組み合わせると、コントラストが不足して読みにくくなることがあります。

一度に何枚まで処理できますか

20枚までです。1枚あたり20MB、合計100MBが上限です。制限を設けているのは、スマートフォンのブラウザで大量の画像を同時に扱うと端末のメモリが足りなくなり、ページごと強制終了してしまうためです。上限を設けずに落ちるより、確実に動く範囲を示すほうが結果的に早く終わります。

利用に料金はかかりますか

かかりません。会員登録も不要です。回数制限や透かしの埋め込みもありません。

同じ画像でも色数を変えると結果が変わります

色数の指定によって、似た色をまとめる粒度が変わるためです。3色では大まかにまとめられ、10色では細かく分かれます。どちらが正しいということはなく、用途に合う粒度を選んでください。

複数の画像から共通の色を探せますか

画像ごとに結果が並ぶため、見比べて共通する色を探せます。商品写真のシリーズから統一した配色を決めたいときは、代表的な数枚をまとめて読み込ませると傾向が掴みやすくなります。

関連ツール

• 明るさ・コントラスト調整色味そのものを変えたいときに使います。
• 画像情報チェッカー解像度や容量をまとめて確認できます。
• 画像トリミング調べたい範囲だけを切り出せます。