くすみカラー（スモーキーカラー）に合う色は？落ち着いた配色の作り方

くすみカラー（スモーキーカラー）は、鮮やかさを抑えた色を落ち着いて使いたいときに便利です。ただし、低彩度の色だけを並べると、文字・背景・ボタンの差まで弱くなり、どこを見ればよいか分かりにくくなることがあります。この記事では、くすみカラーを「彩度を抑え、灰みを感じる色」として扱い、オフホワイトや濃色を組み合わせて、静かでもぼやけない配色を作る方法を紹介します。

くすみカラーには明度差のある色を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度が0%に近づくほど無彩色に近づきます。ただし、彩度を下げるだけで使いやすい配色になるわけではありません。くすみカラー同士を合わせるときも、背景・文字・アクセントで明るさと役割を分けることが大切です。

落ち着きを保ちやすい基本形は、広い面にオフホワイトや淡いグレージュ、補助面にくすみカラー、本文にチャコールなどの濃色、主要操作に同系統の深い色を置く方法です。類似色のように近い色相は連続性を作りやすい一方、重要な要素の区別には明度差、枠線、文字ラベルなども必要です。

落ち着いて見せる3つの配色例

本文色のチャコール ■#2F3338 は、オフホワイト ■#F5F1EA 上で約11.29:1です。くすみカラーをそのままカード背景に使う場合も、スモーキーブルー ■#8FA0B2 では約4.75:1、スモーキーセージ ■#94A28D では約4.73:1、ダスティローズ ■#B3929C では約4.55:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

CTAをオフホワイト系の背景に置く場合、ディープブルー ■#4E6378、ディープグリーン ■#516448、ディーププラム ■#6C4B58 は、それぞれ対応する背景との比率が約5.52:1、5.75:1、6.26:1です。白文字 ■#FFFFFF との比率も約6.21:1、6.43:1、7.54:1あるため、通常サイズのボタン文字にも使えます。

色数を増やすより、面積と役割を整理する

くすみカラーは複数色を並べても強くぶつかりにくい反面、どの色も同じ面積で使うと役割が曖昧になりやすくなります。60–30–10の考え方を使うなら、数値を厳密に合わせるのではなく、背景を広く、補助色を中程度、アクセントを小さく使う目安として考えると整理しやすくなります。

また、選択中・未選択、成功・エラーなどの状態を、似たくすみ色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、枠線、形などを併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。くすみカラーを選んだら、近い色相の候補だけでなく、ティントとシェードで明暗差も確認すると役割を分けやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。