invert_colors 補色ファインダー star

仕組み

2つの色は、色相環上でちょうど正反対の位置、つまり色相が180°離れているときに補色の関係にあります。数学的には、このツールは入力された色をHSLモデルに変換し、その色相の値を取り出して360を法として180°を加えます — たとえば色相40°(オレンジ)は220°(青)になります。彩度と明度はそのまま変更されないため、補色は色相環上の本当の回転であり、ランダムに選ばれた別の色ではありません。並べて配置すると、補色どうしは互いを視覚的に強め合います。そのため、ベースカラーが主体のデザインの中で際立たせたいアクセント、ボタン、コールトゥアクションには補色が自然な選択肢になります。

この効果は人間の視覚そのものに根拠があります。彩度の高い色を数秒間見つめてから、何もない白い面に目を移すと、その色のおおよその補色にあたる一時的な残像が現れます — これは網膜内の色を感知する錐体細胞が一時的に疲労することによって生じる、実在の生理現象です。補色どうしを組み合わせたときに特に鮮やかで「生き生き」と感じられる理由の一端もここにあります。目は残像を生み出すのと同じ仕組みによってあらかじめ準備された状態になっているのです。補色に加えて、このツールはRGB反転色(各チャンネルを255から引いた値 — いわゆる「写真のネガ」)も計算し、入力色の知覚される輝度に基づいて読みやすいテキストカラー(黒または白)も選びます。

知っておくべきこと

• 補色と反転色は同じ演算ではありません。 両者が一致するのは完全に彩度の高い色の場合だけです。くすんだ色、パステルカラー、グレースケールでは、2つの計算結果は目に見えて異なります。
• 補色は控えめに使いましょう。 フル彩度の補色どうしを同じ分量で使うと、視覚的にちらついて目が疲れやすくなります。90対10のバランスにすると、うるさい印象ではなく意図的な印象になります。
• テキストカラーの提案はあくまで出発点であり、WCAGの保証ではありません。本文テキストの実際のコントラスト比は、公開前に専用のチェッカーで確認してください。
• 具体的な例: #2563EB(中間的な青、色相 ≈ 221°)の場合、補色は色相41°付近(暖色系のアンバー/オレンジ)に位置し、RGB反転色は#DA9C14になります — 元の色がかなり彩度が高いため、ここでは見た目が近い位置に来ていますが、くすんだグレーブルーから始めた場合には、2つの手法は大きく異なる結果になります。