コーラルレッドに合う色は？やわらかく見せる組み合わせ
コーラルレッドは、珊瑚を思わせる明るく温かい赤です。色名の範囲には幅があり、世界共通のHEX値が1つだけ決まっているわけではありません。この記事では、複数のカラーデータベースでCoral Redとして扱われている #FF4040 を代表例に、WEBサイトやバナーでやわらかく見せる配色を考えます。
CSS（WEBページの見た目を指定する仕組み）には coral の #FF7F50 という標準色名がありますが、coralred という標準キーワードはありません。コーラルレッドは色名だけで共有せず、実際に使うHEXコードも決めておくと認識をそろえやすくなります。
コーラルレッドに合う色は？
基準の #FF4040 は鮮やかさが高く、赤の強さがはっきり出る色です。やわらかく見せたい場合は、周囲まで鮮やかな暖色にせず、クリーム系や淡いベージュを広い面積に使い、本文や主要操作を濃い色で支えると整理しやすくなります。
- クリームホワイト：#FFF8F5。真っ白より少し暖色寄りで、コーラルレッドの強さをやわらげやすい背景色です。
- ダークブラウン：#332B2B。本文や見出しに使うと、暖色のつながりを残しながら画面を引き締められます。
- ウォームベージュ：#F0DED6。カードや補助面に使うと、赤系のアクセントと自然につながる淡い階層を作れます。
- くすみセージ：#A8B59B。赤とは異なる色相を加えながら、彩度を抑えた穏やかな対比を作れます。
- 深いティール：#2F5961。主要ボタンなど、鮮やかな赤とは別の役割をはっきり見せたい場所に使えます。
やわらかく見せる3つの配色例
クリームホワイトを広く使い、赤の面積を絞る
背景を #FFF8F5、本文を #332B2B、見出しの線や小さなラベル、アイコンに #FF4040 を使います。本文と背景のコントラスト比は約13.15:1です。コーラルレッドを全面に広げず、小さな強調に限定すると、色の明るさを活かしながら画面全体を穏やかに見せやすくなります。
ベージュで暖色の間にワンクッション入れる
ページ背景を #FFF8F5、カード面を #F0DED6、本文を #332B2B、アクセントを #FF4040 にします。本文とベージュ背景のコントラスト比は約10.60:1です。淡いベージュを広い面積に使うことで、強い赤と背景の間に明るさ・彩度の差を作れます。
セージとティールで落ち着いた色相差を作る
補助面に #A8B59B、本文に #332B2B を使うと、本文とセージ背景のコントラスト比は約6.41:1です。さらにCTA（購入や申込みなど次の行動を促す主要ボタン）を #2F5961 にし、白 #FFFFFF の文字を載せると、コントラスト比は約7.71:1です。赤・緑・青緑を同じ面積で競わせず、アクセント・補助面・操作部分に役割を分けるとまとまりやすくなります。
コーラルレッド背景の文字色は白より濃色が使いやすい
今回の #FF4040 と白 #FFFFFF のコントラスト比は約3.47:1で、WCAG（Web Content Accessibility Guidelines、WEBアクセシビリティのガイドライン）2.2の適合レベルAAで通常サイズの文字に求められる4.5:1には届きません。一方、ほぼ黒の #111111 との比は約5.45:1で、通常サイズの文字の基準を上回ります。
そのため、この基準色をボタンや帯の背景に使う場合は、白文字を前提にせず濃い文字色も候補にします。コーラルレッドは色名だけでは明るさが一定ではないため、別のHEX値を使う場合は再確認が必要です。HueRollでは選んだ色と白・黒とのコントラストを確認できるので、実際に使う色を入力して両方の比を比べると判断しやすくなります。