モダンなくすみカラー21選｜おすすめ色組み合わせ＆HEXコード一覧

くすんだ色合いは退屈ではありません――落ち着いたオリーブ、カーキ、アースカラーのニュートラルの現代的なミックスで、穏やかさと安心感、高級感を静かに演出します。

下記はすぐに使えるくすみ系カラーパレットのアイデアとHEXコード、そして落ち着きを保ちながらも単調にならないブランド、インテリア、UI向け実践ヒントです。

なぜくすみ系パレットはこんなに魅力的なのか

くすみ系パレットは色の「静かな中間域」に位置し、低彩度のオリーブ、カーキ、ストーングレー、キャンバスブラウンで構成されます。この控えめな色幅が視覚的なノイズを減らし、レイアウトに自信と意図を感じさせます。

くすんだトーンは自然と明度が近いため、柔らかな階層や奥行きを生みます――可読性や節度が重要なインターフェイス、エディトリアルレイアウト、パッケージに理想的です。

正しく使えば、くすみ系は現代的かつ高級に見え、色あせて見えることはありません。鍵は意図的なコントラスト（明るい背景に濃い文字）と、デザインらしい均一なスペース取りです。

20種以上のくすみ系カラーパレット案（HEXコード付き）

1）ダスティオリーブグラウンド

HEX： #6b6b57 #8a8a6d #a6a58a #4f4f3f #d2d0b8

雰囲気： 安定的・実用的・落ち着き

最適用途： UIダッシュボード

安定感のある実用的なくすみオリーブニュートラルは、使い込まれたキャンバスや愛用のフィールドギアのよう。画面上でもクリアで、暖かい人間味を保ちます。ナビゲーションにはディープオリーブ、パネルには淡い石色、チャートや状態説明には中間色を使い分けましょう。ヒント：#4f4f3fのテキストと#d2d0b8の背景でコントラストを強く保つこと。

media.ioを使って生成されたダスティオリーブグラウンドの画像例

Media.io

Media.ioは、ブラウザで動画・画像・音声の作成＆編集ができるオンラインAIスタジオです。

今すぐ無料で試す

2）モッシーリネン

HEX： #5f6650 #7a8067 #9da28c #c9c6b1 #3e4436

雰囲気： 柔らかい・ナチュラル・親しみやすい

最適用途： スキンケアパッケージ

苔とリネン調のトーンはハーブスチームや陶器の瓶、静かな薬局の棚を想起させます。優しい印象でウェルネス系ブランドに最適、かつ上質な雰囲気です。#c9c6b1をラベルの地色、#3e4436を文字色に使いましょう。ヒント：マットな紙質仕上げなど質感を加えると、くすみグリーンの「意図的で上品」な印象が際立ちます。

media.ioで生成したモッシーリネンの画像例

3）アーバンカーキ

HEX： #6a6452 #847d66 #a39b84 #c7c0ab #4a4538

雰囲気： モダン・落ち着き・建築的

最適用途： ブランドIDキット

建築的なカーキとくすみグレーは、コンクリートの街並みや金属の質感、静かな店舗を連想させます。重厚感がありつつ単なるグレースケールに陥らない配色。ロゴやワードマークには最も濃い色を、ステーショナリーには明るいカーキでレイヤー感を出します。ヒント：洗練された印象を保つため、背景はシャープなニュートラル1色に絞ると良いでしょう。

media.ioで生成したアーバンカーキの画像例

4）スモーク＆セージ

HEX： #596156 #737b6f #8e9688 #b9bdb0 #3c423c

雰囲気： クール・バランス・控えめ

最適用途： プレゼン資料テンプレート

スモークとセージのトーンは、霧の朝や石垣を思わせ、黒白ほどのコントラストを避けつつ、読みやすさを保つ。背景は#b9bdb0、見出しには#3c423c、重要データには#8e9688でハイライト。ヒント：チャートは2色以内に抑え、洗練された編集デザインを守りましょう。

media.ioで生成したスモーク＆セージ画像例

5）クレイフィールドノート

HEX： #6d5f52 #8b7b6c #a99686 #d1c5b8 #4c4036

雰囲気： 暖かさ・素朴・手触り感

最適用途： コーヒーショップメニュー

暖かみのあるクレイと使い込まれた紙色が、レザージャーナルやエスプレッソのクレマ、木のカウンターを思い出させます。安心感＆見やすさを兼ね備えたメニューに最適。本文は#4c4036と#d1c5b8の組み合わせ、見出しや価格は中間色のクレイで。ヒント：最も濃い色で小さな線アイコンを入れると、全体が整理されて印象UP。

media.ioで生成されたクレイフィールドノート画像例

6）くすみ森の散歩道

HEX： #4f5a45 #6a755d #879173 #b6bea2 #2f382a

雰囲気： アースカラー・アウトドア風・タフ

最適用途： アウトドアウェア広告

アース系グリーンが木陰の小道や耐久性あるギアの雰囲気。濃い色が力強さを、淡いグリーンが木漏れ日を表現。見出しは#2f382a、余白は#b6bea2を使い、商品説明はくっきりシャープに。ヒント：目立つカラーブロックは1つに絞り、シンプル＆タフな印象を壊さないように。

media.io生成のくすみ森画像例

7）ペブルドリフト

HEX： #6b6a63 #86857c #a8a79c #d3d1c6 #474640

雰囲気： 静か・ミニマル・軽やか

最適用途： ポートフォリオサイト

川石や淡い霧のようなくすみグレーが、作品の余白と呼吸感を演出。階層は控えめでイメージの邪魔をしません。ベースは#d3d1c6、文字は#474640、アクセントは中間グレー1色だけに。ヒント：余白をキープ、フォントは1種に絞ってギャラリーのような清潔感を。

media.io生成ペブルドリフト画像例

8）ターニッシュドブラス

HEX： #6a674d #8c8763 #b0aa7f #d6d0a7 #4a4833

雰囲気： ビンテージ・抑えめ・上品

最適用途： 商品パッケージラベル

くすみブラスやオリーブゴールドが、アンティークの金具や古地図、時を経た金属を彷彿とさせます。こうした1つのくすみ配色も、余白＆自信あるタイポグラフィでラグジュアリーに。ラベル地には#d6d0a7、ブランドマークには#4a4833を用い、色あせ感を予防。ヒント：#8c8763の細い枠線で全体を引き締めるとノイズレスに。

media.io生成ターニッシュドブラス画像例

9）レイニーパーカ

HEX： #5a5f55 #747a6e #8f9688 #c2c7bb #3a3f38

雰囲気： クール・控えめ・機能的

最適用途： モバイルアプリのオンボーディング

落ち着いたパーカグリーンと雨の日のグレーは、曇り空や頼れるジャケットのように安心感を与えてくれます。これらはオンボーディング画面を穏やかに保ち、コピーが主役となれるよう支えます。メインキャンバスには #c2c7bb を、テキストやアイコンには #3a3f38 を使用し、進捗インジケーターには #8f9688 を取っておきましょう。ヒント：小さくて高コントラストのボタンスタイルを1つ加え、ステップごとに一貫して繰り返してください。

media.io による雨の日のパーカの画像例

10) ヴィンテージ・カンティーン

HEX： #655f49 #7f7a5c #9b9674 #c9c3a0 #3f3b2b

雰囲気：伝統的、懐かしい、無骨

最適用途：クラフトビールラベル

伝統的なオリーブとカンティーンカーキが、手作りの品にぴったりな懐かしさと無骨さを演出します。色合いは良い意味で年代を感じさせ、紙ラベルや古いエナメルの雰囲気です。ブランドロックアップには #3f3b2b、ラベルベースには #c9c3a0 を使用し、バッジやメダルには #9b9674 を重ねましょう。ヒント：イラストの線画はシンプルに保ち、落ち着いた色合いにインパクトを残しましょう。

media.io によるヴィンテージ・カンティーンの画像例

11) アッシュメドウ

HEX： #616a52 #7b8564 #9aa47f #c6cfab #3b4231

雰囲気：穏やか、植物的、バランス

最適用途：植物ポスターイラスト

灰色がかった穏やかな草原グリーンは、押し葉や晩夏の野原を思わせます。パレットは壁のアートとして程よい穏やかさですが、自然の雰囲気もしっかり残ります。最も明るいグリーンを紙の色に、最も濃い色は茎やラベル、小さな文字に使いましょう。ヒント：ウォッシュは透明感を保ち、中間グリーンを重くならないよう柔らかく仕上げましょう。

media.io によるアッシュメドウの画像例

12) コンクリート・ハーブ

HEX： #5f6058 #787970 #96978c #c7c8bf #3c3d36

雰囲気：ニュートラル、クリーン、モダン

最適用途：SaaSランディングページ

コンクリートグレーに少しハーブを加えた色合いは、現代的でクリーン、静かにテクニカルな印象です。UIを冷たすぎず、鮮明に見せてくれます。大きな領域は #c7c8bf、見出しは #3c3d36、仕切りやセカンダリーボタンには #96978c を使いましょう。ヒント：力強いプロダクトスクリーンショットスタイルと組み合わせて、ページの一貫性を保ってください。

media.io によるコンクリート・ハーブの画像例

13) ウォーンキャンバス

HEX： #6c6255 #85786b #a39588 #d0c4b8 #4b4038

雰囲気：居心地の良い、手作り、タイムレス

最適用途：結婚式招待状

居心地の良いキャンバスブラウンや柔らかなトープはリネン生地、手書きのメモ、ろうそくのディナーを思わせます。ロマンチックだけど甘すぎないトーンで、現代的なラスティック文具に最適です。カードベースには #d0c4b8、テキストには #4b4038 を使い、装飾は中間ブラウンで控えめな深みを出しましょう。ヒント：小さなモノグラムマークを加え、余白を十分に取ってください。

media.io によるウォーンキャンバスの画像例

14) デューン・パトロール

HEX： #6b6a4c #8a885f #aaa777 #d5d1a0 #45432c

雰囲気：日焼けした、冒険的、暖かい

最適用途：旅行ブログヘッダー

日焼けした砂丘のトーンは砂漠の道、キャンバステント、ほこりっぽいロードトリップを思い起こさせます。暖かい黄緑色でアウトドア感を出しながら、強すぎず控え目。見出しタイプの後ろには #d5d1a0、コントラストには #45432c を、ボタンやタグには #aaa777 を使いましょう。ヒント：グレインテクスチャーを軽く追加し、自然な風化感を演出してください。

media.io によるデューン・パトロールの画像例

15) ローデン・イブニング

HEX： #4d4f44 #686a5b #858774 #b5b79f #2f3127

雰囲気：ムーディー、エレガント、抑制的

最適用途：レストランブランドムードボード

ムーディーなローデングリーンは夕方の光、暗い木材、静かな会話を感じさせます。深いベースカラーがブラックに頼らずプレミアムな雰囲気を作ります。ロゴタイプには #2f3127、主要な紙や背景には #b5b79f を使い、サブタイポグラフィには #858774 を取り入れましょう。ヒント：写真は暖色系で低コントラストに保ち、落ち着いたグリーンと調和させましょう。

media.io によるローデン・イブニングの画像例

16) ウェザード・バーンウッド

HEX： #6a5e55 #85786f #a59a92 #d2c7c0 #463c35

雰囲気：風化した、暖かい、親しみやすい

最適用途：リビングルームインテリアコンセプト

風化したブラウンと柔らかいグレーは、納屋の木材、ウールのスロー、自然な漆喰壁を連想させます。居心地が良く、整理されていて、キュレーションされたインテリアに理想的です。壁には淡い色、木材のアクセントや棚には最も暗いブラウン、中間色はテキスタイル全体に使いましょう。ヒント：ブラックや真鍮の細かなディテールを控えめに加え、部屋が平坦にならない工夫を。

media.io によるウェザード・バーンウッドの画像例

17) オリーブラテ

HEX： #6b6357 #877e71 #a59c90 #d2c8bd #4c443b

雰囲気：柔らかい、クリーミー、洗練された

最適用途：SNS投稿テンプレート

クリーミーなオリーブラテニュートラルは陶器のマグ、スチームミルク、暖かなカウンタートップの光を思わせます。製品投稿や引用投稿を派手なアクセントなしで洗練されて見せます。背景には #d2c8bd、テキストには #4c443b、#a59c90 の丸みを帯びたブロックで奥行き感を作りましょう。ヒント：画像は暖色系で彩度を抑えて、クリーミーなトーンに自然に溶け込ませましょう。

media.io によるオリーブラテの画像例

18) フォギー・シケット

HEX： #555f4a #707a60 #8c9674 #bcc7a3 #343b2e

雰囲気：霧のよう、オーガニック、静けさ

最適用途：ブックカバーデザイン

霧がかったグリーンと影の茎が、夜明けの霧の茂みを思わせます。コントラスト幅が太字タイトルを支えつつ、文学的で雰囲気のある印象に保ちます。この地味な色の組み合わせはセリフタイポグラフィと広いマージンで輝きます。ヒント：タイトルは #bcc7a3 を #343b2e に重ねて、控えめながら自信に満ちたアクセントに。

media.io によるフォギー・シケットの画像例

19) セピアガーデン

HEX： #6a5d4f #857667 #a39585 #d2c4b4 #4a3f35

雰囲気：暖かい、懐かしい、エレガント

最適用途：エディトリアルマガジン見開き

セピアガーデンブラウンは、乾いた花びら、古いフィルム写真、押し紙の質感を思わせます。エディトリアルレイアウトに暖かさと洗練をもたらします。ページベースには #d2c4b4、見出しには #4a3f35、引用やキャプションには #857667 を使いましょう。ヒント：余白を活用し、重い枠線は避けてプレミアム感を保ちましょう。

media.io によるセピアガーデンの画像例

20) クワイエットユーティリティ

HEX： #5c5b50 #77766a #949286 #c4c2b5 #3b3a33

雰囲気：ニュートラル、整理整頓、信頼感

最適用途：プロジェクト管理UI

ニュートラルなユーティリティトーンは、整理されたフォルダー、ラベルメーカー、整頓された作業台のような印象です。地味なパレットは生産性ツールで特に効果的、明快さが装飾よりも重要です。ボードやカードには #c4c2b5、テキストには #3b3a33、選択状態や区切りには #949286 を使いましょう。ヒント：アクティブアイテム用に一貫したハイライトスタイルを適用し、インターフェースがぼやけないように。

media.io によるクワイエットユーティリティの画像例

21) シルトストーン・スタジオ

HEX： #5f6151 #7a7c69 #969880 #c8cab2 #3d3f33

雰囲気：スタジオ、バランス、モダン

最適用途：ロゴとアイコンセット

シルトストーングリーンと柔らかなグレーは、自然光と落ち着いた素材の静かなスタジオ空間を呼び起こします。中間色はアイコンを親しみやすく、濃い色はマークをシャープに見せます。最も濃い色でアウトラインを、#969880 で形を塗り、最も明るい色はネガティブスペースに使いましょう。ヒント：アイコンを小さいサイズで可読性を試し、微妙な色合いがぼやけないよう確認しましょう。

media.io によるシルトストーン・スタジオの画像例

くすみ系に合う色は？

地味な色合いは他のグラウンド系ニュートラルと相性抜群：暖かいオフホワイト、ストーン、パテ、柔らかなチャコールが一体感を保ちつつ、タイポグラフィやUIの状態に十分なコントラストを与えます。

現代的なアクセントを加えるなら、クリーンなホワイト、濃いインク、控えめなメタリック（真鍮/ブロンズなど）を1色足しましょう。これで地味色が「泥っぽく」見えず、重要部分が際立ちます。

より大胆なアレンジをしたい場合、錆色やテラコッタ、クレイなど暖かいアクセントを1色加えて、パレットが意図的かつ現代的な雰囲気になるよう調整でき、落ち着いたムードは壊しません。

くすみ系カラーパレットの実際のデザインでの使い方

まずは淡い地味色をベースの表面（背景、紙、壁色）として選び、テキストやアンカーには濃い色を選びましょう。このシンプルな2段構成だけで、明快さが格段に高まります。

中間色はレイアウト要素に：カード、仕切り、UI状態、パッケージバンド、セカンダリ見出しなど。中間色を一貫して使うことで、デザインが「平坦」や低コントラストになるのを防げます。

仕上げはカラー追加ではなくテクスチャで—グレイン、マット紙、リネン、コンクリート、柔らかな影など。地味なパレットは素材やスペースの工夫で最も上質に映えます。

AIでくすみ系パレットのビジュアルを作成

地味なカラースキームを実際のレイアウト（UI、パッケージ、ポスター、インテリアなど）でプレビューしたい場合は、まずモックビジュアルを生成し、それからパレットを調整しましょう。

Media.io ならプロンプトからきれいなデザイン例をすぐ生成できるので、コントラスト・ムード・タイポグラフィの組み合わせをHEXコード込みでテストできます。

上記のプロンプトのいずれかを使い、自分の好きな地味色を入れ替えて試し、落ち着き・モダン・可読性がしっくりくるまで調整できます。

次： ラスティオレンジカラーパレット