画像の色取得

機能

• 画像の好きな位置をクリックして HEX / RGB / HSL で色を表示
• 画像全体の平均色 —— 配色や色調を掴む最初の手がかり
• 主要な色は中央値分割で算出し、割合順に並べます（色立方への量子化ではありません）
• 主要色は 5 / 6 / 8 個から選択、それぞれ割合つき
• 取得半径は 1×1 / 3×3 / 5×5。圧縮写真では既定の 3×3 でノイズを避けます
• 半透明の画素は集計から除外。切り抜き済み PNG が黒に引っ張られません
• PNG の色見本と、コピーできるテキストの説明を出力
• 画像は送信されず、オフラインでも使えます

使い方

1. 画像をドロップ、または Ctrl/⌘ + V でスクリーンショットを貼り付け
2. 取得半径と主要色の数を選びます
3. 平均色と主要な色がすぐに表示され、PNG の色見本として保存できます
4. プレビュー上の好きな位置をクリックして色を取得します

よくある質問

取得半径はどれを選べばよいですか

画像の出どころによります。圧縮された写真では同じ単色の領域でも隣り合う画素が ±3 ほど揺れるため、1×1 はノイズを拾いがちです。既定の 3×3 は小さな範囲を平均するので、目で見えている色に近づきます。UI スクリーンショットの正確な 1 画素を読みたいときだけ 1×1 を使ってください。

主要な色を 256 色への量子化で求めないのはなぜですか

8×8×8 の色立方への量子化は簡単ですが、近い色が別の区画に分断されます。すると大きな主色が細かく切られ、並べ替えると本来の主色が後ろに回ります。中央値分割は分布を繰り返し半分に分けるので、主色はまとまったまま残り、割合も実際の値になります。

透明な部分も集計されますか

いいえ。不透明度が半分未満の画素は平均色からも主要色からも除外します。これは重要で、切り抜き済みの PNG は透明部分の RGB が 0 のことが多く、集計すると平均色が黒に引っ張られます。この手のツールで最も多い間違いです。

画像は送信されますか

いいえ。取得と集計はブラウザの canvas で、すべて端末内のメモリ上で行います。オフラインでも使えます。