写真の主要色をパレットとして取得（HEX・RGB）
写真やイラストなどの画像をアップロードするだけで、その画像に多く含まれる主要な色（ドミナントカラー）を自動で抽出し、カラーパレットとして表示する無料ツールです。抽出した各色はHEXコードとRGB値で確認でき、スウォッチをクリックするだけでHEXをコピーできます。デザインの配色決め、ブランドカラーの分析、Webサイトやスライドのテーマカラー抽出などにお使いいただけます。
使い方はかんたんです。「画像を選択」エリアに画像をドラッグ＆ドロップするか、エリアをクリックしてファイルを選びます。画像が読み込まれると自動で色が解析され、パレットが表示されます。抽出する色数はスライダーで4色〜12色の範囲で調整でき、変更すると即座に再計算されます。さらにプレビュー画像の上にカーソルを合わせると、スポイト機能でその位置のピクセル色をリアルタイムに読み取れます。
お気に入りの写真から配色パレットを作りたいとき、ロゴや商品画像からブランドカラーを特定したいとき、参考にしたいデザインの色をコードに取り込みたいときに便利です。抽出したHEX・RGBはそのままCSSやデザインツールに貼り付けられます。画像は一切アップロードされず端末内で処理されるため、公開前の素材や社外秘の資料でも安心して解析できます。
本ツールは画像をCanvasに描画し、処理を軽くするために内部で縮小したうえで全ピクセルの色を読み取ります。読み取った色は、各チャンネルの上位ビットでまとめる色量子化（頻度バケット方式）によって近い色どうしをグループ化し、出現数の多いグループから順に代表色を選びます。これにより、写真全体の色の傾向を反映したドミナントカラーを、指定した色数ぶんだけ得られます。すべてブラウザ内で完結し、外部サーバーとの通信は発生しません。
| 操作 | 内容 | 説明 |
|---|---|---|
| 画像の読み込み | ファイル選択 / ドラッグ＆ドロップ | 端末内のCanvasで読み込み、外部送信なし |
| 色数スライダー | 4〜12色 | 抽出するパレットの色数を調整。変更で即再計算 |
| スウォッチをクリック | HEXをコピー | その色のHEXコードをクリップボードへ |
| スポイト | ピクセル色の取得 | プレビュー上のカーソル位置の色をHEX・RGBで表示 |
HEXは「#8B5CF6」のように赤・緑・青を16進数2桁ずつで表す表記で、CSSやデザインツールで広く使われます。RGBは「rgb(139, 92, 246)」のように各色を0〜255の10進数で表す表記です。どちらも同じ色を指しますが、用途に応じて使い分けられるよう、本ツールでは各スウォッチにHEXとRGBの両方を表示しています。透明度（アルファ）は扱わず、不透明な色として抽出します。