リバーカラーパレットは「自然だけどデザインされた」雰囲気が手軽に出せる方法のひとつです。澄んだ印象のクールなブルーやティールに加えて、石や砂、暖かいアクセントカラーをバランス良く組み合わせましょう。
以下に、HEXコード付き実用的なリバーカラーパレットアイデア20種以上と、UIやブランディング、印刷などでの活用方法を紹介します。
この記事で紹介する内容
リバーパレットが優れている理由
リバーパレットは自然に奥行きと新鮮さをミックスします。深いブルーはアンカー(深い水のよう)となり、ティールやアクアは鮮やかさを足しても派手になりすぎません。そのため、ブランドシステムやインターフェイス設計の両方に頼れる存在です。
さらに、石色グレー・泥色ベージュ・暖色オフホワイトといったニュートラルカラーが揃っているので、レイアウトの読みやすさを保ち、画面や印刷が鮮やかになり過ぎるのを防げます。
最も重要なのは、川の色の組み合わせは親しみやすく落ち着いた印象を与え、ユーザーが信頼しやすい雰囲気が作れることです(ダッシュボードやウェルネス、金融、教育、編集デザインにぴったり)。
20種類以上のリバーカラーパレットアイデア(HEXコード付き)
1)氷河の流れ

HEX: #0B2E4A #0F6E7A #4FB3B8 #CFE8E6 #E9E2D0
雰囲気: シャープで清潔、爽やか
おすすめ用途: SaaSダッシュボードUI
氷が岩を切り裂くようなシャープで爽やかな色調。深いネイビーはヘッダーを支え、アクアやシーフォームはチャートやカードを軽やかに見せます。暖かいアイボリーを合わせれば柔らかくクリーンな印象に。使い方アドバイス:最も濃いブルーはナビゲーションに、ティールは主要ボタンに使用しましょう。
media.ioで生成した氷河の流れのイメージ例
Media.ioはブラウザで動画・画像・音声の編集や生成ができるオンラインAIスタジオです。
2)苔むした岸辺

HEX: #173B2C #2F6B4B #7FAF6A #BFD6B3 #F2EFE6
雰囲気:雰囲気:落ち着き、自然、穏やか
おすすめ用途:おすすめ用途:オーガニックスキンケアのパッケージ
落ち着きと穏やかさがある苔に覆われた石や雨上がりの岸辺のイメージ。深いフォレストグリーンは高級感をラベルに与え、淡いセージがレイアウトを軽やかに。無加工の紙質やミニマルなタイポグラフィと合わせるとよりナチュラルです。使い方アドバイス:最も濃いグリーンはロゴ用、セージは主要ラベル部分に。
media.ioで生成した苔むした岸辺のイメージ例
3)丸石の浅瀬

HEX: #2A3A42 #5B7A86 #9FB7BF #D7D6D1 #B58A5A
雰囲気:雰囲気:静か、バランス、信頼感
おすすめ用途:おすすめ用途:建築プレゼン用スライド
静かで信頼できる印象は、浅瀬の丸石と温かな粘土を感じさせます。ブルーグレーは図面やプランに洗練を添えつつ冷たくならず、広めの余白とひとつの暖色アクセントが映えるパレットです。使い方アドバイス:粘土色はコールアウトや重要指標のみにさりげなく。
media.ioで生成した丸石の浅瀬のイメージ例
4)夕日の反射

HEX: #1B2A49 #2E6F8E #F2B17A #F7D9C4 #F3F0E8
雰囲気:雰囲気:ロマンティック、暖かい、前向き
おすすめ用途:おすすめ用途:旅行ポスター
ロマンティックで前向きなイメージは、水面に反射する夕暮れの光そのもの。ネイビーとティールは構造を与え、ピーチやブラッシュは歓迎感のある輝きを演出。コントラストが重要なポスターやバナー・SNS広告に最適です。使い方アドバイス:テキストはネイビー、ピーチは見出し背景のソフトハイライトとして。
media.ioで生成した夕日の反射のイメージ例
5)泥と鉄

HEX: #1F2328 #3A4D57 #6E8793 #B9C2C7 #D8C2A3
雰囲気:雰囲気:インダストリアル、ダーク、洗練
おすすめ用途:おすすめ用途:フィンテックLP
ダークで洗練された印象は、鉄橋や暗い水、泥色の岸辺を思わせます。チャコールとスレートは信頼感を高め、サンディベージュは暖かみを保ちつつカジュアルにならない。シャープなサンセリフと細線アイコンで現代的・自信あるページに。使い方アドバイス:ベージュはCTAやバッジのアクセントにし、重くならず高級感ある印象に。
media.ioで生成した泥と鉄のイメージ例
6)峡谷の急流

HEX: #0D3B3E #137A7F #8FD6D1 #C86A3A #F1E6D2
雰囲気:雰囲気:冒険的、エネルギッシュ、大胆
おすすめ用途:おすすめ用途:アウトドアギア広告
冒険的で大胆な急流が峡谷を駆け抜けるイメージ。ティール系はフレッシュでアスレチックな土台、ラスティオレンジは岩間の太陽光のように効きます。高コントラストの商品写真や力強いヘディングと相性抜群。使い方アドバイス:オレンジは最重要の価格やアクション要素のみに限定し、エネルギーを管理。
media.ioで生成した峡谷の急流のイメージ例
7)霧深い支流

HEX: #22313A #4A6B73 #8FA8A3 #D6E1DD #EFEDE6
雰囲気:雰囲気:ソフト、軽やか、静かな考察
おすすめ用途:おすすめ用途:ウェルネスアプリ導入画面
ソフトで静かな霧が水面を漂う朝のイメージ。落ち着いたブルーグレーで優しい雰囲気を保ち、淡いミントや暖かいオフホワイトでインターフェイスを穏やかに。丸みのあるUIや軽いモーションと合われば安心感の第一印象です。使い方アドバイス:背景はオフホワイト、ミッドティールグレーは進捗やフォーカス用に。
media.ioで生成した霧深い支流のイメージ例
8)葦と砂州

HEX: #2B4C3F #6C8C5A #C8C38E #E6D9B8 #F6F1E5
雰囲気:雰囲気:陽射しと自然、親しみやすさ
おすすめ用途:おすすめ用途:ファーマーズマーケットチラシ
陽射しと親しみやすさ、背の高い葦や乾いた草、暖かい砂州のイメージ。オリーブグリーンはオーガニック感を、ウィートやクリーム色はページを温かく招く雰囲気に。手描きアイコンや簡単なイラストと組み合わせればコミュニティ感がアップ。使い方アドバイス:見出しはディープグリーン、ウィート色はベンダー詳細の背景ブロックに。
media.ioで生成した葦と砂州のイメージ例
9)深い淵

HEX: #061F2A #0A4C5B #0F8A8D #79C8C0 #E2F0EE
雰囲気:雰囲気:神秘的、クール、スタイリッシュ
おすすめ用途:ミュージックアルバムカバーアートワーク
神秘的で洗練されたデザインは、光が青緑の影に消えていく深い池を思わせます。ほぼ黒のティールがドラマを加え、明るいアクアや柔らかなシーフォームが輝きを保ちます。ミニマルな書体と大胆な形状を組み合わせれば、現代的でありながらも雰囲気のあるカバーに仕上がります。使用のコツ:最も暗い色調は背景に使い、アクアは一点のフォーカルエレメントとして用いましょう。
media.ioで生成された深い池の画像例
10)春の雪解け水

HEX: #1E3557 #2D78A3 #53B7C4 #A7DAB5 #F4F6EE
雰囲気:新鮮で、活気があり、明るい
おすすめ用途:教育インフォグラフィック
新鮮で活気があり、素早い雪解け水、明るい空、新芽の緑を表現します。ブルーはデータビジュアルを見やすくし、ミントグリーンが前向きで明るいトーンを加えます。シンプルなアイコンと十分なスペースを使い、カラーで整理しましょう。使用のコツ:各データカテゴリに1色を割り当て、グラフやラベルで繰り返して一貫性を持たせます。
media.ioで生成された春の雪解け水の画像例
11)都市のリバーウォーク

HEX: #10212B #2B5D6B #6F9AA5 #D0D6D8 #D08C60
雰囲気:現代的、自信に満ち、スタイリッシュ
おすすめ用途:カフェブランドアイデンティティ
現代的でスタイリッシュな雰囲気は、都会の水辺、コンクリート、温かい煉瓦の店舗を感じさせます。濃い青黒がロゴを引き締め、スモーキーティールとクールグレーが全体をモダンに保ちます。一つのテラコッタアクセントが全体をより親しみやすく、食べ物に合う印象にします。使用のコツ:リバーカラーの組み合わせを強調したい時は、テラコッタはスタンプ、ロイヤリティカード、小さなアクセントだけに使用しましょう。
media.ioで生成された都市のリバーウォークの画像例
12)月光のエスチュアリ―

HEX: #0B1020 #1D2B44 #3A5B7A #7D9FB0 #D9E4EA
雰囲気:シネマティック、静か、エレガント
おすすめ用途:ブックカバーデザイン
映画的で静かな雰囲気は、月明かりに照らされたエスチュアリーの重なる青い影を思わせます。インクのような基調色がタイトルをドラマチックにし、くすんだブルーと淡い霧色が可読性を高めます。セリフ体タイポグラフィと繊細なグレインを合わせれば、大人っぽい文学的な仕上がりに。使用のコツ:最も明るいトーンはテキストブロックの背後に使い、小さな文字でもクリアにしましょう。
media.ioで生成された月光エスチュアリーの画像例
13)流木のキャビン

HEX: #2E2A25 #5A4B3C #8C7B6A #C7B7A4 #EDE3D7
雰囲気:ラスティック、温かみ、心地よさ
おすすめ用途:インテリアデザイン ムードボード
ラスティックで心地よく、流木や濡れた樹皮、日差しに暖められた砂の雰囲気です。ブラウンが居心地良い土台を作り、ライトベージュが抜け感と現代的な印象を与えます。リネンの質感、天然木の写真、シンプルな黒文字と合わせて。使用のコツ:最も暗いブラウンは細いフレームや仕切りに用い、ムードボードをキュレーションされた印象にしましょう。
media.ioで生成された流木キャビンの画像例
14)ワイルドフラワーデルタ

HEX: #0E3A4C #2F7C8B #88C6B9 #E7C2D4 #F5F0E8
雰囲気:遊び心、軽やか、春らしい
おすすめ用途:水彩ボタニカルイラスト
遊び心があり春らしいこの配色は、水辺のクールな色合いと、デルタの端で咲くワイルドフラワーのような優しいブラッシュピンクが混ざり合っています。ティールとミントがフレッシュさを、ピンクが温もりを加えます。軽やかな線画と広い余白と合わせて、色彩が呼吸できるスペースを作りましょう。使用のコツ:ブラッシュは花びらと小さなアクセントだけに、ティールは茎と影に使います。
media.ioで生成されたワイルドフラワーデルタの画像例
15)ストームウォーターチャンネル

HEX: #1A2228 #31414B #4E7A8A #8FB6C1 #E6ECEF
雰囲気:シリアス、テクニカル、集中
おすすめ用途:データ分析ウェブアプリ
シリアスで集中力を感じさせる配色は、雨で満たされた水路や曇り空を思わせます。チャコールからスレートへのグラデーションが密なダッシュボードの階層を強調し、ブルーグレーが視認性を高めます。細いボーダー、小さな文字、一貫したスペーシングでビジュアルノイズを防ぎましょう。使用のコツ:最も明るい色調はカード、ミッドブルーグレーは選択状態やトレンドラインに。
media.ioで生成されたストームウォーターチャンネルの画像例
16)高山の小川

HEX: #0C2F4A #1D6FA3 #4CC2E0 #A9E3E8 #F1FAFB
雰囲気:明るく、軽やか、爽快
おすすめ用途:スポーツイベントポスター
明るく爽快な印象は、氷のような小川と高地の空を連想させます。サチュレーションの高いブルーが瞬時にエネルギーを伝え、淡いアクアがレイアウトをクリーンに保ちます。大きなタイポグラフィとシンプルな幾何学形状で、遠くからも見やすくしましょう。使用のコツ:背景はほぼホワイトに、最も強い2色のブルーを見出しと日付に使いましょう。
media.ioで生成された高山の小川の画像例
17)銅色のケルプ

HEX: #103B3F #1F7A77 #7AC8B9 #D08A57 #F4E7D3
雰囲気:職人風、豊か、温かく迎える
おすすめ用途:レストランのメニューデザイン
豊かで温かみのある雰囲気は、濃い水のグリーンと銅色のハイライトがバランス良く配置されています。ティール系はフレッシュで海岸の印象を、温かいオレンジブラウンが食欲やクラフト感を加えます。クリーム色の紙背景とエレガントなセリフ体見出しと合わせて、プレミアム感のあるメニューに。使用のコツ:銅色はセクション区切りや特別なアイテムに使い、本体文章はディープティールでコントラストを高めましょう。
media.ioで生成された銅色ケルプの画像例
18)霧のウィア

HEX: #2A2F33 #4D5B60 #7E8E92 #BFC9C8 #E9EFEA
雰囲気:ミニマル、控えめ、洗練
おすすめ用途:エディトリアルマガジンレイアウト
控えめで洗練された配色は、霧やコンクリート、ウィア近くの水しぶきを連想させます。グレースケールの範囲はエディトリアルで時代を超えた雰囲気があり、タイポグラフィックシステムにも十分なコントラストがあります。見開きごとに1枚だけ大胆な写真を用い、他の要素は控えめに。使用のコツ:キャプションは中間グレー、見出しはほぼ黒だけに使い、強さを抑えます。
media.ioで生成された霧のウィアの画像例
19)インディゴコンフルエンス

HEX: #0B1026 #1C2A6A #3E5CC8 #7FA2F2 #E6ECFF
雰囲気:大胆、モダン、高コントラスト
おすすめ用途:テックカンファレンス登録ページ
大胆でコントラストの高い配色は、真夜中の空の下で2つの流れが出会うようなイメージです。インディゴとエレクトリックブルーが瞬時に注目を集め、淡いペリウィンクルがフォームの可読性を保ちます。シャープなサンセリフ体とシンプルなアイコンで、常にモダンな印象を。使用のコツ:最も明るいブルーは主アクションボタンに使い、リンクにも控えめに繰り返して。
media.ioで生成されたインディゴコンフルエンスの画像例
20)トロピカルバックウォーター

HEX: #06323B #0F7B73 #36C2A8 #B9E37B #F7F3E3
雰囲気:豊かで活気があり、陽気
おすすめ用途:飲料缶パッケージ
豊かで陽気な雰囲気は、トロピカルな水、鮮やかな葉、日差しが差し込む浅瀬を思わせます。ティールとミントアクアが爽やかさを演出し、ライムグリーンのアクセントがジューシーな印象を加えます。大胆なシェイプとクリーンなクリーム背景を合わせ、棚での視認性を高めましょう。使用のコツ:缶本体にはティールを主に使い、ライムはフレーバー表示や小さなグラフィックのみに用います。
media.ioで生成されたトロピカルバックウォーターの画像例
21)リバーストーンニュートラル

HEX: #1C2A2E #3F4F55 #7A8A8D #C7CDCC #F2F4F1
雰囲気:落ち着き、中立、プロフェッショナル
おすすめ用途:コーポレートレポートテンプレート
落ち着いたプロ仕様のこの配色は、滑らかな川石や灰色の水に反射する柔らかな光を思い出させます。ダークスレートは見出しを支え、淡いグレーはページを清潔で読みやすく保ちます。このリバーカラーパレットはレポート、提案書、B2Bデッキに安心して使えます。使用のコツ:グラフには中間グレー、最も暗い色調はセクションタイトルだけに。
media.ioで生成されたリバーストーンニュートラルの画像例
22)分流チャネル

HEX: #0E2F3A #1E6D78 #63B7A6 #D5E7D7 #E7C59A
雰囲気:ナチュラル、バランス良く、多用途
おすすめ用途:エコNPOウェブサイト ホームページ
自然で多用途な配色は、葦や砂の間を編む分流の雰囲気。ティールとシーフォームが親しみやすい土台を作り、暖かな砂色のアクセントがデザインに人間味を与えます。リバーカラーの組み合わせは、自然写真や柔らかいグラデーション、シンプルなナビゲーションと相性抜群です。使用のコツ:ドネーションCTAの背後に砂色を控えめに置くことで、目立たせつつもやかましさを防げます。
media.ioで生成された分流チャネルの画像例
リバーと相性の良い色は?
リバートーンは、ストーングレー、スレート、ウォームアイボリー、サンドなどの落ち着いたニュートラルカラーと組み合わせるのが最適です。これらの色は「水」の色調が冷たくなりすぎるのを防ぎ、とくに印刷やブランドアイデンティティ制作に効果的です。
コントラストを出すには、テキストや構造にディープネイビー/チャコールを使い、1箇所だけ温かみのあるアクセント(テラコッタ、クレイ、コッパー、ピーチなど)を加えて、落ち着きを崩さず注目ポイントを作りましょう。
現代的なUI感を出したいなら、リバーティールとほぼホワイトの背景、控え目なクールグレーを組み合わせましょう。自然なブランド感を出したい場合は、オリーブグリーンや未加工の紙のようなオフホワイトをミックスすると良いです。
実際のデザインへのリバーカラーパレット応用方法
カラーだけでなく役割から考えましょう。見出し・ナビゲーションには最も暗いトーン、主要UI要素には中間色、面や背景には明るい色調、CTAやハイライトには暖かいアクセントを1つ選びます。
チャートやダッシュボードでは、データカラーは全ページで一貫性を保ち、最も明るいアクアやブルーは最重要シリーズ専用にしましょう。これにより認知負荷が減り、インターフェイス全体が「流れる」ように自然な印象となります。
ブランドや印刷物の場合、質感のあるニュートラル(クリーム、サンド、ストーン)を基調にし、テール系やブルー系をブロック、ボーダー、イラストに使います。さらに、注意を引くために少しだけ暖色のアクセントを加えましょう。
AIでリバーパレットのビジュアルを作成する
すでにHEXコードがあるなら、リバー・パレットを検証する最速の方法は、UI画面、ポスター、パッケージ、カバーなどのリアルなモックアップをいくつか作成し、読みやすさや雰囲気を実際のコンテキストで比較することです。
Media.ioを使えば、シンプルなプロンプトからブランドらしいビジュアルを生成でき、アクセントカラー(サンド、テラコッタ、カッパー)やベーストーン(ネイビー、ティール)を調整して素早くイテレーションできます。
上記のサンプルプロンプトをテンプレートとして使いましょう。題材(ダッシュボード、ラベル、フライヤー)を入れ替えて、パレットのキーワードは一貫して使うことで、まとまりのあるバリエーションを得られます。
リバーカラーパレット よくある質問
-
リバーカラーパレットとは何ですか?
リバーカラーパレットは、水にインスパイアされた色合い(ネイビー、ティール、アクア、ブルーグレー)と、ストーンやサンド、フォギーグレー、暖かいオフホワイトなどの自然なニュートラルを組み合わせて、調和と読みやすさを持たせる配色セットです。 -
UIデザインにおすすめのリバーカラーはどれですか?
ナビゲーションやテキストにはディープネイビーやチャコール、主要アクションにはミッドティール、面にはシーフォーム系やオフホワイトの明るい色が最適です。重要箇所にはサンドやカッパー、テラコッタなどの暖色アクセントを1つ加えましょう。 -
リバー・パレットが冷たくなりすぎないようにするには?
アイボリーやサンド、ベージュなどの暖色ニュートラルを取り入れ、純粋なグレーは控えめにします。ほんの少しだけ暖色アクセントを加えるだけで、ティールやブルー中心の配色も親しみやすくなります。 -
ティール系のリバートーンにおすすめのアクセントカラーは?
テラコッタ、クレイ、カッパー、ピーチ、サンディベージュはティールとよく合います。アクセントカラーは1つ選び、CTAやバッジ、重要なコールアウトで使えば見た目の散乱を防げます。 -
リバー・パレットはブランディングに向いていますか?
はい。リバー・パレットは穏やかさ、信頼、自然を伝えます。ウェルネスやサステナビリティ、SaaS、教育、金融、ホスピタリティなどのブランドで人気です。清潔感と信頼性がある印象を与えます。 -
リバー・パレットから何色使うのが良いですか?
実際のデザインでは3~4色で十分です。濃い色のアンカー、ミッドトーンのメイン、明るい背景、必要ならアクセントを1つ。5色目は特殊な状態やセカンダリーセクション用の予備にしましょう。 -
リバー・パレットのモックアップを自動生成できますか?
はい。Media.ioのテキストから画像を生成するツールを使えば、リバー・トーンや全体のスタイルを指定したプロンプトで、ポスターやUI画面、パッケージやブランドシーンを作成できます。
次へ: ブラックホールカラーパレット

