デザイン・Web制作
画像カラー抽出（パレット生成）
画像をアップロードすると主要な色を自動抽出。Median Cutアルゴリズム＋CIELAB色差による類似色マージで、実用的なカラーパレットを生成。HEX/RGB/HSL値と面積比を表示。CSS変数としてコピー可能。
10
AD
AD
画像カラー抽出（パレット生成）について
画像からカラーパレットを抽出する仕組み
本ツールはMedian Cut（中央値分割）アルゴリズムを使用して画像の代表色を抽出します。
- 画像の全ピクセルをRGB色空間の1つの「箱」に入れる
- 最もカラーレンジが広い軸（R/G/B）で箱を中央値で2分割
- 指定数に達するまで分割を繰り返す
- 各箱内のピクセル平均色が代表色になる
さらにCIELAB色空間のΔE（色差）を計算し、人間の目で区別しにくい類似色を自動でマージします。これにより、HEX値は異なるが見た目がほぼ同じ色が別々に表示される問題を解決しています。
活用シーン
- Webデザイン: 参考画像やブランド画像から配色を抽出してCSS変数に反映
- プレゼン資料: 写真素材の主要色に合わせたスライドカラーの統一
- インテリア・ファッション: 気に入った写真の配色を分析
- イラスト・絵画分析: 作品の色彩構成を客観的に確認
- アクセシビリティ: 画像の主要色からコントラスト比を検討
機能一覧
- 抽出色数の変更（3〜12色）
- 類似色マージの閾値調整（ΔE値 0〜30）
- HEX / RGB / HSL の3形式で色コードを表示
- 面積比（画像中の占有率）を表示
- パレットバーで色の比率を視覚化
- クリックでカラーコードをコピー
- CSS変数としてまとめてコピー
- ブラウザ内完結（画像の外部送信なし）
よくある質問
- Q. ΔE（デルタイー）とは何ですか？
- ΔEはCIELAB色空間における2つの色の距離（色差）を表す数値です。人間の目が感じる色の違いに近い尺度で、ΔE < 1 は目視では区別できない程度、ΔE ≒ 10 は明らかに異なる色と認識されます。本ツールではこの値を使って類似色のマージを制御しています。
- Q. Median Cutとは？
- Median Cut（中央値分割）は1979年にPaul Heckbertが提案した色量子化アルゴリズムです。色空間を再帰的に分割して代表色を求める手法で、画像の色分布を忠実に反映する特徴があります。Photoshopの減色機能にも類似のアルゴリズムが使われています。
- Q. 画像はサーバーに送信されますか？
- いいえ。Canvas APIを使用してブラウザ内でピクセルデータを読み取り、すべての計算をJavaScriptで実行します。画像データが外部に送信されることはありません。
- Q. 透過PNG画像の透明部分はどう扱われますか？
- アルファ値が128未満（半透明以下）のピクセルは自動的にスキップされます。不透明な部分のみが色抽出の対象になります。
このツールを評価
—(0件)