コーラルピンクに合う色は？明るく自然な組み合わせ

コーラルピンクは、ピンクに少しオレンジを含んだような、明るく温かみのある色です。ただし「コーラルピンク」という名前に世界共通のHEX値が決まっているわけではありません。この記事では、FigmaなどでCoral Pinkとして紹介されている ■#F88379 を基準に、WEBサイトやバナーで明るく自然に見せる配色を考えます。

CSS（WEBページの見た目を指定する仕組み）の標準色名には coral の ■#FF7F50 や lightcoral の ■#F08080 がありますが、coralpink という標準色名はありません。そのため、WEB制作では使いたいコーラルピンクのHEXコードを明示しておくと、色の認識をそろえやすくなります。

コーラルピンクに合う色は？

基準の ■#F88379 は、明るい赤に黄みを含んだ色です。単独でも存在感があるため、背景や本文まで同じ強さの暖色でそろえるより、オフホワイト・ベージュ・深いグリーンなどを組み合わせると、明るさを残しながら画面を整理しやすくなります。

• オフホワイト：■#FFF8F3。コーラルピンクの温かさを保ちつつ、背景を軽く見せやすい色です。
• チャコール：■#2F2A2A。本文や見出しを落ち着かせ、明るいコーラルを引き立てます。
• ウォームベージュ：■#F3E2D0。背景やカード面に使うと、暖色同士でも単調になりにくい濃淡を作れます。
• 深いティール：■#2F6F68。青緑を少量加えることで、暖色中心の配色に変化を付けられます。
• 濃いコーラル：■#A43D35。同系統の濃い色として、ボタンや見出しにメリハリを付けたいときに使えます。

明るく自然に見せる3つの配色例

オフホワイトを広く使うシンプル配色

背景を ■#FFF8F3、本文を ■#2F2A2A、ボタンや小さなラベルを ■#F88379 にすると、コーラルピンクを主役にしながら余白を保てます。本文と背景のコントラスト比は約13.45:1です。コーラルはページ全体に広げるより、CTA（購入や申込みなど次の行動を促す主要ボタン）や見出しの装飾など、視線を集めたい場所に絞ると扱いやすくなります。

ベージュを加えてやわらかくまとめる

背景やカード面に ■#F3E2D0、本文に ■#2F2A2A、アクセントに ■#F88379 を使うと、暖色のつながりを残した穏やかな配色になります。本文とベージュ背景のコントラスト比は約11.17:1です。商品写真や料理写真など、もともと暖色を多く含む画像と合わせる場合は、コーラルの面積を小さくして写真と競合しないように調整するとまとまりやすくなります。

深いティールで自然な対比を作る

背景を ■#FFF8F3、本文を ■#2F2A2A、メインのアクセントを ■#F88379、補助アクセントを ■#2F6F68 にします。暖色のコーラルに対して青緑を少量入れると、色相差ができて要素を区別しやすくなります。白 ■#FFFFFF の文字と深いティール背景のコントラスト比は約5.84:1です。

コーラルピンクを文字やボタンに使うときの注意点

明るいコーラルピンクは、白文字を載せるとコントラストが不足しやすい色です。今回の ■#F88379 と白 ■#FFFFFF のコントラスト比は約2.47:1で、WCAG 2.2のAAで通常サイズの文字に求められる4.5:1には届きません。一方、ほぼ黒の ■#111111 なら約7.66:1です。

白文字のボタンにしたい場合は、同じ暖色系でも背景を濃い ■#A43D35 まで暗くすると、白 ■#FFFFFF とのコントラスト比は約6.37:1になります。HueRollでは選んだ色と白・黒とのコントラストを確認できるため、コーラルピンクをそのまま文字背景に使うか、より濃い色へ調整するかを実際の組み合わせで確認できます。