カーキに合う色は？暗くなりすぎない組み合わせ

カーキは、落ち着いた緑みや黄みを含む中間色として使われることが多く、Webデザインでは背景や見出し、ボタンのアクセントに取り入れやすい色です。この記事では具体例として、カーキ ■#766B45 を基準色にし、ウォームアイボリー、ライトグレージュ、ペールブルーグレーを組み合わせます。暗い色だけで固めず、明るい面と寒色の薄い色を加えて、重く見えにくい配色へ整えます。

カーキは、明るいニュートラルと寒色の薄色で抜けを作る

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、今回のカーキ ■#766B45 は、色相約47度・彩度約26%・明度約37%です。彩度は低めですが明度も高くないため、背景やカードまで同じくらい暗い色でそろえると画面全体が沈みやすくなります。背景を明るいアイボリー、補助面をライトグレージュやペールブルーグレーへ分けると、カーキの落ち着きを残しながら軽さを作れます。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積まで調整することが重要とされています。カーキでは、暖色系の低彩度色だけでまとめず、淡いブルーグレーを補助面に加えると、色の主張を抑えながら寒暖の変化を作れます。

暗くなりすぎない3つの組み合わせ

本文色にはダークチャコール ■#2B2E2B を使うと、ウォームアイボリー ■#F8F5ED 上で約12.61:1、ライトグレージュ ■#E6DED1 上で約10.29:1、ペールブルーグレー ■#DCE5E7 上で約10.73:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

カーキ ■#766B45 は、ウォームアイボリー ■#F8F5ED 上では約4.87:1ですが、ライトグレージュ ■#E6DED1 上では約3.97:1、ペールブルーグレー ■#DCE5E7 上では約4.14:1です。通常文字として使う場合は背景ごとの確認が必要です。白文字 ■#FFFFFF をカーキ ■#766B45 のボタン上に置く場合は約5.30:1です。

主要なリンクや、複数の明るい背景をまたいで使う操作色には、ディープオリーブ ■#4A5133 を使う方法があります。ウォームアイボリー ■#F8F5ED との比率は約7.66:1、ライトグレージュ ■#E6DED1 とは約6.25:1、ペールブルーグレー ■#DCE5E7 とは約6.52:1です。白文字 ■#FFFFFF をディープオリーブ ■#4A5133 のボタン上に置く場合も約8.35:1です。

暗さはカーキを薄めるより、面積と背景で調整する

カーキを使う商品紹介やサービスページなら、背景をウォームアイボリー、カードをライトグレージュ、一部の案内面をペールブルーグレー、見出しや装飾をカーキ、主要リンクやボタンをディープオリーブへ分けると、落ち着きを残しながら画面全体を明るく保ちやすくなります。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、主役色や操作色を小さく使う目安として扱います。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。カーキを選んだら、ティントで背景候補、シェードで操作色候補、類似色や補色で補助色候補を比較すると、暗くなりすぎない配色へ整理しやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。