赤紫に合う色は？強すぎない配色の作り方

赤紫は、赤の温かさと紫の深さをあわせ持つため、アクセントに使うと存在感を出しやすい色です。一方で、周囲まで濃い色や高彩度の色でそろえると、画面全体が強く見えることがあります。この記事では、中程度の深さを持つ赤紫 ■#A23B72 を例に、オフホワイト、くすみグリーン、淡いピンクなどを合わせて、赤紫を主役にしながら強すぎない配色を作る方法を紹介します。

赤紫には、明るく低彩度の色を広く合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、色相は色の種類、彩度は鮮やかさ、明度は明るさを表します。赤紫のように色相の存在感が強い色は、周囲の色まで同じ強さにせず、明るく彩度を抑えた色を広い面に使うと主役と背景の役割を分けやすくなります。

基本は、背景にオフホワイトや淡い同系色、本文にチャコール、CTA（行動を促すボタン）やリンクに赤紫を使う形です。反対側の色相に近いグリーンを取り入れる場合も、鮮やかな緑ではなく、くすみを含む明るいグリーンを選ぶと、赤紫との色相差を残しながら競合を抑えやすくなります。

赤紫を強く見せすぎない3つの組み合わせ

チャコール ■#322A30 とオフホワイト ■#F8F3F6 のコントラスト比は約12.68:1です。くすみグリーン ■#DDE6D8 上では約10.85:1、ペールピンク ■#F3DEE8 上では約10.88:1で、いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

赤紫 ■#A23B72 をリンクやボタン色として使う場合、オフホワイト ■#F8F3F6 との比率は約5.62:1、くすみグリーン ■#DDE6D8 とは約4.81:1、ペールピンク ■#F3DEE8 とは約4.82:1です。白文字 ■#FFFFFF を赤紫 ■#A23B72 のボタン上に置く場合も約6.17:1あるため、通常サイズの文字に使えます。

赤紫の面積を絞り、色だけで意味を伝えない

赤紫を強く見せすぎないためには、色を薄くするだけでなく、使う面積を絞る方法も有効です。ページ全体を赤紫で覆うより、見出しの一部、CTA、リンク、バッジなど、重要な場所に限定すると視線の優先順位を作りやすくなります。60–30–10の考え方を使う場合も、数値を厳密に合わせるのではなく、背景を広く、補助色を中程度、アクセントを小さくする目安として扱います。

また、選択状態やエラーなどを赤紫と別の色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線などを併用すると、色の見え方が異なる場合でも意味を伝えやすくなります。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。赤紫を選んだら、まず淡い同系色や低彩度の反対色を候補にし、最後に白・黒とのコントラストを確認すると整理しやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。