カラーコード抽出ツールとは？

画像から主要な色を抽出し、Hexなどのカラーコードとパレット全体に占める割合で一覧表示するツールです。写真やバナー、スクリーンショットから配色を拾い、カラーパレットのたたき台を作れます。

画像はブラウザ内で処理され、外部へ送信されません。

使い方

1. 画像ファイルを選びます。ドラッグ & ドロップでも読み込めます。
2. 画像の主要な色が一覧に表示されます。
3. 色数や抽出モードを調整します。変更すると一覧がすぐに更新されます。
4. 色をクリックしてコピーするか、すべてコピーで一覧を持ち出します。

主な設定項目

色数

抽出する色の数です。増やすと近い色が分かれて残り、減らすとまとまります。指定した数より色が少ない画像では、抽出できる色だけが表示されます。

抽出モード

残りやすい色の傾向を選びます。バランスは出現量に沿い、鮮やかは彩度の高い色、穏やかは彩度の低い色、淡さは明るい色、深みは暗い色が残りやすくなります。

白・黒に近い色の除外

背景の白や黒をパレットから外したいときに使います。除外の強さを上げるほど、白や黒に近い色を広く除外します。両方オフにすると、白・黒による除外は行われません。

出力の見方

一覧の各色には、パレット全体に占める割合が表示されます。並び順は出現頻度・色相・明度から選べ、コピー形式はHEX・RGB・HSL・OKLCHに対応しています。すべてコピーでは、選択中の形式で1行に1色ずつコピーします。

活用シーン

• 写真やバナーからカラーパレットを作りたいとき
• 参考サイトのスクリーンショットから主要色を整理したいとき
• UIやイラストの配色を大まかに把握したいとき
• ブランドカラー候補を画像素材から探したいとき

使うときの注意点

• 透過が強い画素は色として扱いません
• 抽出結果は近い色をまとめた代表色です。画像のすべての画素色をそのまま列挙するものではありません