補色ファインダー

例

表示されるHEX、RGB、HSLは、同じsRGB色を表しています。CSSや別のデザインツールで使う値をコピーできます。

HSL補色とRYB補色

• HSL（画面）：赤 ↔ シアン、緑 ↔ マゼンタ、青 ↔ 黄。CSSで使われるsRGB由来のHSL色相角の幾何関係であり、光の混合を再現するものではありません。
• RYB（画材）：赤 ↔ 緑、青 ↔ 橙、黄 ↔ 紫。伝統的な教育上の取り決めであり、特定の顔料を混ぜた結果を予測するものではありません。

このツールはデジタルのHSLモデルだけを使用します。顔料の補色は素材と混ぜ方で変わるため、絵の具のRYB色相環への変換は行いません。

補色がうまく機能する場面

• ブランド背景に対するCTAボタン。メインカラーとその補色を組み合わせると、ボタンが際立ちます。
• データ可視化の2系列グラフ（利益と損失、ビフォーとアフター）。
• イラストの影：オレンジ色のカボチャの影は、より暗いオレンジよりも青で描いたほうが説得力があります。
• スポーツのブランディング：多くのチームが補色やスプリットコンプリメンタリーの配色（青／橙、赤／緑、黄／紫）を採用しています。

うまくいかない場面

• 背景の上の本文：直接の補色（緑の上の赤、オレンジの上の青）は読みづらく、強い色収差が目の疲れを引き起こします。
• 全面での使用：画面の50%が赤、50%が緑というのは目が疲れます。補色はメインではなく、アクセント（面積の5〜10%）として使いましょう。
• ブランドの一貫性：補色は雑然とした印象になりがちです。現代のブランドの多くは、二色の補色ではなく、モノクロームや類似色＋アクセント1色を使います。

スプリットコンプリメンタリー

スプリットコンプリメンタリー（ベース＋150°＋210°）は、実用上より良い選択になることがよくあります。

• 補色領域との高いコントラストを保ちます。
• 直接の補色によるちらつきを避けられます。
• レイヤード（重層的）なデザインのために2つのアクセントが得られます。

例：ベース＝青 → 補色＝オレンジ（きつい）→ スプリットコンプリメンタリー＝赤みオレンジ＋黄みオレンジ（より深みのある印象）。

補色の彩度を落とす

純粋な補色が最大彩度で美しく見えることはほとんどありません。一方または両方の彩度を20〜40%下げると、落ち着いた配色になります。

• 赤（S=100%）＋シアン（S=100%）＝ちらつく。
• 赤（S=60%）＋シアン（S=60%）＝古典的なポスター配色。
• ブランドのレンガ色（S=45%）＋くすんだティール（S=30%）＝モダンで実用的。

使う前の確認

• ペアのコントラスト比：このツールが算出します。4.5:1未満ではテキストでAAを満たしません。
• 中間色の背景でテスト：補色は白・グレー・黒のどれを背景にするかで見え方が変わります。
• 印刷が目的なら印刷テストを。CMYKはRGBに比べて彩度や補色の関係を変えてしまうことがあります。