シャドウカラーパレットは、大胆なコントラストと穏やかなニュートラルの中間に位置し、UIや印刷物、ブランドシステム全体で使いやすいものです。
下記はHEXコード付きの20種類のモダンなシャドウトーンパレットの組み合わせと、実用的なペアリングのコツ、AIで素早くビジュアルモックアップを作るためのプロンプト例です。
シャドウパレットが優れている理由
シャドウパレットは、ほぼ黒・チャコールグレー・ソフトなアクセントに基づくため、派手になりすぎず自然に階層感を作り出します。ミニマルなレイアウトでも深みと構造を持たせることができます。
また、純粋な黒や極端な鮮やかさを避けているため、どのデバイスや印刷でも再現性が高いです。グラデーションはなめらかに、タイポグラフィは落ち着き、背景も使いやすくなります。
特に重要なのは、シャドウトーンがアクセントを意図的に見せてくれる点です。モーブやカッパー、ティール、オリーブなど一色だけでもブランドらしさを出しつつ、ベースのニュートラルで一体感を保ちます。
20種類以上のシャドウカラーパレットアイデア（HEXコード付き）
1) ミッドナイトベール
HEX: #0f1116 #242833 #3b4252 #7a8090 #d8d9df
雰囲気: ミステリアス、クリーン、高コントラスト
おすすめ用途: ダークモードSaaSダッシュボードUI
深夜の霞を切り裂く都会の灯のように、ミステリアスでクリアなパレットです。階層が重要なダークモードレイアウトや文字の明瞭さが必要な場面に最適。最も濃いチャコールと淡いグレーで可読性を確保し、スレート色をカードやパネルの中間色に。ポイント：一番明るい色は重要指標や主要ボタン用にとっておくと、フォーカスを絞れます。
media.ioで生成したミッドナイトベールの画像例
Media.ioは、ブラウザで動画・画像・音声編集・生成ができるオンラインAIスタジオです。
2) グラファイトブルーム
HEX: #1a1b1f #2f323a #4a4f5c #8e90a0 #cbb6c9
雰囲気: モダン、ソフト、ややロマンチック
おすすめ用途: ビューティブランドアイデンティティセット
グラファイトの粉に花びらの色が加わったような、モダンでベルベットのような質感。パステルに寄りすぎずエレガントなビューティ系ブランドに。ロゴや文字を濃いグラファイトで支え、モーブ色をアクセントやパターン、SNS用テンプレートで。ポイント：バックグラウンドはクールグレーを使い、ローズカラーのアクセントを際立たせましょう。
media.ioで生成したグラファイトブルームの画像例
3) スモーク＆マルベリー
HEX: #16131a #2c2431 #4d3a55 #7f6a86 #cfc6d6
雰囲気: ムーディー、ラグジュアリー、クリエイティブ
おすすめ用途: アルバムカバーアートワーク
お香の煙がベルベットの部屋に流れるような、ムーディーかつ贅沢なパレット。音楽系ビジュアルやインディーズ作品、シネマティックでドラマチックなカバーアートに最適。マルベリー色でタイポグラフィを大胆に、ラベンダーグレーでフレームに奥行きを。ポイント：一番暗い部分には微細なグレイン効果を加えると、深みが増します。
media.ioで生成したスモーク＆マルベリーの画像例
4) インクストーンリネン
HEX: #121418 #2a2d33 #545a63 #a8abb0 #efe6d8
雰囲気: エディトリアル、落ち着き、タイムレス
おすすめ用途: 雑誌特集レイアウト
インクが麻布に浸透したような、落ち着きと知性のあるパレット。強すぎないコントラストで、長文を読むのに理想的です。マージンや余白に暖かみのあるリネン調を使い、チャコールのラインとスレートの小見出しで構造を作ります。ポイント：本文はやや暗めのグレーで、目の疲れを抑えましょう。
media.ioで生成したインクストーンリネンの画像例
5) ダスクオーキッド
HEX: #14121a #2a2436 #443a57 #6e6a86 #d9d3e8
雰囲気: ドリーミー、エレガント、控えめ
おすすめ用途: ウェディング招待状一式
薄暮に照らされたオーキッドのように、夢幻的で上品。明るすぎないロマンチックな招待状や、夜のイベントにぴったりです。一番暗いパープルと柔らかいライラックを文字やモノグラムに、グレー寄りの色はフチや細部に使用。ポイント：未コート紙で印刷すると、深みの色が柔らかく保てます。
media.ioで生成したダスクオーキッドの画像例
6) フォグバウンドパイン
HEX: #101416 #253033 #3f5653 #7f928b #d7ddd8
雰囲気: 静けさ、アウトドア、バランス
おすすめ用途: エコ製品パッケージ
松の葉が朝霧に溶け込むような、落ち着いたアウトドア感。ビビッドグリーンを使わず、自然な雰囲気のエコパッケージに最適です。ラベルはディープティール×チャコールで、淡いミストで余白や成分表に清潔感を。ポイント：マットな仕上げにすると濃いインクがアース感と高級感を持ちます。
media.ioで生成したフォグバウンドパインの画像例
7) シンダーローズ
HEX: #1b1316 #332026 #5a3540 #9b6d79 #e7d6db
雰囲気: スモーキー、暖かみ、親密感
おすすめ用途: レストランメニューデザイン
バラ色の灰の下で輝く残り火のように、煙たく温もりあるパレット。親しみと食欲を演出するメニューやホスピタリティ向き。見出しは一番暗い色で、ダスティーローズは区切りや強調に。ポイント：一番明るいピンクベージュは紙や背景用にとどめ、重たさを避けます。
media.ioで生成したシンダーローズの画像例
8) シャドウハーバー
HEX: #0e1418 #1f2a30 #334851 #6f8791 #d2dde1
雰囲気: クール、ノーティカル、プロフェッショナル
おすすめ用途: 金融系ランディングページUI
夕暮れの港のような、安定感のあるクールなパレット。信頼感・構造・現代的な印象が必要な金融やコンサルサイトに最適です。ヘッダーやヒーローエリアはダークブルーブラック、カードやグラフには落ち着いたブルー。ポイント：一番明るい色でボタンなど目立たせ、テキストは濃い色で構成すると静かで自信のある導線が作れます。
media.ioで生成したシャドウハーバーの画像例
9) クワイエットオブシディアン
HEX: #0b0c0f #1a1c22 #2f323b #5b606d #bfc3cc
雰囲気: ミニマル、集中、上質
おすすめ用途: 写真ポートフォリオWEBサイト
オブシディアンが柔らかい光沢に磨かれたような、ミニマルで集中力を高めるパレット。作例自体が主役でインターフェイスは極力目立たせたくないポートフォリオに最適です。細やかなグレーの階調でギャラリーやナビゲーションを構成し、意図的なバランスに。ポイント：大面積には純黒を避け、ほぼ黒で繊細なディテールを保ちます。
media.ioで生成された静かな黒曜石の画像例
10) スレートラベンダー
HEX: #15161b #2a2d38 #4a4f66 #8c90ab #e4e3f0
雰囲気: 穏やか、テクノロジー感、親しみやすい
おすすめ用途: ヘルスアプリのオンボーディング画面
穏やかで親しみやすい、冷たいスレートの上にラベンダーの霧がかかったよう。これらの色調は、安心感が重要なヘルスや習慣アプリに最適です。主なUIにはスレートを使用し、ラベンダーをアイコンや進捗状態にアクセントとして加えましょう。コツ：淡い色調を背景パネルに、最も暗い色調を重要なラベルに使用し、コントラストを一定に保ちます。
media.ioで生成されたスレートラベンダーの画像例
11) コール＆クレイ
HEX: #14100e #2b221d #4e3c33 #8a7162 #e7dccf
雰囲気: アース感、触感、素朴
おすすめ用途: 陶芸スタジオのブランディング
アース感と触感、暖かい粘土に煤が舞うイメージ。正直な素材と落ち着きを求めるメーカーや陶芸スタジオ、クラフトラベルに最適です。深いブラウンブラックでロゴやスタンプを作成し、クレイベージュはパッケージ背景や領収書などに使いましょう。コツ：中間の茶色を単一テクスチャーパターンとして加えると、手作り感を演出しデザインを邪魔しません。
media.ioで生成されたコール＆クレイの画像例
12) ストーミープラム
HEX: #111016 #262232 #3c314e #6b5b7a #cfc5d6
雰囲気: ドラマティック、芸術的、洗練
おすすめ用途: 劇場ポスターのデザイン
ドラマティックで洗練された印象、嵐雲がプラムベルベットのカーテンを覆うようなイメージ。このシャドウカラーの組み合わせは、深みやコントラスト、期待感が必要なポスターに最適です。ほぼ黒を背景に使い、プラムタイポグラフィやソフトラベンダーのアクセントで目線を誘導しましょう。コツ：強いフォーカル要素を一つだけ配置し、暗いスペースを効果的に使います。
media.ioで生成されたストーミープラムの画像例
13) アッシュンオリーブ
HEX: #121412 #262c24 #3f4a3a #7c8a73 #dde2d6
雰囲気: 落ち着き、自然、穏やか
おすすめ用途: 植物水彩プリント
落ち着きと穏やかさ、日陰で乾いたオリーブの葉のようなイメージ。植物アートやウェルネスプリント、自然志向の文房具にぴったりです。淡いグレーグリーンを紙色にし、ミッドオリーブと深いモスで葉の形を作りましょう。コツ：柔らかいエッジと透明感のあるウォッシュを使い、パレットがミリタリー風ではなくエアリー感を保ちます。
media.ioで生成されたアッシュンオリーブの画像例
14) ファントムティール
HEX: #0d1416 #1b2a2e #2f4c4f #6f8f91 #d6e1e1
雰囲気: スマート、クール、未来的
おすすめ用途: サイバーセキュリティ製品広告
スマートでクール、暗いガラスに反射するティールの光をイメージ。現代的でテクニカルな雰囲気が必要なサイバーセキュリティ広告におすすめです。深いティールで背景ブロックを、淡いアクアグレーでハイライトやバッジ、アイコンの線を作りましょう。コツ：グラデーションは控えめに、明るい色調はステータス表示など小さなシグナルに限定します。
media.ioで生成されたファントムティールの画像例
15) ムーンリットココア
HEX: #120f0e #2a211e #46352e #8a7468 #e9dfd8
雰囲気: 居心地よさ、暖かさ、高級感
おすすめ用途: コーヒーショップの会員カード
居心地よく高級感、カフェの薄暗いライトの中のココアの蒸気のイメージ。暖かいニュートラルカラーは、コーヒーブランディングや会員カード、小さなパッケージに最適です。最も暗いエスプレッソトーンで文字やスタンプを作り、クリーミーベージュ背景やソフトブラウンアクセントでバランスを取ります。コツ：中間ブラウンで細い枠を加え、重くならないようにデザインを囲みます。
media.ioで生成されたムーンリットココアの画像例
16) アイアンライラック
HEX: #14141a #2b2c3a #45465e #7a7b99 #dad8e6
雰囲気: インダストリアル、ソフト、現代的
おすすめ用途: 建築スタジオウェブサイト
インダストリアルでありながらソフト、ライラック色の夕暮れ光に照らされた鉄の梁のイメージ。建築やインテリアスタジオなど、技術的精度と人間味を求めるブランドに自信のある色です。最も暗い色調でナビやヘッドラインを、ライラックグレーでグリッドやキャプション、プロジェクトタグをサポートします。コツ：十分な余白を取り、控えめな紫色が洗練されて見えるように。
media.ioで生成されたアイアンライラックの画像例
17) ススサンドストーン
HEX: #151311 #2e2924 #564d44 #9a8f84 #efe7de
雰囲気: 歴史感、自然、控えめ
おすすめ用途: 博物館チラシデザイン
歴史と控えめ、古いサンドストーン壁に積もる煤のイメージ。信頼感と温かみを同時に求める博物館や文化イベントに最適です。ダークブラウングレーでタイトルや日付を、砂のニュートラルカラーで背景や情報ブロックを構築します。コツ：セリフ体とサンセリフ体を一つずつ組み合わせ、古さと新しさを演出しましょう。
media.ioで生成されたススサンドストーンの画像例
18) レイヴンベリー
HEX: #0f0c12 #251b28 #3f2a3e #7a5d73 #e2d6df
雰囲気: 謎めいた、大胆、スタイリッシュ
おすすめ用途: ファッションエディトリアル表紙
謎めいてスタイリッシュ、レイヴンの羽の下のダークベリーのイメージ。ドラマティックさを求めつつ、印刷で洗練された印象を保ちたいファッション誌向けです。カバー背景にほぼ黒を使い、ヘッドラインや細いルールにはベリーマーブを採用して、ラグジュアリー仕上げに。コツ：アクセント要素は小さく意図的に、ダークトーンが支配的に残るようにします。
media.ioで生成されたレイヴンベリーの画像例
19) ミスティチャコール
HEX: #101114 #23262d #3d424e #7e8596 #e3e6ee
雰囲気: ニュートラル、空気感、信頼感
おすすめ用途: プレゼンテーションスライドデッキ
ニュートラルで空気感のある、海岸の霧で柔らかくなったチャコールのイメージ。チャートや数字、見出しに一貫した明瞭さが必要なスライドデッキに最適です。ミッドチャコールを本文、淡い色調をキャンバス、深いトーンをセクションディバイダーに。コツ：最も明るい色調をパネルとして主要データの背景に用いると、スキャンが速くなります。
media.ioで生成されたミスティチャコールの画像例
20) ノクターンカッパー
HEX: #120f12 #2a252b #463a45 #9a6b57 #f0e2da
雰囲気: ムーディー、暖かさ、プレミアム感
おすすめ用途: 高級キャンドルのパッケージ
ムーディーでプレミアム、暗い部屋で光を浴びるカッパーのイメージ。このシャドウカラーパレットは高級キャンドル、フレグランスラベル、ギフトボックスなど、明るさを控えつつ温かみを求める場合に最適です。カッパートーンはフォイルディテールなどに限定的に使い、メインラベルにはディーププラムチャコールを使用。コツ：背景は明るくクリーミーに保ち、金属アクセントが意図的かつ高級感を持たせるようにします。
media.ioで生成されたノクターンカッパーの画像例
シャドウと相性の良い色は？
シャドウトーンは、ミスティホワイト、リネンベージュ、淡いライラックなど柔らかいライトカラーと組み合わせると、純白のような強いコントラストがなく、読みやすさを維持できます。これによってUIや編集ページが滑らかな印象になります。
アクセントには、一つの抑えめの色調（マーブ、カッパー、スレートブルー、控えめなティール、アッシュンオリーブなど）を選び、コンポーネント全体で繰り返し使うと良いです。ベースがダークニュートラルなら、彩度が低くてもアクセントが意図的に見えます。
エネルギーが必要な場合は、「シグナル」カラーをボタン、バッジ、チャートハイライトなど小さく限定して加えましょう。コントロールされた範囲で使用すれば、パレットがシャドウ主導のまま、極端な高彩度スキームに変わりません。
実際のデザインでシャドウカラーパレットを使う方法
役割ベースで配置してみましょう：最も暗い色をヘッダー・フッター、やや暗い色を主要な表面、ミッドトーンを枠やセカンダリーパネル、最も明るい色調をカードやモーダル、重要データの背景に。
ブランディングでは、ロゴや文字を最も深いニュートラルに固定し、アクセントはパッケージトリム、SNSテンプレート、フォイル・スポットディテールなどで登場させましょう。シャドウパレットは繰り返しが一貫していると高級感が増します。
編集レイアウトでは、最も暗いトーンの大きな使用は避けましょう。ほぼ黒のベースと暖かいオフホワイトの余白は、洗練された印象を与え、印刷も安定します。
AIでシャドウパレットのビジュアルを作成
HEXがすでに決まっているなら、UI画面やポスター、パッケージのリアルなモックアップを先に生成し、手作業でデザインする前にシャドウパレットのコントラストやムード、アクセントバランスを確認できます。
上記プロンプトを再利用し、ブランドタイプやレイアウト、題材を入れ替え、パレットの方向性（チャコール、スレート、控えめアクセント）を保ちましょう。特にピッチデックや初期ブランド探索に役立ちます。
Media.ioなら数分で複数のバリエーションを生成し、プロンプトを調整してライティングやテクスチャ、構成を導きつつシャドウトーンを維持できます。
シャドウカラーパレット よくある質問
-
シャドウカラーパレットとは？
シャドウカラーパレットは、濃いニュートラル（ほぼ黒、チャコール、スレート）と、控えめな中間トーン・明るい色調のセットで、鮮やかな彩度に頼らず奥行きや階層を作るためのものです。 -
シャドウは黒やグレーと同じ？
厳密には違います。シャドウパレットは純黒を避け、色付きのニュートラル（ブルーチャコール、プラムチャコール、ティールチャコール）と柔らかなハイライトを含み、平坦ではなく立体的なデザインを作ります。 -
シャドウパレットはダークモードUIに適している？
はい。シャドウトーンは複数の「グレー段階」を提供でき、カードやパネル、ナビゲーションを分けやすく、テキストの読みやすさを保ちながらダークモードに最適です。 -
シャドウパレットのアクセントカラーはどう選ぶ？
控えめなアクセント（マーブ、カッパー、オリーブ、ティールなど）を一つ選び、強調用に控えめに使います。シャドウパレットでは小さなアクセントエリアでも効果が大きく、特にCTAや重要ポイントで際立ちます。 -
印刷物でシャドウトーンに合う背景は？
暖かいオフホワイト（リネン、サンドストーン、ブラッシュベージュなど）は純白より上品に印刷され、濃いインクも柔らかく見えます。長文レイアウトでもコントラスト疲労を抑えます。 -
シャドウデザインが重くなりすぎないようにするには？
スペースや余白を増やし、大きなエリア（カードや余白）には最も薄い色調を使い、タイトル、ナビゲーション、ヒーローセクションなどのアンカーには一番深い色を使用し、ページ全体の背景には使わないようにします。 -
AIでシャドウパレットのモックアップを生成できますか？
はい、できます。一貫したプロンプトスタイル（レイアウト＋ライティング＋「主にチャコール／スレート系に控えめなアクセント」）を使い、バリエーションを繰り返して雰囲気やコントラスト、ハイライトカラーをどこで使うかをテストしましょう。
次へ： 伝統的なカラーパレット
