ピンクとブラウンは合う？甘さを調整する色合わせ

ピンクとブラウンは、一方を広く使い、もう一方を文字やアクセントに回すと組み合わせやすい配色です。ただし、ピンクを広く使うとやわらかさが前に出やすく、ブラウンを増やすと落ち着いた印象に寄せられます。Webの告知バナーを例に、色の濃さと面積で「甘さ」を調整する方法を紹介します。

甘さはピンクの面積とブラウンの濃さで調整する

淡いピンク■#F4D6DCと深いブラウン■#4E342Eは、明るさの差があるため、背景と文字に役割を分けやすい組み合わせです。HEX（ヘックス）カラーコードは、色を「#」から始まる英数字で表す方法で、この記事では6桁の形式を使います。色の明るさを「明度」、鮮やかさを「彩度」といい、色の印象はその両方に加えて使う面積や周囲の色でも変わります。

やわらかい雰囲気を強めたいなら、淡いピンク■#F4D6DCを背景に広く使い、ブラウン■#4E342Eを見出しとボタンに絞ります。甘さを控えたいなら、生成り■#FFF8F2やブラウン■#4E342Eを大きな面に置き、少しくすんだローズ系のピンク■#BD7F8Aを小さな飾りに使います。特定の色が必ず同じ印象を生むわけではないため、扱う商品や写真に合わせて判断しましょう。

ピンクの面積を変えた2つの配色例

例1：焼き菓子フェアの告知は淡いピンクを広く使う

新作クッキーの告知バナーなら、背景を淡いピンク■#F4D6DCにし、商品名と説明文は深いブラウン■#4E342Eにします。価格や販売期間をまとめる小さな案内欄は生成り■#FFF8F2とし、欄内の文字もブラウン■#4E342Eに統一します。「商品を見る」ボタンはブラウン■#4E342Eで塗り、文字に生成り■#FFF8F2を使います。明るいピンクを広く取っても、濃い文字とボタンを置けば重要な情報を区別できます。

写真にピンク色の包装や菓子が多い場合は、背景のピンクを減らし、生成りの余白を増やして調整します。淡い色をいくつも重ねるより、写真・見出し・ボタンの順に何を見てほしいか決めるのがポイントです。

例2：革小物の新作紹介はブラウンを主役にする

落ち着いた方向に寄せるなら、背景を生成り■#FFF8F2にして、見出しを載せる帯を深いブラウン■#4E342Eにします。帯の文字は生成り■#FFF8F2、商品説明は生成りの背景にブラウン■#4E342Eを使います。ピンクはくすんだローズ■#BD7F8Aを選び、見出しの下の短い線や写真の横の小さな飾りだけに配置します。「詳細を見る」ボタンもブラウン■#4E342Eに生成り■#FFF8F2の文字を合わせ、飾りより操作を優先します。

同じピンクとブラウンでも、ピンクを背景から小さな装飾へ移すと見た目の重心が変わります。広い面の色、見出しの文字色、装飾の面積を別々に調整すると比較しやすくなります。

文字のコントラストと淡い色同士の境界に注意する

コントラスト比は文字と背景などの明るさの差を表す数値です。Webコンテンツのアクセシビリティに関する指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。深いブラウン■#4E342Eと淡いピンク■#F4D6DCの比は約8.36:1、ブラウン■#4E342Eと生成り■#FFF8F2は約10.76:1で、どちらも通常文字の基準を満たします。

一方、少し明るいブラウン■#89625Bと淡いピンク■#F4D6DCは約3.91:1、くすんだローズ■#BD7F8Aと生成り■#FFF8F2は約3.04:1です。どちらも通常文字の4.5:1に届かないため、小さな説明文には使わず、濃いブラウンを選びます。淡いピンク■#F4D6DCと生成り■#FFF8F2の差も約1.29:1しかないので、操作に必要な枠やアイコンをこの差だけで示さないでください。意味を持つ文字以外の要素は、原則として隣接色との3:1以上が求められます。

HueRollでは選んだ色と白・黒とのコントラストを確認できますが、ピンクとブラウンなど任意の2色の比やAAの適合判定は自動で確認できません。実際に隣り合う色を別途計算し、写真の上に文字を載せる場合も文字の背後の色で確認しましょう。