Coloropix とは
Coloropix は、写真やイラストから代表的な色を 5〜10 色を自動で抽出し、カラーパレットにまとめる無料ツールです。k-means クラスタリングで画像全体の色味を分析し、それぞれの色を hex / rgb でコピーしたり、CSS 変数や Tailwind config 形式でそのまま書き出せます。色ごとの占有率も表示されるので、メインカラーとアクセントカラーの見分けも一目で付きます。
使い方
- パレット化したい画像を選択するか、ドラッグ＆ドロップで読み込みます。JPEG / PNG / WebP などの一般的な画像形式に対応しています。
- 抽出する色数をスライダーで 5〜10 色の範囲から指定します。色数を増やすと中間色まで拾え、減らすと主要トーンに絞り込めます。
- プレビュー右上の +/− ボタンやマウスホイールで最大 200% までズームし、細部の配色を確認します。
- 画像全体ではなく一部だけを抽出したい場合は、プレビュー上をドラッグして範囲を矩形で囲みます。
- 囲んだ領域はドラッグで移動、ハンドルでリサイズでき、複数領域を同時に指定したり × で削除したりできます。
- 抽出された各色のスウォッチをクリックすると hex または rgb の値がコピーされます。
- パレット全体を CSS 変数や Tailwind config 形式で書き出して、コードにそのまま貼り付けます。
- 色数や領域を調整しながら、デザインに合うパレットになるまで再抽出を繰り返します。
こんな場面で
Web サイトの配色設計
ロゴやキービジュアルから主要色を抜き出し、CSS 変数として書き出してサイト全体のテーマカラーに統一感を持たせたいとき。
Tailwind プロジェクトの色定義
デザインカンプの画像からパレットを Tailwind config 形式で生成し、ユーティリティクラスとして即座に使えるようにしたいとき。
資料・スライドのトーン合わせ
写真の雰囲気に合わせてグラフや見出しの色を選びたいとき、占有率の高い色を基準に配色を決められる。
イラスト・デザインの参考
気に入った作品の色使いを分析し、自分の制作に取り入れるための参考パレットを手早く作りたいとき。
商品写真のブランドカラー抽出
EC の商品画像から特定の領域だけを囲って色を取り出し、バナーや説明文の装飾色と統一したいとき。
ムードボード作成
複数の写真からそれぞれパレットを取り出し、プロジェクトの雰囲気を表すカラーセットをまとめたいとき。
プライバシー
Coloropix は完全にブラウザ内で動作します。画像の読み込み、色抽出、書き出しまですべてお使いの端末内で処理され、画像や抽出結果が外部サーバへ送信されることは一切ありません。AI モデルの取得などの外部通信も行わないため、ネットワークを介して画像が外に出ることはありません。
よくある質問
- Q. 対応している画像形式は何ですか？
- A. ブラウザが表示できる一般的な画像形式（JPEG / PNG / WebP など）に対応しています。読み込んだ画像はそのままブラウザ内で解析されます。
- Q. 抽出できる色数は変えられますか？
- A. はい。5〜10 色の範囲でスライダーから指定できます。色数を増やすと細かな中間色まで拾え、減らすと主要なトーンに絞り込めます。
- Q. 画像の一部だけからパレットを作れますか？
- A. できます。プレビュー上をドラッグして矩形で範囲を囲むと、その部分だけから色を抽出します。複数の領域を同時に指定することも可能です。
- Q. 囲んだ領域はあとから調整できますか？
- A. はい。領域はドラッグで移動、ハンドルでリサイズでき、不要になれば × ボタンで削除できます。複数領域も個別に編集可能です。
- Q. 抽出した色をコードで使うにはどうすればいいですか？
- A. 各色は hex / rgb でコピーできるほか、パレット全体を CSS 変数や Tailwind config 形式で書き出せます。生成された定義をそのままコードに貼り付けて使えます。
- Q. 占有率とは何を表していますか？
- A. その色が画像（または囲んだ領域）の中でどれだけの面積を占めているかの割合です。占有率の高い色がメインカラー、低い色がアクセントの目安になります。
- Q. プレビューを拡大して細かい色を確認できますか？
- A. はい。プレビュー右上の +/− ボタンやマウスホイールで最大 200% までズームできます。細部の配色を確認しながら領域を指定できます。
- Q. 抽出した色はどこかに保存・送信されますか？
- A. いいえ。色抽出はすべてブラウザ内で完結し、画像も抽出結果も外部に送信されません。外部への通信は一切行いません。