色距離計算ツール
2つの色がどの程度視覚的に似ているか異なっているかを測定します：2つのHEX色を入力して、ユークリッド RGB距離、知覚加重redmean距離、および平易な言語での類似性レーティングを取得します。
入力
比較する最初のHEX色。
比較する2番目のHEX色。
出力
| メトリック | 値 |
|---|---|
| No data yet | |
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-distance-calculator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorA": "#000000",
"colorB": "#FFFFFF"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `color-distance-calculator` tool (Color Distance Calculator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/color-distance-calculator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="色距離計算ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|
次の方法でも利用可能
ガイド
2つのHEX色を入力すると、このツールは2つの色がどの程度視覚的に似ているか異なっているかを測定します。ブランドカラーがずれていないかを確認したり、パレットの重複を削除したり、区別可能なチャート色を選択したり、デザイントークンの変更が急激ではなく微妙であることを確認する場合に便利です。
「色距離」の意味
色距離は、2つの色がどれだけ離れているかを示す数値スコアです。最も単純なアプローチでは、色を3次元RGB空間（赤、緑、青、それぞれ0～255）の点として扱い、2つの点の間の直線距離を測定します：
ユークリッド RGB距離： √((R1−R2)² + (G1−G2)² + (B1−B2)²)
これは0（同一色）から約441.67（純黒対純白－RGBキューブで最も離れた2つの点）まで変わります。計算は簡単ですが、人間の知覚とはあまり一致しません。目は特定の色合いと明度範囲に対してはるかに敏感であるため、同じユークリッド距離を持つ2つのペアは、「離れている」ように見える方法が大きく異なる場合があります。
Redmean距離は、色のペアがどの程度明るいか（赤の平均値による）に基づいて各チャネルの二乗差に重みを付ける、よく知られた低コストの補正です。完全な色空間変換のオーバーヘッドなしに人間の感度に近似します：
ΔC = √((2 + r̄/256)×ΔR² + 4×ΔG² + (2 + (255−r̄)/256)×ΔB²)、ここでr̄は2つの赤の平均です。
チャネルに高い重みを付けるため、同じペアのredmean値はユークリッド値より高くなります。これらは同じ数字の「より正確な」バージョンではなく、異なるスケールなので、一致することを期待する代わりに個別に比較してください。
使い方
- 色Aを入力または選択します。
- 色Bを入力または選択します。
- 結果テーブルは、両方の16進値、ユークリッド RGB距離、redmean距離、およびユークリッドスコアに基づいた平易な言語での類似性レーティング（同一、非常に似ている、明らかに異なる、または非常に異なる）でリアルタイムに更新されます。
FAQ
実際にはどの数字を使用すべきですか？ 簡単な健全性チェック（「これは基本的に同じ色ですか？」）の場合、ユークリッド距離はシンプルで直感的です。ユーザーが実際に並べて見る色（UIパレット、ブランド一貫性チェック）を比較する場合は、redmean値に頼ってください。認識できる差により密接に追従します。
「似ている」と見なされるのは何ですか？ 評価範囲（0 =同一、最大25 =非常に似ている、最大100 =明らかに異なる、100を超える =非常に異なる）はユークリッド距離の0～441.67範囲に基づいています。これは経験則であり、認定された知覚標準ではありません。アクセシビリティコントラスト（テキストの読みやすさ）については、コントラスト比ツールを代わりに使用してください。コントラストと色距離は異なることを測定しているためです。
色覚異常を考慮に入れていますか？ いいえ。両方の式は標準のRGB値で機能し、色覚欠陥の特定の形態をモデル化しません。
#f0cのような3桁の16進コードを使用できますか？
はい。短縮形の16進表記（#rgb）は、比較前に自動的に完全な6桁形式に拡張されます。
色データはどこかに送信されますか？ いいえ。すべてがブラウザ内で完全に実行されます。何もアップロードされたり保存されたりしません。