モダン雷雨トーン：おすすめ20色パレットとHEXコード

雷雨のパレットは、深いネイビーやスレートグレー、高いコントラストのアクセントを組み合わせて、現代的で大胆、そして即座にシネマティックなデザインを生み出します。

以下に、HEXコード付きの厳選された20の雷雨カラーバリエーションと、ブランディング、UI、ポスター、パッケージに効果的に組み合わせるための実用的なコツを紹介します。

なぜ雷雨のパレットがこれほどまでに効果的なのか

雷雨カラーは自然と階層を作ります。濃いベース（ネイビー、チャコール、スレート）がタイポグラフィやUIコンポーネントに安定感を与え、淡いミストカラーが可読性のための余白を加えます。

また、「瞬時のムード」も演出します。嵐のブルーやクールなニュートラルは自信とプロフェッショナリズムを感じさせ、稲妻カラー（イエロー、シアン、アンバー、ゴールド）のアクセントが少ない色数でも高いコントラストを生みます。

これらのパレットはニュートラルと鮮やかさの間に位置しているため、洗練されたSaaSダッシュボードからシネマティックなポスターまで、時代を超えてモダンな印象を保ちつつ様々な媒体で活躍します。

20＋ 雷雨カラーパレットアイデア（HEXコード付き）

1) スレートに稲妻

HEX： #0B1320 #1F2A44 #3E4C66 #8A94A6 #F2D14B

ムード： 劇的、エレクトリック、モダン

おすすめ用途： テック系スタートアップのランディングページヒーロー

ドラマチックな真夜中のブルーと嵐のスレートグレーが、稲妻の閃光のような印象を生み出します。ヒーローセクションやヘッドライン、インパクトが求められるCTAにおすすめのカラーパレットです。イエローは余白とセットで使い、クールトーンは背景に活かしましょう。使い方のコツ：稲妻イエローは主なアクション要素に絞り、視覚的なノイズを避けてください。

media.ioで生成されたスレートに稲妻の画像例

Media.io

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

今すぐ無料で試す

2) 雨に洗われたコンクリート

HEX： #101820 #2B2F36 #5B6672 #A7B0BA #E6E9ED

ムード： ミニマル、クール、グラウンディッド

おすすめ用途： ミニマルUIダッシュボード

クールなコンクリートグレーは、雨上がりの都市の道路のように落ち着きと集中を感じさせます。ダッシュボードやデータテーブル、管理画面など、可読性が最優先の場面に最適です。アクセントカラーは警告やラベルなど必要な場合のみに限定しましょう。使い方のコツ：最も明るいグレーはカードや表面に使い、階層を明確に。

media.ioで生成された雨に洗われたコンクリートの画像例

3) 嵐雲ラベンダー

HEX： #1A1B2A #2D2B3F #5B4E70 #A49AB8 #E9E4F0

ムード： ドリーミー、ムーディー、エディトリアル

おすすめ用途： エディトリアル雑誌の誌面

スモーキーなインディゴと落ち着いたラベンダーは、夕暮れ時の静かな空に漂う雲のよう。雑誌や詩集、奥行きを保ちながら柔らかも演出したいルックブックに最適です。余白はオフホワイト、セリフ体を抑え気味に配置し、エディトリアルな雰囲気を強調しましょう。使い方のコツ：淡いライラックは引用やセクション分けにハイライトとして活用。

media.ioで生成された嵐雲ラベンダーの画像例

4) サンダーヘッド・ティール

HEX： #081C1E #0E3B43 #1B6B73 #7FB7B5 #D8F3F1

ムード： フレッシュ、アクア、コンフィデント

おすすめ用途： ウェルネスブランドのアイデンティティ

深い海のティールと霞むシーフォームが、海岸の崖を流れる雨のよう。ウェルネスブランド、スパパッケージ、信頼を重視する癒やし系アプリにぴったりです。やわらかなニュートラルとう丸みのあるサンセリフ体で親しみやすいモダンな印象に。使い方のコツ：ライトシーフォームを主要背景に、濃いティールはロゴや見出しの固定色に。

media.ioで生成されたサンダーヘッド・ティールの画像例

5) アンブレラ・ノワール

HEX： #050608 #14161A #2A2D34 #6B707A #D1D5DB

ムード： スリーク、アーバン、高コントラスト

おすすめ用途： ファッションルックブックのレイアウト

インクのようなブラックとグラファイトグレーで、深夜の街灯と傘の下を歩くイメージ。注目を集めすぎず、シャープなプロダクト写真やラグジュアリーなタイポグラフィ、ファッションエディトリアルにも最適です。もしさらに高級感を出したい場合は、プリント仕上げにメタリックアクセントを1箇所だけ添えて。使い方のコツ：本文は最も明るいグレーで、見出しはほぼブラックで。

media.ioで生成されたアンブレラ・ノワールの画像例

6) 濡れたアスファルトの輝き

HEX： #0A0D12 #232A34 #3D4B63 #9AA4B2 #FFB000

ムード： エネルギッシュ、グリッティ、夜の都市

おすすめ用途： ナイトイベントポスター

ざらついたアスファルトブルーやダークスチールは、ネオンが濡れた路面に映り込むようなシネマティックさ。ライブやナイトイベント、テック系ミートアップの主役カラーに最適です。凝縮されたフォントとタイトなグリッドでコントロール感UP。使い方のコツ：アンバーは日付や会場など重要な情報へのスポットライトとして。

media.ioで生成された濡れたアスファルトの輝きの画像例

7) 遠雷オリーブ

HEX： #10130F #2A3522 #4D5E3B #A3B18A #E9EDC9

ムード： アーシー、ラギッド、落ち着き

おすすめ用途： アウトドアアパレルのパッケージ

苔むしたオリーブとくすんだカーキが、森の小道にかかる雨雲のような堅実な雰囲気を演出します。アウトドアウェア、サステナブルグッズ、伝統的なラベルなど、自然らしさが求められる場面にぴったり。クラフト紙の質感やマット仕上げを合わせて、落ち着き感UP。使い方のコツ：ライトカーキは背景パネルにし、商品情報の読みやすさを確保。

media.ioで生成された遠雷オリーブの画像例

8) スタティックチャージ・ローズ

HEX： #1B0F17 #3B1E2D #6B3A4D #C48A9B #F4E3E7

ムード： ロマンチック、エッジー、ノクターナル

おすすめ用途： アルバムジャケットのデザイン

ダークベリーの影とダスティローズが、遠雷のような淡い鼓動感を表現します。アルバムアート、詩集、小規模なキャンペーンに感情表現を添えたい時に最適。コントラストの高い文字やグレイン質感とあわせて、モダンかつムーディに演出。使い方のコツ：最も淡いブラッシュピンクを細いボーダーやラベルに沿わせ、アートワークを引き立てます。

media.ioで生成されたスタティックチャージ・ローズの画像例

9) 稲妻カット・カッパー

HEX： #1A1512 #3A2C23 #6D4C3D #C08B5C #F1E2CF

ムード： 暖かい、ラスティック、洗練

おすすめ用途： カフェメニュープリント

スモーキーなエスプレッソブラウンとカッパーの温もりが、雨の夕暮れのランプライトのよう。カフェメニューやアルチザンブランド、温もりのあるステーショナリーに最適です。クリーム色の用紙やクラシックなセリフ体と合わせて、親しみやすく高級感のある仕上がりに。使い方のコツ：シグネチャー商品はカッパーで強調し、本文は濃いブラウンでバランスを取りましょう。

media.ioを使用して生成された雷が切断した銅の画像例

10）ハーバーストームブルー

HEX： #071821 #0E2A3A #164A63 #4D7C8A #C7DDE2

ムード：海洋的、安定、プロフェッショナル

おすすめ用途：旅行ウェブサイトUI

ハーバーブルーとシーグラスアクセントが、重い空の下の波のうねりを感じさせ、信頼できる穏やかな印象を演出します。このパレットは、旅行プラットフォームや予約フロー、明確なセクションが必要なコンテンツ重視のページに最適です。温かみのある写真と組み合わせ、中間のブルーをボタンやリンクに使用してください。使用のヒント: 淡いアクア色をフィルターやサブパネルの背景に使うことで、視覚的な重さを軽減できます。

media.ioを使用して生成されたハーバーストームブルーの画像例

11）雹ミント

HEX： #0A1A18 #0F3D3A #2D6A63 #9DD9D2 #E6FFFA

ムード：シャープ、クリーン、リフレッシュ

おすすめ用途：モバイルアプリオンボーディング画面

シャープなグリーンブルーの色合いは、嵐が過ぎ去った後の氷雨と新鮮な空気を思わせます。これは、オンボーディングフローや健康アプリ、安心感が重要なクリーンな製品UXに最適です。シンプルなアイコンと十分なスペースを使って、体験を軽やかに保ちましょう。使用のヒント: ミント色を主要な表面色に使い、最も濃いティールをナビゲーションやアクティブ状態に用いてください。

media.ioを使用して生成された雹ミントの画像例

12）真夜中の豪雨

HEX： #050A12 #0B1A2A #1E3347 #556B7A #B9C3CC

ムード：シネマティック、ムーディー、強烈

おすすめ用途：映画ポスター

シネマティックな真夜中のブルーと冷たいスチールグレーは、ガラスに流れる雨筋や暗闇でうごめく都市を思わせます。この雷雨のカラーパレットは、映画ポスターや書籍カバー、ドラマチックなキャンペーンアートにぴったりです。フォーカルポイントが必要なら、画像にワンポイントの暖色アクセントを加え、タイポグラフィーは冷たくシャープに保ちましょう。使用のヒント: 明るいグレーはクレジットや細かい文字に使うと、ムードを損なうことなく判読性を確保できます。

media.ioを使用して生成された真夜中の豪雨の画像例

13）チャージドインディゴ

HEX： #0C1024 #1B1F4A #343A8C #7C7FE3 #E8E9FF

ムード：大胆、未来的、高エネルギー

おすすめ用途：ゲームストリームオーバーレイUI

チャージドインディゴと鮮烈なペリウィンクルは、厚い雲を照らす遠い稲妻のような印象です。これらの雷雨色の組み合わせは、ストリーミング用オーバーレイやeスポーツパネル、深みと輝きを必要とするパンチの効いたUIに最適です。クリーンな幾何学形と組み合わせ、テキストは主に明るくしてコントラストを保ちましょう。使用のヒント: 最も明るいペリウィンクルはアクティブ状態や通知だけに使い、階層を保つのがポイントです。

media.ioを使用して生成されたチャージドインディゴの画像例

14）霧の桟橋ニュートラル

HEX： #0D0F12 #202329 #3C4048 #8D949E #F5F6F7

ムード：ニュートラル、洗練された、企業向け

おすすめ用途：企業プレゼンテーションデッキテンプレート

柔らかなフォググレーとほぼ黒のアクセントは、静かな桟橋が霧に消えていく様子を思わせます。ニュートラルの範囲は、プレゼンテーションやレポート、構造重視のクリーンなビジネステンプレートに最適です。ブランドカラー1色をチャートや主要指標用に組み合わせて、スライドが平坦にならないようにしましょう。使用のヒント: 最も明るいグレーをスライドの背景に、濃い色はヘッダーや区切り線用に使います。

media.ioを使用して生成された霧の桟橋ニュートラルの画像例

15）エレクトリックホライゾンシアン

HEX： #06141B #0B2B35 #0E5666 #29B6C8 #D8FBFF

ムード：明るい、テクノロジー、クリーン

おすすめ用途：SaaS説明用インフォグラフィック

深いブルーグリーンに鮮やかなシアンは、嵐が晴れて輝く地平線が現れる瞬間のようです。SaaSインフォグラフィックや機能説明図、素早く視覚的グルーピングが必要なダイアグラムに強い選択肢です。細いラインアイコンや十分なスペースと組み合わせて、デザインを軽やかに保ちましょう。使用のヒント: シアンは重要な数字やハイライト用にし、濃い色は構造やラベル用に使います。

media.ioを使用して生成されたエレクトリックホライゾンシアンの画像例

16）ストームランタンゴールド

HEX： #0E1116 #1F2A33 #394B57 #8796A5 #D8B15A

ムード：ラグジュアリー、温かいアクセント、自信ある

おすすめ用途：プレミアム腕時計商品広告

深いグラファイトとクールなスチールがラグジュアリー感を演出し、ランタンゴールドが嵐の中の光のようなコントロールされた温かみを添えます。この組み合わせは、プレミアム商品広告やハイエンドなテック、洗練されたECバナーに向いています。最小限のコピーと力強いタイポグラフィで洗練された印象を保ちましょう。使用のヒント: ゴールドはロゴや価格、重要なディテール1カ所だけに使うことで、品質のシグナルとなります。

media.ioを使用して生成されたストームランタンゴールドの画像例

17）雨の日パステル

HEX： #1A2330 #2F3D4F #6C7A89 #C7CED6 #F7F2E8

ムード：ソフト、控えめ、エレガント

おすすめ用途：ウェディング招待状セット

柔らかなブルーグレーと温かいアイボリーは、キャンドルの灯る部屋の外でそっと降る小雨をイメージさせます。モダンなウェディングステーショナリーやミニマルな招待状、洗練された告知カードにぴったりのパレットです。繊細なラインアートとクラシックなセリフ書体を使って、時代を超えた印象に保ちましょう。使用のヒント: 最も濃い色は名前や見出し用、淡いグレーは枠線やディテールに。

media.ioを使用して生成された雨の日パステルの画像例

18）サンダーアレーバーガンディ

HEX： #12070B #2C0F17 #5A1C2B #9B4A5D #E7C7CE

ムード：大胆、ロマンティック、雰囲気ある

おすすめ用途：書店ブランディング＆トートバッグ

深いバーガンディとダスティブラッシュは、温かい店先に照らされた狭い路地を雷が転がる様子を思わせます。本屋のブランディングや文学イベント、個性や深みを持たせたいパッケージングに最適です。クリーム色の紙とヴィンテージ調の書体を組み合わせて、居心地よくキュレーションされた印象にしましょう。使用のヒント: ブラッシュを背景にし、バーガンディはロゴやスタンプにして、意図的でリッチな雰囲気に。

media.ioを使用して生成されたサンダーアレーバーガンディの画像例

19）嵐後の夜明け

HEX： #0B1D2A #143B4D #2C6E7B #F2B880 #F7E7C8

ムード：希望、バランス、新鮮

おすすめ用途：SNSテンプレートセット

クールなストームブルーと柔らかな夜明けピーチの組み合わせは、雲が晴れて光が戻る瞬間を思わせます。このバランスは、SNS投稿やカルーセルテンプレート、コントラストは欲しいけれど強すぎないライフスタイルブランディングにぴったりです。クリーンなサンセリフ書体とシンプルな形で色味に語らせるのがコツ。使用のヒント: ピーチ色はコールアウトやステッカーに、ブルーは構造や一貫性に。

media.ioを使用して生成された嵐後の夜明けの画像例

20）雨上がりの静けさ

HEX： #0E1821 #1F3240 #3E5C6B #A3B7C2 #EAF0F2

ムード：落ち着き、空気感、現代的

おすすめ用途：インテリアデザインムードボード

クールなブルーグレーと淡いミストトーンは、最後の雫が消えた後の静かな空を呼び起こします。インテリアムードボードや建築ポートフォリオ、穏やかなライフスタイルブランディングに合うパレットです。温かい木のテクスチャやソフトベージュニュートラルと組み合わせると、明快さを保ちつつ快適さも加えられます。使用のヒント: 最も明るいトーンをキャンバスに、より深いブルーはラベルやスウォッチに用いるのがおすすめ。

media.ioを使用して生成された雨上がりの静けさの画像例

雷雨に合う色の組み合わせは？

雷雨トーンは、クリーンでクールなニュートラル（フォググレー、オフホワイト、スチール）と組み合わせると、レイアウトを読みやすく現代的に保てます。背景やカード、大きなテキストエリアのサポートに最適です。

アクセントには「雷」色を1つ選びましょう：アンバー／イエローは緊急性やCTAに、シアンはテック感の強調に、ゴールドはプレミアムブランディングに。使い過ぎず、パレットをコントロールされた状態に保つのがポイントです。

暖かみが必要なら、ソフトなピーチや銅、ブラッシュを追加—特にライフスタイル系やエディトリアル、パッケージ用途で—嵐のブルーやチャコールを主構造に保つのが大事です。

雷雨カラーパレットを実際のデザインで活用する方法

ヘッダーやヒーローセクション、ナビゲーションには濃いベース（ネイビー／チャコール）を使い、中間トーンのスレート／スチールはセカンダリーパネルや区切り線に用いましょう。重い影に頼らず、奥行きを演出できます。

最も明るい色味を背景やコンテンツ面に割り当てれば、タイポグラフィの快適な読みに繋がります。UIでは、インタラクティブ状態を一貫させるため、ミッドトーンはボタン、アクセントは「アクティブ／メイン」に適用しましょう。

印刷物（ポスター、メニュー、パッケージ）では、雷雨パレットは特にマット仕上げや微粒子、ソフトグラデーションと相性が良いです—同じレイアウトで複数アクセントを使い過ぎるのは避けましょう。

AIで雷雨カラーパレットのビジュアルを生成する

ストーミートーンが実際の構成でどう効果を発揮するか見てみたい場合は、ヒーローセクションやポスター、パッケージ、オンボーディング画面などのクイックモックアップを先に作れば、最終デザインシステムへの確信が得られます。

Media.ioのテキストから画像生成を使えば、タイポグラフィのコントラストやアクセントの配置、全体のムードを数分でテストでき、プロンプトを繰り返してブランドスタイルに合わせて調整できます。

好きなHEXセットを上記から選び、レイアウトを説明、アクセントカラーを1つ指定して最もクリーンな雷雨らしい見た目が作れます。

次へ： ホーンテッドマンションカラーパレット