キャメルに合う色は？あたたかく見せる配色例

キャメルは、黄みや橙みを含む明るめのブラウンを指す色名として使われますが、特定の1色に決まっているわけではありません。この記事では一例として ■#B77A47 を基準にします。キャメルのあたたかさを活かしながら、Webサイトの背景、文字、見出し、ボタンを見分けやすくまとめる配色を紹介します。

キャメルには明るい背景と深い低彩度色を合わせる

■#B77A47 のようなキャメルは、アイボリー系の明るい背景と合わせると、黄みのあるブラウンを広い面に使っても重くなりすぎにくくなります。本文には濃いブラウン ■#211C18 を使い、キャメルはカード、見出し帯、ボタンなど役割を決めて配置すると、あたたかさと情報の区切りを両立しやすくなります。

差し色には、彩度（色の鮮やかさ）を抑えたブルーグレー ■#435E66 やオリーブ ■#5B6042 が候補になります。キャメルと色みを離すならブルーグレー、近い自然色のまとまりを作るならオリーブというように、差し色の役割を1つに絞ると色数が増えすぎません。

あたたかく見せる3つの配色例

1. アイボリーと濃いブラウンでキャメルを主役にする

ページ背景をアイボリー ■#FFF8EE、カードや帯をキャメル ■#B77A47、本文を濃いブラウン ■#211C18 にします。本文とアイボリーのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約16.01:1、濃いブラウンとキャメルは約4.73:1です。明るい面を広く取り、キャメルをまとまった面に使うと、あたたかさを出しながら文字の役割も保ちやすくなります。

2. ブルーグレーでボタンを引き締める

主要ボタンやリンクにブルーグレー ■#435E66 を使うと、キャメルとは異なる色みを加えながら、鮮やかになりすぎないアクセントを作れます。アイボリー ■#FFF8EE 上のブルーグレーは約6.57:1、ブルーグレー背景に白 ■#FFFFFF を置く場合は約6.93:1です。ボタンやテキストリンクなど、操作を見つけやすくしたい場所に使いやすい組み合わせです。

3. オリーブで自然な暖色配色に寄せる

補助ボタンや短いラベルにオリーブ ■#5B6042 を使うと、キャメルの土っぽい色合いとつながりを保ちながら変化を付けられます。アイボリー ■#FFF8EE 上のオリーブは約6.23:1、オリーブ背景に白 ■#FFFFFF を置く場合は約6.57:1です。ブルーグレーとオリーブを同じ強さで併用せず、どちらか一方を主な差し色にするとまとまりやすくなります。

キャメルを文字色に使うときは明るさの差を確認する

キャメル ■#B77A47 とアイボリー ■#FFF8EE のコントラスト比は約3.38:1、キャメル背景と白 ■#FFFFFF は約3.57:1です。どちらも通常サイズの文字に必要な4.5:1には届かないため、キャメルを通常本文や白文字ボタンの背景として使う場合は注意が必要です。キャメル背景には濃いブラウン ■#211C18 を合わせると約4.73:1になります。

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