Best Rainy Day Color Palette Ideas: 20 Inspiring Picks with Hex Codes

雨の日のカラーパレットは、かすんだグレー、やわらかなブルー、控えめな暖色系ニュートラルを中心に構成されています。これらの色調は落ち着きがあり、モダンで、デザインしやすい雰囲気を醸し出します。

以下は、UI、ブランディング、パッケージ、印刷物などで使える、厳選された20種類の雨の日カラースキーム（HEXコード付き）と、Media.ioでマッチするビジュアルを生成するためのAIプロンプトです。

雨の日パレットが優れている理由

雨の日の色は自然と控えめなため、シンプルなレイアウトでも洗練され「デザインされた」印象を与えてくれます。色の彩度が低い分、タイポグラフィや余白をより活かすことができ、現代的でミニマルなビジュアルに最適です。

これらのパレットは、瞬時に奥行き感も生み出します。やわらかなグレーやスレートブルーは信頼できる背景レイヤーとなり、仄かな暖色（トープ、キャラメル、テラコッタ）が冷たさや過度なビジネス感を防ぎます。

さらに重要なのは、雨の日のカラースキームはさまざまな媒体で柔軟に使えることです。画面から印刷まできれいに再現でき、モノクロ写真やテクスチャ、落ち着いたグラデーションともよく合います。

20以上の雨の日カラーパレットアイデア（HEXコード付き）

1）霧雨の歩道

HEX: #D9DEE3 #A9B1BA #6B7682 #3C444E #C8B7A6

雰囲気： 静か、霧がかった、落ち着いた

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

濡れた歩道の上で足音が響く朝のような静けさと清潔感のある色調です。ライトグレーをキャンバスに使い、ナビゲーションやチャートにはスレートやチャコールで階層を作りましょう。温かみのあるトープは無機質になりすぎず、人間味を保つアクセントに。ポイント：一番濃いチャコールは主要なCTAやアクティブ状態に使い、コントラストを際立たせましょう。

Media.ioで生成した霧雨の歩道のイメージ例

Media.io

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

今すぐ無料で試す

2）アンブレラ・ノワール

HEX: #0F1115 #2B2F36 #5A606B #B7BDC6 #E6E1D6

雰囲気： 映画的、洗練、高コントラスト

おすすめ用途： ラグジュアリーファッションブランディング

映画のワンシーンのように艶やかで洗練された印象。濡れた街路に映る傘や街の光を思わせます。ロゴやラベル、タイポグラフィに漆黒とグラファイトを使うと、プレミアムな雰囲気に。淡いグレーと温かなオフホワイトは、エディトリアルレイアウトや商品写真に余白を与えます。ポイント：単色のメタリック箔やスポットニスと組み合わせると、色数を増やさず触感的なコントラストが生まれます。

Media.ioで生成したアンブレラ・ノワールのイメージ例

3）水たまりの反射

HEX: #8FA3B6 #4E6A7D #2F3E4A #D7D2C8 #A4B58A

雰囲気： さわやか、反射的、空気感

おすすめ用途： エコライフスタイルブログのヘッダー

澄んだ空が水たまりに映ったような、やさしく新緑を感じる色合いです。穏やかな構造とオーガニックなアクセントを両立したいブログヘッダーにぴったり。ブルーグレーはテキストやオーバーレイに、モスグリーンはボタンやタグに使いましょう。ポイント：ベージュを背景に使うと、暖かく読みやすい印象が維持できます。

Media.ioで生成した水たまりの反射のイメージ例

4）雲の隙間ティー

HEX: #F2EFEA #C9D2D7 #93A3AD #6B7A86 #B88C6A

雰囲気： 居心地が良い、やさしい、迎え入れる

おすすめ用途： カフェメニューのデザイン

窓辺でゆっくり雨雲の切れ間を眺めながらお茶を楽しむ、そんな温もりを感じる配色です。クリーミーな色は長文テキストの背景に、クールグレーは区切りや価格表記に。控えめなキャラメル色は季節限定メニューやアイコンのハイライトに最適。ポイント：キャラメルはアクセント使いし、全体が穏やかで上質な印象になるよう心がけましょう。

Media.ioで生成した雲の隙間ティーのイメージ例

5）濡れたアスファルト

HEX: #1C2127 #343C45 #59636E #9AA4AF #D0D5DB

雰囲気： 都会的、安定感、プロフェッショナル

おすすめ用途： B2BランディングページUI

濡れたアスファルトが曇り空の下で放つ信頼感と堅実さを表現。ダークグレーはヒーローヘッダーやナビゲーションに使うと安心感が。明るめのニュートラルは、長いページでもフォームや特徴ブロックの可読性を向上。ポイント：余白をしっかり取り、角を丸めて重さを感じさせない工夫を。

Media.ioで生成した濡れたアスファルトのイメージ例

6）居心地の良い窓辺の光

HEX: #EFE6D8 #C8B6A6 #8B8F97 #4C565F #6F4B3E

雰囲気： 暖かい、内省的、安心感

おすすめ用途： 本の表紙デザイン

霧雨の午後、窓辺の古い肘掛け椅子に注ぐ光のぬくもりを思わせるパレット。クリーミーベージュとやわらかなグレーを組み合わせると、タイトルタイポグラフィが読みやすく、繊細な質感も表現可能。ディープエスプレッソ色は著者名や背表紙に重みと文学的深みを。ポイント：紙の繊維感を加えるオーバーレイでニュートラルを立体的に。

Media.ioで生成した居心地の良い窓辺の光のイメージ例

7）霧雨の庭園

HEX: #DDE6D6 #A7BCA0 #6F8A6B #3E5740 #5B6269

雰囲気： ボタニカル、穏やか、癒し

おすすめ用途： ボタニカルイラストのポスター

ボタニカルで癒しの雰囲気。雨に濡れた葉や小道、薄い霧がかる自然のグリーンが基調です。自然派ポスターやウェルネスブランド、グリーン重視のパッケージに最適。淡いセージは余白に、深いフォレストグリーンは茎や見出し、枠線に。ポイント：クールグレーは影色として用いれば、黒を使わずに奥行きを維持できます。

Media.ioで生成した霧雨の庭園のイメージ例

8）港の霧

HEX: #E3E7EA #B8C1C8 #7D8E9C #3F5564 #2A333B

雰囲気： クール、海辺、落ち着いた

おすすめ用途： 旅行パンフレットのレイアウト

落ち着いた海辺の港が霧に包まれる様子を想起させる、静かな配色。淡い色調は写真ページが軽やかに仕上がり、深いブルーは見出しや区切りに自信とメリハリを与えます。モノクロ写真や地図アイコンとも好相性。ポイント：最も濃い色は小さな文字にのみ使用し、行間を十分に確保しましょう。

Media.ioで生成した港の霧のイメージ例

9）スレートとスプルース

HEX: #C7CED6 #6D7F8C #2F3A44 #2F4A3A #D6C6B3

雰囲気： アウトドア感、落ち着き、現代的

おすすめ用途： アウトドアギア商品ページ

アウトドア感があり、スレート岩やスプルースの葉が雨に濡れた後の静けさを表現します。スレート系は商品スペックやUI要素に、スプルースグリーンはプライマリーボタンやバッジに使いましょう。温かみのあるサンドカラーは全体をやわらげ、ライフスタイル写真の背景にも最適。ポイント：グリーンは主なアクションのみに限定して、意図的なアクセントとして使いましょう。

media.io を使用して生成されたスレートとスプルースの画像例

10）メトロレインコート

HEX: #F2F4F6 #B7C0C8 #4B5964 #F2C14E #2B2F33

雰囲気：モダン、エネルギッシュ、通勤シック

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

モダンで通勤シック、グレーのホームで際立つレインコートの存在感が特徴です。雨の日のこのカラースキームは、ニュートラルなベースにひとつの明るいアクセントが瞬時に注目を集めたいときに最適です。イベントタイトルや主な情報には黄色を、グレーは背景ブロックや補足テキストに使いましょう。ポイント：黄色は大きな形や見出しで使うことで、鮮やかさを保ちつつ、うるさくなりません。

media.io で生成されたメトロレインコートの画像例

11）嵐の中のキャンドル

HEX: #1E2328 #3F4A52 #8B949D #E7D7B8 #C77C5A

雰囲気：ムーディー、親密、暖かな灯

おすすめ用途：職人キャンドルのパッケージ

ムーディーで親密な雰囲気は、嵐の部屋を温めるキャンドルの炎のよう。ラベルのベースにはチャコールとスレートを、ワックスクリームで文字に柔らかい輝きを与えます。落ち着いたテラコッタは封緘や香りノート、小さなパターンに美しく映えます。ポイント：マットな紙を選び、テラコッタは小面積に収めることで上質な雰囲気を保てます。

media.io で生成された嵐の中のキャンドルの画像例

12）雨の日ミニマル

HEX: #FFFFFF #E6EAEE #B9C2C9 #6F7C86 #2E353C

雰囲気：クリーン、エアリー、ストレートフォワード

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

クリーンでエアリー、明瞭なエッジで明るい曇り空の光をイメージします。明確さが必要な画面にはホワイトや淡いグレーを、見出しやプログレス表示にはスレートを。最も濃い色は主テキストとアイコンの枠線に理想的です。ポイント：最も明るい色2色間で繊細なグラデーションを加えると、画面が無機質になりません。

media.io で生成された雨の日ミニマルの画像例

13）ココアとコンクリート

HEX: #E9E0D6 #B8A89A #7A6F68 #3E3A38 #4A6A73

雰囲気：アーシー、都会的、コージーモダン

おすすめ用途：コーヒーブランドのSNSテンプレート

アーシーで都会的、ココアの温かみがコンクリート壁と雨のような青い影と調和します。クリーミーなベージュは背景やストーリーテンプレートに最適、ココアブラウンがブランド感を加えます。落ち着いたブルーグリーンはステッカーや価格、コールアウトに最適です。ポイント：文字の太さを揃えて、パレットの意図が伝わるようにしましょう。

media.io で生成されたココアとコンクリートの画像例

14）ソフトサンダー

HEX: #D6D9DE #9FA8B3 #5A6673 #2C3440 #7B6D8D

雰囲気：嵐、エレガント、やや夢見がち

おすすめ用途：結婚式招待状一式

嵐のようでエレガント、霧にやわらげられた遠い雷鳴と黄昏のバイオレットを思わせます。このような雨の日のカラーパレットは、スイートなパステルを避けたいロマンチックな招待状に最適です。淡いグレーを紙色、スレートを文字、バイオレットをモノグラムやシール柄に使いましょう。ポイント：バイオレットは特色印刷にして、濃度と一貫性を保ちましょう。

media.io で生成されたソフトサンダーの画像例

15）ペーパーボート・パステル

HEX: #F7F3EF #D9DCE8 #B8C7D6 #8FA0A8 #E3B7A0

雰囲気：ソフト、ノスタルジック、遊び心ある穏やかさ

おすすめ用途：子ども用文具セット

ソフトでノスタルジック、優しい水たまりに浮かぶ折り紙の船のような雰囲気です。小さなイラストやステッカーにはブラッシュのアクセント、ブルーグレーは全体を穏やかに保ち、目に優しい仕上がり。シンプルな落書きや丸みを帯びた文字、余白をたっぷり使うのが似合います。ポイント：輪郭線はミッドグレー・ブルーにして、イラストがハードになりすぎないようにしましょう。

media.io で生成されたペーパーボート・パステルの画像例

16）モンスーンポスター

HEX: #0E2A3B #17465B #2E7C8A #A7C6C8 #E9E6DF

雰囲気：大胆、コースタル、雨に濡れた

おすすめ用途：音楽フェスティバルフライヤー

大胆で雨に濡れた印象は、モンスーンの空が海岸と交わる様子を表現します。ディープブルーは大きな文字に劇的な舞台を、ティールは図形やグラデーションに動きを与えます。ペールシーフォームと温かいオフホワイトは情報量が多くても可読性を保ちます。ポイント：ティールからネイビーへのツートングラデーションを背景に使い、色数を増やさずに動きを出しましょう。

media.io で生成されたモンスーンポスターの画像例

17）レインウォッシュドデニム

HEX: #E1E6ED #A9B7C9 #6D84A3 #3E556F #2B2F36

雰囲気：カジュアル、信頼できる、クールトーン

おすすめ用途：デニム製品広告

カジュアルで信頼感がありつつ、雨に濡れてもシャープなデニムの印象です。ペールブルーグレーは背景やスペースに使い、ミッドデニムはブロックやバッジに。ディープネイビーとチャコールは商品名や価格を引き立たせますが、主張し過ぎません。ポイント：タイポグラフィはモノクロにして、デニムトーンでストーリーを伝えましょう。

media.io で生成されたレインウォッシュドデニムの画像例

18）ストーミーブルーム

HEX: #2A2E35 #55606B #A9B3BC #D7D1C6 #B06A7A

雰囲気：ロマンティック、モダン、ややドラマチック

おすすめ用途：コスメパッケージ

ロマンティックでややドラマチック、嵐の空に花びらが舞うような印象です。ダスティローズのアクセントを加えた雨の日カラーパレットは、柔らかさとエッジを両立したいコスメパッケージに最適。グレーはベースラベルに、ローズはシェード名やシールに使いましょう。ポイント：温かみのあるベージュ背景にローズを刷ることで、上品な仕上がりになります。

media.io で生成されたストーミーブルームの画像例

19）雨上がりの灯台

HEX: #F3F0E9 #C8D2D8 #6E7F8A #1F3B4D #C65A3A

雰囲気：ノーティカル、希望、クリスプ

おすすめ用途：非営利団体の年次報告書

航海風で希望を感じる雰囲気は、雨上がりの灯台の光が残る雨を切り裂く様子を想起させます。オフホワイトは長時間の読書に最適、見出しはディープオーシャンブルーで信頼感を。落ち着いたオレンジレッドはグラフやコールアウト、主要指標の強いアクセントとして役立ちます。ポイント：アクセントは1～2データ系列に限定し、グラフの可読性を確保しましょう。

media.io で生成された雨上がりの灯台の画像例

20）ナイトバスウィンドウ

HEX: #0B0F14 #1F2A35 #3B556B #7A92A6 #D8D3C7

雰囲気：夜行性、思索的、テック系の静けさ

おすすめ用途：フィンテックアプリダークモードUI

夜行性で思索的、夜のバス窓にストリートライトが流れるような雰囲気です。ほぼ黒とディープブルーをダークモードの基盤に、スレートとミスティブルーでカードを持ち上げます。温かい明るめニュートラルは、ハイライトや親しみやすい空状態によく合います。ポイント：フォーカスリングにミスティブルーを使えば、きついネオンなしでアクセシビリティが保てます。

media.io で生成されたナイトバスウィンドウの画像例

雨の日に合う色は？

雨の日パレットは、他のくすみ色（ソフトホワイト、フォググレー、スレートブルー、彩度を抑えたグリーン）と組み合わせるのが最適です。こうした色は、特にUIやエディトリアルデザインで、落ち着きと読みやすさを保ちます。

コントラストを加えたいときは、キャラメルやテラコッタ、ダスティローズ、落ち着いたオレンジレッドなど暖色アクセントを加えましょう。ベースがクール（ブルーグレーやチャコール）の場合は特に効果的で、強く主張せずに視線を集めます。

よりプレミアムな印象にしたい場合は、ストーミーニュートラルとほぼ黒、ピュアホワイトの代わりにオフホワイトを合わせましょう。その微かな温かみは、印刷では手触り感、スクリーンでも快適な見た目になります。

実際のデザインで雨の日のカラーパレットを使う方法

まずは明るい「曇り」背景（ミスティグレーや温かいオフホワイト）を設定し、ミッドトーンで構造（カード、セクション、仕切り）を、ディープトーンで文字やナビゲーションを作りましょう。色が控えめでもヒエラルキーが明確に保てます。

アクセントは意図的に使う：最も明るく暖かい色は主ボタンや主要指標、タイトルに使いましょう。雨の日スキームなら、アクセントは少量でも十分なので、全体のムードを保つことができます。

最後に、テクスチャやイメージに頼りましょう。グレイン、ペーパーのオーバーレイ、モノクロ写真は、くすみパレットをリッチに感じさせ、彩度を上げずに奥行きを持たせます。

AIで雨の日パレットのビジュアルを作成する

パレットに合わせたモックアップ（ポスター、パッケージ、UI画面）を作りたい場合は、AIで一貫したプロンプトスタイルと選んだ雨の日HEX方向（ミスティ、スレート、チャコール、プラスワンの暖色アクセント）で生成しましょう。

Media.io なら素早く試行錯誤できます。「主要色」を調整したり、アクセント（イエロー対テラコッタ）を入れ替えて、同じレイアウトプロンプトで横並び比較が可能です。

気に入った見た目ができたら、ビジュアルをエクスポートしてプレゼン、ムードボード、クライアント確認用に使い、最終デザインシステムはその勝ちパレットを軸に組み立てましょう。

次へ： グリーンバーガンディカラーパレット