配色の調和
補色ジェネレーター - 反対色・反転色を調べる
HEX や RGB の色の補色（反対色）を調べ、OKLCH による知覚的な補色、反転色、スプリット・コンプリメンタリーやトライアドの配色も表示します。
補色
HSL の色相を 180° 回転させた、色相環で正反対の色です。
rgb(246, 175, 60)知覚的な補色（OKLCH）
OKLCH の明度と彩度を保つため、2 色が同じくらいの明るさに見えます。
rgb(176, 124, 0)反転色
RGB の 各チャンネルを 255 から引いた色で、写真のネガのようになります。
rgb(196, 125, 9)スプリット・コンプリメンタリー
トライアド
類似色
使い方
補色は色相環で向かい合う色で、最も強い色相のコントラストを生みます。色を入力すると、従来の HSL の補色、明るさを保った知覚的な補色、RGB の反転色、そしてその色から作る他の配色を確認できます。
- 1 ベースカラーを入力します。
- 2 従来の補色・知覚的な補色・反転色を比べます。
- 3 色をコピーするか、カラーホイールで開きます。
よくある質問
補色とは何ですか？
色相環で正反対にある、色相が 180° 離れた色です。例えば青の #3B82F6 にはオレンジ系の色が補色になります。
補色と反転色の違いは？
補色は色相だけを回転させ、彩度と明度を保ちます。反転色は RGB の各チャンネルを 255 から引くため明暗も反転し、暗い青は明るい黄色になります。
知覚的な補色を表示する理由は？
HSL の色相は人の目には均等に並んでいません。OKLCH の補色は知覚的な明度と彩度を保つため、よりバランスのよい組み合わせになることが多いです。
UI で補色をどう使えばよいですか？
一方をメインカラーにし、もう一方はアクセントや CTA に少しだけ使います。反対の色相でも明度が近いことがあるので、文字のコントラストを確認しましょう。