画像カラー分析ツールのコア機能
- HEX/ARGB値による主要カラーパレットを抽出
- マウスホバーによるリアルタイムカラーサンプリング
- クリックでピクセル単位の正確な色選択
- 色の分布割合を表示
- インタラクティブなカラープレビューパネル
使い方
画像を追加する
アップロード領域をクリックするか、画像をドラッグして入れます。ブラウザーが表示できる形式なら何でも構いません — PNG、JPEG、GIF、WebP、SVG。
ピクセルを取る、またはパレットを読む
画像の上でポインターを動かすと下の色がプレビューされ、クリックすると確定します。同時に右側へ、その画像の主要な色の一覧が表示されます。
色の値をクリックするとコピーできる
確定した色でもパレットの項目でも、クリックするとその HEX または ARGB の値がクリップボードにコピーされます。
実用的なユースケース
- カラースキームを作成するデザイナー
- ブランドカラーを照合するウェブ開発者
- 参照画像を分析するデジタルアーティスト
- 色彩理論を教える教育者
- 商品写真の品質チェック
技術仕様
- 対応形式：JPG/PNG/WEBP/GIF/SVG
- ブラウザベースの処理
- 高性能カラークラスタリングアルゴリズム
- CIE Lab色空間分析
- クロスデバイス互換性
セキュリティ＆プライバシー
- 100%クライアントサイド処理
- 画像データのアップロードゼロ
- 自動メモリクリーンアップ
- トラッキングCookieなし
- GDPR準拠
アクセシビリティ
- 登録不要
- 商用利用無料
- モバイル最適化インターフェース
- カラーコントラスト準拠
よくある質問
- 画像はサーバーに送信されますか?
- いいえ。ファイルはブラウザーの FileReader で読み込まれ、ローカルの canvas に描画されます。リクエストは一切送信されず、どこにも保存されません。
- 取った色が画像編集ソフトで見る色と少し違うのはなぜですか?
- ここに表示されるプレビューは長辺 500 ピクセル以下に縮小して再エンコードされており、滑らかな縮小によって隣り合うピクセルが混ざります。そのため輪郭のはっきりした境界の色は、元ファイルのそのピクセルそのものではなく混ざった値として読まれることがあります。色が平坦な領域では両者は一致します。
- 主要な色はどうやって判定していますか?
- 画像を 200 ピクセルに縮小して格子状にサンプリングし、それぞれの色を CIE76 の色差で他の色と比較します。差が 10 未満の色は一つの平均色に統合されます。サンプリングしたピクセルの 1% 以上を占める色だけが掲載され、一覧は多い順に最大 18 件です。
- 各色の横にある二つの値は何を表しますか?
- HEX は一般的な 6 桁のウェブ色です。ARGB は alpha チャンネルを先頭に書く形式で、ARGB(255, 120, 40, 90) は完全に不透明な赤 120、緑 40、青 90 を意味します。不透明な画像では alpha は常に 255 で、半分より透明なピクセルはパレットの生成時に除外されます。