ピンクに合う色は？甘くなりすぎない配色のコツ【#FFC0CB】

ピンクは、Cambridge Dictionaryでは「淡い赤色」と説明される色です。WEBではCSS（WEBページの見た目を指定する仕組み）の標準色名 pink があり、その値は ■#FFC0CB です。やわらかく親しみやすい色ですが、淡い色や暖色だけでまとめると、用途によっては甘さが強く見えることがあります。この記事では ■#FFC0CB を基準に、WEBサイトやバナーで甘くなりすぎない配色を考えます。

ピンクに合う色は？甘さを抑えるなら濃色と無彩色を組み合わせる

■#FFC0CB は明るい色なので、周囲も同じような明るさ・暖かさでそろえるより、チャコールやネイビーなどの濃い色を加えると役割を分けやすくなります。ピンクの面積をアクセント程度に抑え、背景や本文を落ち着いた色にすると、やわらかさを残しながら全体を引き締められます。

• オフホワイト：■#FAF8F9。真っ白より少し柔らかい土台として使いやすい色です。
• チャコール：■#332C30。本文や見出しに使うと、ピンクの明るさを受け止めながら画面を引き締められます。
• クールグレー：■#E6E8EC。カードや補助面に使うと、暖色寄りのピンクに少し冷たさを加えられます。
• 深いネイビー：■#31445F。主要ボタンや見出しに使うと、ピンクとは異なる色相と明度でメリハリを作れます。
• 深いティール：■#466866。青緑を少量加え、暖色中心の配色から少し離れた印象にしたいときに使えます。

甘くなりすぎない3つの配色例

ピンクを10％程度のアクセントに絞る

背景を ■#FAF8F9、本文を ■#332C30、見出しの線やラベル、アイコンなどに ■#FFC0CB を使います。本文と背景のコントラスト比は約12.87:1です。ピンクをページ全体に広げず、視線を誘導したい部分へ限定すると、色の印象を活かしつつ甘さを抑えやすくなります。

クールグレーとネイビーで温度差を作る

ページ背景を ■#FAF8F9、カード面を ■#E6E8EC、本文を ■#332C30、主要ボタンを ■#31445F、ピンクを ■#FFC0CB にします。本文とグレー背景の比は約11.09:1、白 ■#FFFFFF とネイビー背景の比は約9.89:1です。ピンク以外を低彩度・寒色寄りにすると、かわいらしさだけに寄らない配色を作りやすくなります。

深いティールを加えて色相をずらす

背景と本文は同じまま、CTA（購入や申込みなど次の行動を促す主要ボタン）を ■#466866 にし、白 ■#FFFFFF の文字を載せると、コントラスト比は約6.12:1です。ピンクと青緑を同じ面積で競わせず、ティールを操作部分、ピンクを装飾や小さな強調に分けると、色相差を使いながら整理できます。

ピンク背景に文字を載せるときは白より濃色を検討する

■#FFC0CB と白 ■#FFFFFF のコントラスト比は約1.54:1で、WCAG（Web Content Accessibility Guidelines、WEBアクセシビリティのガイドライン）2.2の適合レベルAAで通常サイズの文字に求められる4.5:1には届きません。一方、ほぼ黒の ■#111111 なら約12.28:1、深いネイビーの ■#31445F でも約6.43:1です。

そのため、ピンクのボタンや帯に文字を載せる場合は、白文字を前提にせず濃い文字色も候補にします。HueRollでは選んだ色と白・黒とのコントラストを確認できます。ピンクをアクセントとして使うだけでなく、文字背景として使う場合は、実際の隣接色と役割を分けて確認すると、見た目と読みやすさを両立しやすくなります。