この記事でわかること
彩度30〜60%の管理だけで「おばさんカラー」を回避する方法、コピペ即使用のカラーコード14セット、3分でできる配色失敗診断の手順。
くすみカラーの配色は、彩度を30〜60%に抑えてトーンを統一し、3〜4色以内に絞るだけでおしゃれな仕上がりになります。この記事では定義から具体的カラーコード・配色パターン14選まで、ウェブ・ファッション・インテリアで今日から使える形でまとめました。
この記事の結論
くすみカラー配色で失敗する最大の原因は「色数の多さ」と「トーンのズレ」の2点です。メイン・サブ・アクセントの3色構成を守り、彩度を30〜60%の範囲に統一するだけで、おばさんカラーにならずこなれ感のある大人配色が完成します。カラーコードはこの記事の14パターンからそのままコピペして使えるので、色選びの試行錯誤は最小限で済みます。
今日やるべき1つ
自分が使いたい場面（ウェブ・ファッション・インテリア）を決め、後述の状況別ショートカットから該当セクションに飛んで、カラーコードを1セットコピーしてください（3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| くすみカラーが何かを理解したい | くすみカラーは彩度30〜60%のグレイッシュトーン | 3分 |
| 配色ルールを先に把握したい | くすみカラー配色は3色・黄金比で決まる | 5分 |
| 今すぐ使えるコードが欲しい | くすみカラーは14パターンで網羅できる | 5分 |
| 失敗回避の判断をしたい | くすみカラー配色の失敗を3分で診断 | 3分 |
| 実際の使い方を確認したい | くすみカラー配色は5つの仕組みで定着する | 7分 |
| 成功・失敗の事例を見たい | くすみカラー配色の実例は2パターンで比較 | 4分 |
くすみカラーは彩度30〜60%のグレイッシュトーン
定義を整理してから配色ルールに進みます。「くすみカラーって結局どんな色なの?」という疑問は、HSLの数値で見ると一発で解決します。
くすみカラーは灰色を混ぜた彩度控えめな色
くすみカラー（別名: ニュアンスカラー・グレイッシュカラー）とは、純粋な鮮やかな色に灰色を混ぜることで彩度を落とし、穏やかで柔らかい印象にした色群です。HSLの彩度でいうと30〜60%の範囲が目安になります。鮮やかな赤（彩度100%）にグレーを加えると、くすみがかったローズになるイメージです。
この定義がわかると、「くすみカラー風にしたいけど色が決まらない」という状況で、既存の色から彩度を下げるだけで代用できます。配色ツール（Adobe Color・Coolorsなど）で彩度スライダーを動かすだけで、どんな色もくすみカラーに変換できるため、一から探す手間が省けます。大人可愛いアイコン無料5選でも、くすみピンクやグレージュなどの配色パターンを活用したSNSアイコン制作が紹介されており、くすみカラーの活用シーンの広さがわかります。
パステルとくすみカラーは明度の違いで判別できる
よく混同されるのがパステルカラーです。パステルは明度（明るさ）を高くした淡い色であるのに対し、くすみカラーは明度はそれほど高くせず彩度を抑えることでくすんだ質感を作り出します。HSLで比較すると、パステルは明度70〜90%・彩度50〜70%、くすみカラーは明度50〜75%・彩度20〜50%が典型的な範囲とされています。
この違いを知っておくと、「パステルにしたつもりがくすみになった」「くすみを出したかったのに明るすぎた」という色のズレを防げます。色選びの段階で明度と彩度を意識的に操作することが、ねらい通りの質感を出す最短ルートです。
くすみカラーが「おばさんカラー」に見える境界線
くすみカラーの最大のリスクは、地味・古臭い印象になることです。境界線は「彩度が20%以下まで落ちているかどうか」と「複数のくすみ色のトーンがバラバラかどうか」の2点にあります。彩度20%以下になると色みがほぼ消えてグレーに近くなり、くすみ感が出る前に濁った印象になります。またトーン（明度と彩度の組み合わせ）が異なるくすみ色を並べると、統一感がなく安っぽく見えます。
おしゃれなくすみカラー配色パターン集では「くすみカラーはこなれ感があるが、間違えるとおばさんカラーに。トーン統一と3〜4色で解決」という声が紹介されています。
彩度を下げすぎないことと、選んだ色のトーンをそろえることが、おしゃれと古臭さを分ける実質的な基準です。これを意識するだけで、同じくすみ色を使っても仕上がりが大きく変わります。
CHECK
▶ 今すぐやること: 使いたい色を1つ選び、HSLで彩度が30〜60%の範囲内か確認してください（2分）。範囲外なら彩度スライダーを調整するだけで解決します。
よくある質問
Q: くすみカラーとニュアンスカラーは同じですか?
A： 実務上ほぼ同義です。どちらも彩度を抑えたグレイッシュなトーンを指します。ニュアンスカラーはよりグレー寄りのニュアンスを含むと説明されることがありますが、配色作業では区別せず使っても問題ありません。
Q： くすみカラーはどんな場面に向いていますか?
A： ウェブデザイン・ファッション・インテリア・ブランディングなど、「大人っぽさ・落ち着き・こなれ感」を出したい場面に向いています。反対に、子ども向けや目立たせたいCTAボタンなど高彩度が有効な用途には向きません。
くすみカラー配色は3色・黄金比で決まる
配色のルールがわかれば、色を選ぶ前に「この組み合わせが成立するかどうか」を判断できます。ここでは失敗しない配色のルールを具体的な数値で整理します。
色数は最大4色・メイン60%の黄金比で組む
くすみカラー配色の基本は、使う色の役割を3〜4つに絞ることです。メインカラー（全体の60%）・サブカラー（30%）・アクセントカラー（10%）という比率が、俗に「黄金比」と呼ばれる配分です。ウェブデザインで言えば背景色がメイン、テキストエリアやカードがサブ、ボタンやラインがアクセントに対応します。
この比率を守らずアクセントを20%以上使うと、くすみカラーのトーンが崩れて全体がうるさく見え、落ち着きが消えます。逆にアクセントが5%未満になると、ぼんやりした印象になります。10%というのは「効いているが出すぎていない」絶妙なラインです。デザイン制作でくすみカラーを効果的に活用したい場合は、画像フリーアイコン選びの3条件のように素材選びと配色の方向性をセットで考えると、制作物全体のトーンを統一しやすくなります。
無彩色を1色加えると引き締まる
くすみカラーだけで構成すると輪郭が曖昧になりがちで、地味に見える原因になります。ここに無彩色（グレー・チャコール・ブラック）を1色加えることで全体が引き締まります。ポイントは、白を使う場合は純白（#FFFFFF）ではなくアイボリーやオフホワイト（#F8F5F0前後）を選ぶことです。純白を加えると白だけが浮いて、くすみカラー全体のトーンが壊れます。
グレー（#B5B5B5前後）をサブカラーの一部として使うと最も安全で汎用性が高いです。くすみカラーとグレーはトーンが近いため、ほぼどの色とも自然に組み合わさります。
トーンを統一するとは彩度と明度の範囲をそろえること
「トーンを統一する」という言葉は抽象的に聞こえますが、実務的には「選んだ全色の彩度が±15%以内・明度が±20%以内に収まっているか」を確認するだけです。この範囲を外れた色が1色でも混じると、その色だけが浮いて見えます。
配色ツールでは、Adobe ColorやCoolorsで「トーン」のモードを使うと、自動的に同トーンの色候補を出してくれます。手作業で調整する場合は、HSLスライダーでSとLの数値をそれぞれ上記の範囲内に収めるだけで十分です。
CHECK
▶ 今すぐやること: 使おうとしている色のHSL値を確認し、彩度が±15%以内・明度が±20%以内に全色がそろっているかチェックしてください（3分）。はみ出した色はアクセント以外なら除外が最善です。
よくある質問
Q: アクセントカラーもくすみカラーにすべきですか?
A： アクセントはくすみ寄りにすると統一感が出ますが、ぼやけ防止のためにやや彩度高め（彩度50〜65%）にするのも有効です。完全に鮮やかな色は避け、他のくすみカラーより彩度を10〜15%上げる程度が目安です。
Q： 4色を超えるとなぜ失敗しやすくなりますか?
A： くすみカラーは彩度が低いため、色の差が小さく識別が難しい状態です。そこに5色以上を並べると視線が定まらず、まとまりのない印象になります。3色でまず試し、どうしても必要な場合のみ4色目を加える順序が安全です。
くすみカラーは14パターンで網羅できる
ここからはカラーコードをそのまま使える配色パターンを14種類まとめます。用途別に分けているので、自分のシーンに合うパターンをコピーしてください。
ベージュ・ブラウン系の配色4パターン
甘さと落ち着きを両立したい場合は、ベージュ・ブラウン系が最も汎用性が高く、初心者でも失敗しにくい組み合わせです。
パターン1: ナチュラルベージュ3色メイン: #FDF9F0（アイボリーホワイト） / サブ: #E8D5C0（ライトベージュ） / アクセント: #B08060（ウォームブラウン）
パターン2: ベージュ＋テラコッタメイン: #F4EDE4 / サブ: #DCC5B0 / アクセント: #C08060（テラコッタブラウン）
パターン3: くすみベージュ＋グレーメイン: #F4EDE4 / サブ: #C0B8B0（グレイッシュベージュ） / アクセント: #707070（チャコール）
パターン4: カフェオレ系シック配色メイン: #EDE0D4 / サブ: #C4A882 / アクセント: #7A5C44（コーヒーブラウン）
ベージュ系の失敗で最も多いのは、黄色みの強いベージュと赤みの強いブラウンを同じ配色に入れることです。同系色でも色温度がズレると違和感が出るため、暖色系でそろえるか冷色系でそろえるかを先に決めてから色を選んでください。
ピンク系の配色4パターン
女性向けデザインやファッションで需要が高いのがピンク系です。くすみピンクは甘さを抑えながら柔らかさを保てるため、大人向けブランドに特に向いています。
パターン5: くすみピンク＋ベージュメイン: #FDF9F0 / サブ: #F6D7C2（ライトサーモン） / アクセント: #BC9D98（くすみローズ）
パターン6: くすみピンク＋カーキこなれ配色メイン: #F8F0EC / サブ: #F4B9B5（くすみコーラル） / アクセント: #848461（カーキグリーン）
くすみカラー色見本 コピペで使えるおしゃれなカラーコード辞典では「くすみピンクとカーキの組み合わせでこなれ感が出た。おしゃれ写真から学ぶのがおすすめ」という声が紹介されています。
パターン7: くすみピンク＋パープルメイン: #F6EEF2 / サブ: #E0C8D8（ミストモーブ） / アクセント: #A29CC4（くすみラベンダー）
パターン8: くすみピンク＋グレー・シックメイン: #F0E8E8 / サブ: #D4C0C0（くすみモーブグレー） / アクセント: #707878（ブルーグレー）
ブルー・グリーン系の配色4パターン
爽やかさや自然感を出したい場合はブルー・グリーン系が有効です。くすみブルーは清涼感を残しつつも落ち着きがあり、ウェブデザインのテキスト系要素にも使いやすい色です。
パターン9: くすみブルー＋ベージュメイン: #F0F4F8 / サブ: #A1B3C4（くすみスチールブルー） / アクセント: #C8A878（ウォームベージュ）
パターン10: くすみブルー＋ピンク・爽やか配色メイン: #EFF5F8 / サブ: #A3C1D1（くすみスカイブルー） / アクセント: #D4A0A0（くすみサーモンピンク）
パターン11: くすみグリーン＋ベージュ・アースカラーメイン: #F4F0E8 / サブ: #B0B898（くすみセージグリーン） / アクセント: #848461（ダークカーキ）
パターン12: くすみグリーン＋ブラウン・ボタニカルメイン: #EEF0E8 / サブ: #A8B090（ミストグリーン） / アクセント: #7A6450（テラコッタブラウン）
パープル系の配色2パターン
パープル系は上品さや神秘的な印象が必要な場面に向いています。彩度を抑えたくすみラベンダーは、美容・コスメ系のデザインで特に相性が良い色です。
パターン13: くすみラベンダー＋ベージュメイン: #F4F0F8 / サブ: #C8B8D4（くすみモーブ） / アクセント: #A29CC4（くすみラベンダー）
パターン14: くすみパープル＋グレー・シックメイン: #EEEAF4 / サブ: #A79BB7（くすみパープルグレー） / アクセント: #605870（ダークラベンダー）
CHECK
▶ 今すぐやること: 14パターンから用途に合う1セットを選び、カラーコードをメモ帳またはデザインツールにコピーしてください（3分）。まず1パターン試すだけで全体の方向性が決まります。
よくある質問
Q: これらのカラーコードをウェブのCSSで使うにはどうすればいいですか?
A： CSSではcolor: #F4B9B5;またはbackground-color: #FDF9F0;のように直接記述できます。変数化する場合は:root { –main: #FDF9F0; –sub: #F6D7C2; –accent: #BC9D98; }と定義しておくと管理が楽になります。デザインテンプレートを効率的に活用したい場合は、画像文字入れ無料ツール5選のようなブラウザベースのツールでカラーコードを直接入力して視覚確認する方法が手軽です。
Q: ファッションで配色を再現する場合はどこで色を確認すればいいですか?
A： スマートフォンのカメラでアパレルを撮影し、画像編集アプリ（Adobe Capture・Canvaなど）でカラーピッカーを当てると、着ている服の実際のHSL値が確認できます。購入前にカラーコードで参考値と比較する使い方が実用的です。
くすみカラー配色の失敗を3分で診断
今使っている配色がうまく見えない場合、3つの質問で原因を特定できます。
Q1: 彩度が20%以下の色が1色でも含まれていますか?
Yesの場合はQ2へ進む前に、その色の彩度を25〜35%まで上げてください。20%以下になると色みが消えて濁りが生じます。Noの場合はQ2へ進んでください。
Q2: 使っている色数が5色以上ですか?
Yesの場合はまず色数を3色まで絞ってください。アクセントカラー以外の全色を除き、メイン・サブ・アクセントの3色から再構築します。Noの場合はQ3へ進んでください。
Q3: 選んだ色の中にHSL彩度が±20%以上ずれている色がありますか?
Yesの場合は、飛び抜けて彩度の高い色または低い色が1色あるはずです。その色をアクセントにするか、彩度を他の色に合わせて調整してください。Noの場合は配色のルール上は問題ありません。ぼやけ感が残る場合は、アクセントカラーを現在より彩度を10%上げたものに差し替えると解消するケースがほとんどです。**
Result A（Q1がYes）:色が濁って見えるのは彩度不足が原因です。彩度を25〜45%に調整してから再確認してください。
Result B（Q2がYes）:色数過多が最大の原因です。3色まで削減し、削除した色は別の配色案として保存しておきましょう。
Result C（Q3がYes）:トーンのズレが原因です。Adobe ColorのHarmonyタブで「トーン」を選択すると、現在の色に合うくすみカラー候補が自動で並びます。
Result D（すべてNo）:**配色ルール上は問題ありません。それでもぼやける場合は、アクセントカラーの面積比を現在より5%増やすか、コントラスト（明度差）を大きくすることで視認性が改善します。
CHECK
▶ 今すぐやること: 今の配色のHSL彩度を全色確認し、20%以下の色があれば1色ずつ彩度を5%上げて確認してください（3分）。
よくある質問
Q: 配色ツールで無料で使えるおすすめはありますか?
A： Adobe Color（無料・ブラウザのみ）とCoolors（無料プランあり）が最も使いやすく、HSL操作と配色エクスポートの両方に対応しています。FigmaユーザーであればプラグインでCanvaと同様の操作が可能です。
Q： 診断でResult Dになったのにぼやける場合はどうすればいいですか?
A： 配色ルール以外の要因として、フォントカラーとの明度差が不足している可能性があります。テキストカラーに#404040〜#606060（チャコールグレー）を使い、背景との明度差を40以上確保してください。フォント選びについては日本語フォント無料おすすめ12選も参考になります。
くすみカラー配色は5つの仕組みで定着する
知識として知っていても実務で定着しない方のために、そのまま使える5つのアプローチを整理します。
ハック1: 彩度30〜60%ゾーンだけで色を選ぶと地雷を踏まない
【対象】:くすみカラー初心者で、何を選べばいいか判断できない方
【手順】:Coolorsのブラウザ版にアクセスし、スペースキーでランダムな色を生成します（1分）。気に入った色のHSLタブを開き、彩度（S）が30〜60%の範囲内か確認します（1分）。範囲外なら彩度スライダーを動かして範囲内に調整し、コードをコピーします（1分）。
【所要時間】:約3分
【コツと理由】:「くすみカラーを探す」ことに時間をかけるより、「既存の色から彩度を削る」方が速く確実です。Coolorsの彩度スライダーを30〜60%の範囲に固定して操作するだけで、理論上すべての色をくすみカラー化できます。失敗の大半は彩度20%以下または65%以上の色を無意識に混ぜることで起きており、数値で管理することでその判断を感覚ではなく確認作業に変えられます。
【注意点】:全色の彩度を同じ数値にそろえようとする必要はありません。±15%以内に収まっていれば見た目上の統一感は確保できます。完全に同一の彩度にこだわると色のバリエーションが失われて単調になります。
ハック2: 3色パレットを固定して使い回すと応用が速い
【対象】:毎回配色に時間がかかり、プロジェクトのたびに迷っている方
【手順】:上記14パターンから自分のテイストに合う1セットを選びます（2分）。デザインツール（Figma・Canvaなど）のカラースタイルとして3色を登録します（3分）。次回の制作時はスタイルを呼び出すだけで使い、別の配色が必要な場合のみ新規作成します。
【所要時間】:初回5分・2回目以降0分
【コツと理由】:ベースパレットを持っておき、アクセントカラーだけを案件に合わせて差し替える方が実務ではうまくいきます。くすみカラーはトーンが近いため、アクセントだけ変えても全体の統一感が壊れにくいのが特徴です。毎回ゼロから配色すると、過去の成功パターンを再現できず品質にバラつきが出ます。
【注意点】:同じパレットを5回以上使ったら一度見直してください。クライアントや読者が「また同じ配色だ」と感じるタイミングがあります。最低でも2〜3パターンを手元に持っておき、ローテーションする運用が有効です。
ハック3: 無彩色をサブに入れると配色の「逃げ道」が生まれる
【対象】:くすみカラー同士の組み合わせがぶつかっていると感じる方
【手順】:現在の配色から1色を取り出し、グレー（#B0B0B0〜#D0D0D0）に仮置きして全体を確認します（2分）。グレーが馴染む場合はそのまま採用し、浮く場合はやや暖色系グレー（#C4C0B8）に差し替えます（2分）。アイボリー（#F8F5F0）を背景として加えると、くすみカラーとグレーの両方が映える土台ができます（1分）。
【所要時間】:約5分
【コツと理由】:くすみカラー同士を直接並べるより、無彩色を緩衝地帯として間に置くアプローチが有効です。くすみカラーは彩度が近いため、2色を直接隣接させると境界がわかりにくくなります。グレーを挟むと視覚的な仕切りができ、各くすみカラーの色みが際立ちます。純白ではなくアイボリーを使うのは、純白が最も彩度0%・明度100%でくすみカラーのトーンから最も離れており、浮いて見えるためです。
【注意点】:無彩色は1色だけにしてください。グレーとオフホワイトを両方入れると「無彩色ゾーン」が広くなりすぎ、くすみカラー本来の柔らかさが消えます。無彩色はサブまたはベースの1箇所に限定するのが正解です。
ハック4: ファッションではアクセントを「小物1点だけ」に絞ると全体がまとまる
【対象】:ファッションでくすみカラーコーデを組もうとしているが、バランスが取れない方
【手順】:トップスとボトムスをメイン・サブの2色（同トーンのくすみカラー）で決めます（3分）。アクセントカラーのアイテムを1点だけ選びます。スカーフ・バッグ・靴のいずれか1点です（2分）。アクセントアイテムを変えるだけで同じ服で3通りのコーデを試し、最も馴染む1点に決定します（5分）。
【所要時間】:約10分
【コツと理由】:アクセントが複数になると一気にごちゃつきます。1点に絞ることで、10%というアクセントの割合を視覚的にも守れます。くすみカラーはどんな色？コーディネートの注意点とおすすめでは「くすみカラー初心者は無彩色から。淡い＋濃い色でメリハリがつき、大人カジュアルに着こなせた」という声が紹介されています。
【注意点】:アクセントカラーの服を複数枚持っていても、1日のコーデで使うのは1点だけに限定してください。「このジャケットにこのスカーフとこのバッグ」というように複数を同時に使うと、くすみカラーでも十分に主張が強くなりすぎます。
ハック5: グレイッシュ度を数値で調整するとリセットが速い
【対象】:配色をいくら調整してもしっくりこず、最初からやり直したくなる方
【手順】:問題の色をHSL形式で開き、SとLの値を記録します（1分）。S（彩度）を現在値から5%ずつ下げながら、視覚的にちょうどいい点を探します（2〜3分）。L（明度）を現在値から±5%動かし、他の色との明度差が15〜30%になるよう調整します（2分）。
【所要時間】:約5〜6分
【コツと理由】:「なんかしっくりこない」という感覚は、ほぼ彩度か明度の微妙なズレから来ています。感覚で操作を繰り返すのではなく、5%単位の数値変更に変換することで、どの方向に動かせば改善するかを論理的に追えます。くすみカラーは彩度の変化に対して見た目の変化が緩やかなため、5%刻みでも十分に差が確認できます。感覚的な作業を数値操作に変換するだけで、修正時間が大幅に短縮できます。作業効率を上げる方法と同様に、仕組み化することで繰り返しの試行錯誤を大幅に削減できます。
【注意点】:明度（L）は大きく動かさないでください。L値を±15%以上動かすとくすみカラーのトーンを超えてパステルや暗色に変化するため、Sだけ先に調整し、Lは微調整（±5〜10%）にとどめてください。
CHECK
▶ 今すぐやること: 5つのハックの中から自分の状況に最も近いものを1つ選び、手順のステップ1だけ今すぐ実行してください（1〜3分）。最初のステップに着手すれば、残りは自然に進みます。
よくある質問
Q: デザインツールを持っていない場合でも配色を試せますか?
A： Canvaの無料プランで十分です。新しいデザインを作成し、背景色と図形の色にカラーコードを入力するだけで、実際の組み合わせを視覚確認できます。操作はカラーピッカーにコードを貼り付けるだけです（所要2分）。
くすみカラー配色の実例は2パターンで比較
成功事例と失敗事例を並べることで、どこで差がつくかが具体的に見えます。
ケース1（成功パターン）: ウェブデザインでくすみベージュ3色を使った事例
ナチュラルコスメブランドのランディングページ制作で、「大人っぽい・落ち着き・こなれ感」という3つのキーワードが与えられた状況です。担当デザイナーはメイン#FDF9F0（アイボリー）・サブ#E8D5C0（ライトベージュ）・アクセント#BC9D98（くすみローズ）の3色を採用し、フォントカラーには#504840（ダークブラウン）を追加しました。
結果として、クライアントから「世界観が一発でわかる」と承認され、修正なしで納品完了となりました。アクセントのくすみローズをCTAボタンに使ったことで、前案比でクリック率が改善したとされています。おしゃれなくすみカラー配色パターン集でも「くすみカラーはこなれ感があるが、間違えるとおばさんカラーに。トーン統一と3〜4色で解決」という声が紹介されており、この事例はその原則が機能した典型例です。
アクセントをより鮮やかなコーラルピンク（彩度75%以上）にしていれば、他のくすみカラーとのトーン差が大きくなり、承認前に「浮いて見える」という指摘が入った可能性があります。
ケース2（失敗パターン）: ファッションコーデでくすみカラーを5色使った事例
ファッション初心者がくすみカラーでコーデを組もうとし、くすみピンクのトップス・くすみパープルのスカート・カーキのジャケット・テラコッタのスカーフ・グレーのバッグを同時に使いました。個別にはどれもおしゃれな色でしたが、5色を着用した状態で写真を撮ると「まとまりがない・どこを見ればいいかわからない」という印象になりました。
トーンは一致していたものの、色数が5色で視点が分散したことが問題です。スカーフとジャケットのどちらかを同系色（くすみピンクかグレー）に変え、3〜4色構成に絞ることで解決しました。くすみカラー色見本 コピペで使えるおしゃれなカラーコード辞典では「くすみカラーの5色コーデはまとまりが出にくい。3色に絞ることで一気に洗練された印象になった」という声が紹介されています。
最初から「アクセントは小物1点だけ」ルールを意識して組んでいれば、コーデの修正コストゼロで仕上げられた事例です。
CHECK
▶ 今すぐやること: 自分が今使っている配色の色数を数えてください。5色以上あれば今すぐ3色に絞る作業を開始してください（5分）。
よくある質問
Q: 失敗した配色を修正するとき、どの色を残すべきですか?
A： 最も使用面積が大きい色（メインカラー）を残し、次にアクセントカラーを残します。サブカラーはメインとアクセントが決まった後に、両者をつなぐ中間的な色として選び直すと整合性が取りやすくなります。
くすみカラー配色を定着させる：3色・トーン統一で今日から始める
くすみカラー配色で失敗しない核心は、使う色の彩度を30〜60%に収め、3色構成（メイン60%・サブ30%・アクセント10%）を守るだけです。色の知識がなくても、数値で管理すれば感覚に頼らず安定した配色が作れます。カラーコードはこの記事の14パターンからそのまま使え、HSLの彩度スライダーを動かすだけで自分の用途に合わせた微調整が可能です。
何色を選ぶかより、彩度とトーンをそろえるかどうかの方がはるかに大きく結果に影響します。まず1パターンを選んでそのまま試してください。調整は後からいつでもできますが、最初の1セットを確定することが最大のハードルです。
| 状況 | 次の一歩 | 所要時間 |
| 初めてくすみカラーに挑戦する | 14パターンから1セットをコピーしてデザインツールに貼る | 3分 |
| 今の配色がぼやけている | 全色のHSL彩度を確認し20%以下の色を修正する | 5分 |
| ファッションで使いたい | トップス・ボトムスをメイン・サブに固定しアクセント小物を1点選ぶ | 10分 |
| ウェブCSSに組み込みたい | :rootにカラー変数として3色を定義する | 5分 |
| 配色ツールを初めて使う | CoolorsをブラウザでアクセスしSを30〜60%に固定して試す | 5分 |
差が大きいとパステル側が浮いて見えます。
よくある質問
Q： 黒を加えてもくすみカラーとして成立しますか?
A： 黒（#000000〜#202020）をメインやサブに使うとくすみカラーのトーンが壊れます。引き締め色として使う場合はチャコール（#404040〜#606060）に抑え、アクセントのさらに副次的な要素（ラインや細いテキスト）に限定するのが安全です。
Q： インテリアでくすみカラーを使う場合の注意点はありますか?
A： 大面積に使う壁や床はメインの1色に絞り、家具でサブカラーを使います。アクセントはクッションや小物など交換しやすいアイテムにとどめると、季節ごとに入れ替えが可能です。照明の色温度（電球色・昼白色）によってくすみカラーの見え方が変わるため、実際のアイテムを現地に持ち込んで確認してください。
【出典・参照元】
おしゃれなくすみカラー配色パターン集｜大人っぽくて今っぽい色