画像カラーパレット抽出 (主要色・配色を取得)
画像をドロップすると、median cut 量子化で主要な色を抽出し、各色の HEX / RGB 値と占有率を一覧表示します。色数 (4〜16) を選べ、占有率バーで配色バランスも確認可能。各色クリックで HEX をコピー、パレット全体を HEX 一覧 / CSS 変数 / JSON でコピーできます。画像はブラウザ内でだけ解析され、外部に送信されません。
使い方
画像をドロップエリアにドラッグするか「ファイルを選択」で読み込むと、median cut 量子化で主要な色を自動抽出します。「色数」を変えると抽出する色の数 (4〜16) を切り替えられ、結果は占有率の高い順に並びます。各色の HEX をクリックするとその色をコピー、「パレットをコピー」では HEX 一覧 / CSS 変数 / JSON のいずれかでパレット全体をまとめてコピーできます。占有率バーで配色のバランスもひと目で確認できます。画像の解析はすべてブラウザ内で完結し、どこにも送信されません。
よくある質問
- 画像はサーバーに送信されますか?
- いいえ。読み込み・縮小・色の抽出はすべて JavaScript でブラウザ内のみで実行され、画像はどこにもアップロードされません。
- 色はどうやって選んでいますか?
- median cut という古典的な色量子化アルゴリズムを使っています。全画素を 1 つの箱に入れ、最も色の幅が広い軸 (R / G / B) で中央値分割を繰り返して指定した色数の箱に分け、各箱の平均色を代表色とします。占有率はその箱に含まれる画素数の割合です。
- 占有率の合計が 100% にならないことがあります
- 各色を小数第 1 位に四捨五入して表示しているため、丸め誤差で合計が 99.9% や 100.1% になることがあります。内部的には全画素を 100% として計算しています。透明な画素 (アルファ値が小さい部分) は集計から除外します。
- 同じ色が複数出てこないのはなぜですか?
- 代表色が同じ HEX に丸まった箱は 1 つにまとめ、占有率を合算しています。そのため単色に近い画像では、指定した色数より少ない色しか出ないことがあります。
- 写真とイラストで結果は変わりますか?
- 写真はグラデーションや陰影で中間色が多いため、隣り合う似た色がいくつも抽出されることがあります。ベタ塗りの多いイラストやロゴでは、元のはっきりした色がそのまま代表色として出やすくなります。用途に合わせて色数を調整してください。
類似のツール
画像カラーピッカー — HEX / RGB / HSL 取得
JPEG / PNG / WebP をアップロードし、画像内の任意の位置をクリックするとそのピクセルの色を HEX / RGB / HSL で取得できます。ホバー中はルーペで拡大表示し、ピックした色は履歴として一覧表示。各値はワンクリックでコピー可能です。画像は外部に送信されず、すべての処理はブラウザ内で完結します。
カラー変換 — HEX / RGB / HSL / HSV を相互
HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。
コントラスト比チェッカー — WCAG AA / AAA 判定
前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。
色覚シミュレーション — 色覚多様性の見え方
画像が 1 型 (P 型・赤)・2 型 (D 型・緑)・3 型 (T 型・青) 色覚や 1 色覚 (全色盲) でどう見えるかをシミュレートします。デザインや資料の色使いがアクセシブルか確認するのに。Canvas + 色覚変換行列でブラウザ内処理、画像はアップロードされません。