くすみピンクに合う色は？落ち着いた配色の作り方

くすみピンクは、鮮やかなピンクにグレーを混ぜたような、彩度を抑えた穏やかな色として扱われます。ただし「くすみピンク」には世界共通のHEX値があるわけではなく、CSS（WEBページの見た目を指定する仕組み）にも dustypink という標準色名はありません。この記事では、FigmaがDusty Roseとして掲載している ■#DCA1A1 を代表例に、WEBサイトやバナーを落ち着いて見せる配色を考えます。

くすみピンクに合う色は？

基準の ■#DCA1A1 は、明るさを残しながら鮮やかさを抑えた赤系の色です。落ち着いた配色にしたい場合は、オフホワイトやグレージュを広い面積に使い、チャコールや深いグリーンで文字・ボタンを引き締めると、全体をぼやけさせずにまとめやすくなります。

• オフホワイト：■#FBF7F5。真っ白より少し柔らかく、くすみピンクの穏やかさを保ちやすい背景色です。
• チャコール：■#3A3032。本文や見出しをはっきり見せながら、純黒よりやわらかくまとめられます。
• グレージュ：■#DED4CE。背景やカード面に使うと、低彩度の色同士で自然な階層を作れます。
• くすみグリーン：■#657A6C。赤系のピンクと異なる色相を少量加え、静かな対比を作りたいときに使いやすい色です。
• ダークローズ：■#7B3F45。同系統の濃い色として、ボタンや重要な見出しにメリハリを付けられます。

落ち着いた配色を作る3つの組み合わせ

オフホワイトとチャコールで余白を活かす

背景を ■#FBF7F5、本文を ■#3A3032、ラベルや見出しの装飾を ■#DCA1A1 にすると、色数を抑えながらくすみピンクを主役にできます。本文と背景のコントラスト比は約11.96:1です。ピンクを大面積に広げず、見出し線・バッジ・小さな背景などに絞ると、余白のある落ち着いた印象を保ちやすくなります。

グレージュを加えて低彩度でまとめる

背景やカード面に ■#DED4CE、本文に ■#3A3032、アクセントに ■#DCA1A1 を使う配色です。本文とグレージュ背景のコントラスト比は約8.74:1です。どちらも彩度が低いため、面積差を付けないと全体が平坦に見えることがあります。グレージュを広く、くすみピンクを小さく使うなど役割を分けると整理しやすくなります。

くすみグリーンを加えて静かな対比を作る

背景を ■#FBF7F5、本文を ■#3A3032、くすみピンクを ■#DCA1A1、CTA（購入や申込みなど次の行動を促す主要ボタン）を ■#657A6C にします。白 ■#FFFFFF とくすみグリーン背景のコントラスト比は約4.61:1です。赤系と緑系の色相差はありますが、どちらも彩度を抑えることで、強すぎない対比にできます。

文字色やボタン背景に使うときは明度差を確認する

くすみピンクは穏やかに見える一方、明るい色では白文字とのコントラストが不足しやすくなります。今回の ■#DCA1A1 と白 ■#FFFFFF のコントラスト比は約2.17:1で、WCAG 2.2のAAで通常サイズの文字に求められる4.5:1には届きません。一方、ほぼ黒の ■#111111 なら約8.68:1です。

白文字のボタンにしたい場合は、同系統の濃い ■#7B3F45 を背景にすると、白 ■#FFFFFF とのコントラスト比は約7.96:1です。HueRollでは選んだ色と白・黒とのコントラストを確認できます。くすみピンクそのものは装飾や背景に、文字を載せる場所は濃い関連色にするなど、役割を分けて調整すると実用的です。