CodeKitHubこのツールとは？
平均色とは、各ピクセルの赤・緑・青の値の算術平均です——画像全体のトーンを表す1つの混合色ですが、画像に大きく異なる色の領域がある場合、濁って見えることがあります。
主要色は異なる考え方です。このツールは似たピクセルの色をバケットにグループ化し（各RGBチャンネルを量子化）、各バケットに何ピクセル入るかを数え、最も多いものを別々のスウォッチとして返します——単一の平均混合色よりも、人が「この画像の主な色」と呼ぶものに近い結果になります。
なぜこれを使うのか？
- 1回のアップロードで、単一の数値ではなく平均色と実際の複数色パレットの両方が得られます。
- デザインプロジェクト用に、写真、スクリーンショット、ロゴから使える配色パレットを抽出できます。
- 任意のスウォッチをクリックするだけで、正確なHEXコードを即座にコピーできます。
- 完全にブラウザ内で動作——画像はcanvasでローカルに読み込まれ、どこにもアップロードされません。
- 無料・即時・アカウント不要、ブラウザ自体の制限を超えるファイルサイズ制限はありません。
使い方
- アップロードボタンをクリックして、デバイスから画像を選択します。
- 平均色と主要色パレットが自動的に表示されます——追加のボタン操作は不要です。
- 任意のスウォッチ（平均色またはパレット内の任意の色）をクリックしてHEXコードをコピーします。
例
入力
オレンジ色の空と濃紺のシルエットが写った夕焼けの写真出力
平均色：くすんだ茶色がかったオレンジの混合色 · 主要色：鮮やかなオレンジ、深い赤、ほぼ黒、淡い黄色（それぞれ別々のスウォッチとして）これはまさに平均色と主要色が最も大きく異なるケースです——平均色は暖色と寒色を混ぜて濁った色にしますが、主要色パレットはそれらをはっきりと区別できる色として保持します。
よくある質問
なぜ平均色は画像に実際に存在する色とこれほど違うのですか？
平均化はすべてのピクセルを数学的に混ぜ合わせます——画像に鮮やかなオレンジと濃紺の両方の領域がある場合、平均は濁った茶色付近に落ち着きます。この色は元の写真のどこにも視覚的に存在しないかもしれません。これは真の平均値として期待される挙動であり、バグではありません。画像に実際に現れる色が欲しい場合は、代わりに主要色パレットを使ってください。
画像はサーバーにアップロードされますか？
いいえ。画像はブラウザがCanvas APIを使って直接読み込み、色の解析はすべてローカルのJavaScriptで行われます。ネットワーク経由で何かが送信されることは一切ありません。
主要色はいくつ返されますか？
最大8色で、各カラーバケットに一致したピクセル数が多い順にソートされます。画像の色が非常に均一な場合、8色より少ない結果になることがあります。
PNGの透明ピクセルはカウントされますか？
いいえ——不透明度が50%未満のピクセルは、平均色と主要色の両方の計算から除外されます。そのため、透明な背景の向こうに透けて見える色に結果が偏ることはありません。