Complementary Color

補色とは？

補色はカラーホイール上で別の色の直接反対側にある色です。画面が使用する RGB 加法混合モデルでは、各チャンネルを反転して生成されます — あなたの色が (R, G, B) の場合、その補色は (255−R, 255−G, 255−B) です。例えば、スカイブルー #0EA5E9（14, 165, 233）の補色は暖かいオレンジ赤 #F51A16（241, 90, 22）です。

補色ペアはホイールの反対側にあるため、隣り合わせにすると最大限の視覚コントラストを生み出します。これにより、アート、デザイン、アクセシビリティにおける色彩理論の基石となります — 目を引き、テキストを際立たせ、ブランドパレット全体の基盤となることができます。

補色の計算方法

RGB モデルでは、各チャンネルを 255 から減算することで補色が見つかります。計算は単純です：

R' = 255 − R
G' = 255 − G
B' = 255 − B

例えば、スカイブルー #0EA5E9 は R=14、G=165、B=233 です。補色は R'=241、G'=90、B'=22、つまり #F51A16 です。これは加法補色 — 元の色と等量の光で加算すると中間グレーを生成する色です。このツールは色を拾く際にリアルタイムで反転を実行します。

補色を使用するタイミング

強いコントラストやバランスの取れた 2 色構成が必要な場合はいつでも補色が有用です：

• コールトゥアクションボタン。 補色のアクセントがボタンをページ背景に対して際立たせます。
• テキストコントラスト。 色とその補色をペアにするのは WCAG コントラスト目標に到達する最も簡単な方法の 1 つです。
• ブランドパレット。 多くのロゴが即座の認識のために 2 つの補色を使用します。
• アートとイラスト。 補色ペアは鮮やかな影とハイライトを作成します。
• データ可視化。 反対色は 2 つのデータシリーズを一目で区別するのに役立ちます。

補色は慎重に使用してください — 完全な彩度で等面積の場合、視覚的に振動することがあります。通常のルールは一方の色を支配的にし、補色をアクセントとして使用することです。

補色と類似色、トリアドの違い

補色はいくつかの古典的色彩調和の 1 つです。補色構成はホイール上で直接反対の 2 色を使用 — 最大コントラスト、最小パレット。類似色構成は隣り合う 3 色を使用 — 低コントラスト、落ち着きと統一感。トリアド構成は 120° 間隔で均等に配置された 3 色を使用 — バランスが良く鮮やか。テトラド（長方形）構成は 2 つの補色ペアを使用し、豊かな 4 色パレットを作成します。

補色はこれらの調和の中で最もシンプルで最も目を引きます。明確な焦点や 2 色ブランドアイデンティティが必要な場合に最適です。よりニュアンスが必要な場合は、類似色やトリアドを使用してください。

補色を見つける方法

このツールで補色を見つけるのは一瞬で、すべてブラウザ内で完結します。アップロード不要、登録不要、インストール不要。以下の手順で行います：

1. 色を拾います。 カラーピッカーを使用するか、RGB 入力に赤、緑、青の値（0–255）を入力します。
2. 結果を見ます。 補色 HEX コードと RGB 値がリアルタイムで更新され、比較用の並列見本が表示されます。
3. HEX をコピーします。 「HEX をコピー」をクリックして補色をコピーし、CSS やデザインツールに貼り付けます。

すべてのステップは JavaScript でローカルに実行されるため、色の選択がブラウザから離れることはありません。これによりツールは完全にプライベートで即時です。