三次元ユークリッド距離によるRGBの色判定

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

写真を選び、残す色をタップして許容範囲を調整します。

処理

各画素の色と選んだ色を比べ、近い色は残し、それ以外はグレーへ変換します。

出力

保存は長辺最大 1500px の JPEG（品質指定 0.95）です。

まず確認する点：意味として同じ物を選ぶ処理ではありません。背景にも近い色があれば残り、影の色が離れていると同じ被写体でも灰色になります。

仕上がりの例

緑色を残し、ほかの部分を白黒にした例です。

画像を拡大

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料では運営者の愛猫の写真を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像

800×1066px (JPEG)

記録の出力画像

800×1066px (JPEG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
記録の選んだ色	rgb(221, 245, 147)	—
記録の色の許容範囲	30	—

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/image/color-point/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、メモリ管理と画像処理（画素バッファ、縮小と容量予算）が参考になります。

1. RGB空間におけるユークリッド距離の応用

デジタル画像において、色は「R（赤）」「G（緑）」「B（青）」の3つの軸を持つ三次元空間上の点として定義できます。指定した色と現在のピクセルの色が「どれくらい近いか」を判定するために、本ツールではこの三次元空間上の直線距離（ユークリッド距離）を算出しています。

メリット： 単純な「色の値の比較」よりも、RGB の3成分をまとめて比較できます。ただし知覚的な色差を均等に表す色空間ではありません。また、算出した距離をユーザーが操作する「許容範囲（スライダー値）」と比較することで、抽出の厳密さを直感的に調整できる設計にしています。

選択色から RGB の距離が許容値の2倍以内なら色を残す、実装の判定を切り出した例です。

function partColor(rgb, target, tolerance = 30) {
  const distance = Math.hypot(...rgb.map((v, i) => v - target[i]));
  if (distance <= tolerance * 2) return rgb.slice();
  const gray = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114;
  return [gray, gray, gray];
}

2. Luma（輝度）係数を用いた高品質なモノクロ変換

対象外と判定されたピクセルをモノクロ化する際、RGBの平均値をとるだけでは、人間の目にとって不自然なグレーになってしまいます。本ツールでは、人間の視覚が緑を強く、青を弱く感じる特性を考慮した「Luma（輝度）」の計算式を採用しています。

メリット： 写真の明暗差（コントラスト）を美しく維持したままグレースケール化できるため、残した色がより鮮やかに、かつドラマチックに際立つ仕上がりになります。

3. 座標スケーリングと Canvas の最適化

このツールでは、長辺 1500px 以下に縮小した加工前の画像と、効果を描く表示用 Canvas を管理しています。ユーザーが画面上の「表示されている画像」をタップした際、その座標を正確に「加工前の処理用ピクセル」へ変換するためのマッピングを行っています。

メリット： 加工後に白黒になった場所をタップしても、加工前の処理画像から選択色を取得できます。また willReadFrequently: true オプションにより、頻繁なピクセルデータの読み取り負荷を軽減しています。

出力の仕様と確認する点

許容範囲は 5〜80 で、RGB の距離にすると 10〜160 の範囲です。値を上げるほど選択色に近い画素を多く残します。境界を連続的に混ぜる処理ではなく、色を残すか白黒にするかの2択です。

場所や物体の種類は判定しません。服の赤を選んだときに背景の赤も残るのは、同じ色判定を画像全体に行うためです。照明で明るさが変わった同じ物体は、一部だけ白黒になる場合があります。

保存は長辺最大 1500px の JPEG（品質指定 0.95）です。色を選び直せるよう加工前の処理画像を保持しますが、元の高解像度での書き出し機能はありません。