クリーム色（クリームイエロー）に合う色は？やわらかな配色を作るコツ

クリーム色（クリームイエロー）は、白に黄みを加えたような明るい色を指しますが、色名だけで1つのHEX値に決まるわけではありません。この記事では一例として ■#FFF2B8 を基準にします。クリーム色のやわらかさを残しながら、Webサイトの背景、文字、見出し、ボタンがぼやけない配色を考えます。

クリーム色には深いブラウンや低彩度の差し色を合わせる

■#FFF2B8 のようなクリーム色は明度（色の明るさ）が高いため、周囲まで淡い色だけでそろえると、要素同士の境目や文字の役割が弱く見えることがあります。本文にはダークブラウン ■#3B3128 のような十分に濃い色を使い、クリーム色はカードやセクション背景など広めの面に使うと、やわらかさと読みやすさを両立しやすくなります。

差し色には、深いネイビー ■#30475E や、彩度（色の鮮やかさ）を抑えたテラコッタ ■#8A4F3D が候補です。クリーム色とは明るさに十分な差があるため、ボタンやリンクなど役割のある場所を見つけやすくしながら、強すぎる配色になりにくい組み合わせです。

やわらかさを活かす3つの配色例

1. ウォームホワイトとダークブラウンで基本を整える

ページ背景をウォームホワイト ■#FFFDF8、カードや補助セクションをクリーム色 ■#FFF2B8、本文をダークブラウン ■#3B3128 にします。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、ダークブラウンとクリーム色で約11.26:1、ダークブラウンとウォームホワイトで約12.47:1です。明るい面を2段階に分けながら、文字は1つの濃色にそろえられます。

2. ネイビーを主要ボタンやリンクに使う

主要ボタンをネイビー ■#30475E、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約9.60:1です。クリーム色 ■#FFF2B8 上でネイビーを文字として使う場合も約8.52:1あります。黄みのある明るい背景に寒色の深い色を加えるため、やわらかさを残しつつ操作部分に明確な差を付けられます。

3. テラコッタを小さな暖色アクセントにする

見出しの一部や短いラベル、補助ボタンにテラコッタ ■#8A4F3D を使うと、クリーム色と同じ暖色方向のつながりを残しながら変化を付けられます。クリーム色 ■#FFF2B8 上のテラコッタは約5.71:1、テラコッタ背景に白 ■#FFFFFF を置く場合は約6.43:1です。ネイビーとテラコッタを同じ強さで使うより、どちらかを主な差し色に決めると配色を整理しやすくなります。

白に近い色同士だけで境界を作らない

クリーム色 ■#FFF2B8 と白 ■#FFFFFF のコントラスト比は約1.13:1です。見た目には少し黄みの差があっても明るさは近いため、文字や重要な情報の区別をこの2色だけに頼るのは避けます。クリーム色の上に文字を置くときはダークブラウン ■#3B3128 やネイビー ■#30475E など、実際に明るさの差がある色を使います。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。HueRollではクリーム色 ■#FFF2B8 を6桁のHEX（Webで色を表す16進数コード）で入力し、ティント、シェード、補色、類似色、各種配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した2色間の比率は別途計算した値です。