ブルーとラスティカラー配色22選｜カラーパレットとHEXコード

ブルーラストのカラーパレットは、クールな海のブルーと酸化したアースカラーの暖かみを組み合わせ、デザインにモダンさと人間味を簡単に与えます。

ブランドシステム、UI、印刷レイアウトのどれを作る場合でも、ネイビーとラストの組み合わせは、コントラストと階層、印象的なアクセントを演出しつつ、単なる流行に頼った印象になりません。

青とラストのカラースキームが優れている理由

ブルーは落ち着いた構造を生み、ラストは暖かみと個性を加えるため、全体の印象は冷たくなりすぎずバランスが取れています。そのコントラストにより、見出しやボタン、ハイライトの階層もはっきりつけやすいです。

ラストは「アクセント向き」の色でもあり、ネイビーやスチールブルーの中で際立ちながらも、落ち着きと大人っぽさが感じられます。そのため、ネイビーとラストの組み合わせは高級ブランドにも日常のテンプレートにも合います。

さらに、青とラストの配色は実用的なニュートラルカラー（クリーム、グレージュ、チャコール）とも相性が良く、レイアウトがWeb、印刷、製品にわたって読みやすく安定します。

20種以上のブルーラストカラーパレットアイデア（HEXコード付き）

1）コースタルファウンドリー

HEX： #0B1F3B #3C6E8F #B65A3C #E7D7C3 #1F2328

雰囲気： 工業的、沿岸、安定感

おすすめ用途： ブランドアイデンティティ＆文房具

工場の静けさと海風、波止場のスチールのような組み合わせ。深いネイビーがレイアウトを引き締め、ラストが温かみを加えますが強すぎることはありません。スペースとクリーンなタイポグラフィと一緒に使えばモダンに。Tip: ラストはシールや区切り、ワンポイントアイコンなど、さりげなく使いましょう。

media.ioで生成されたコースタルファウンドリーの画像例

Media.io

Media.ioは、ブラウザ上でビデオ、画像、オーディオの作成・編集ができるオンラインAIスタジオです。

今すぐ無料で試す

2）キャニオンハーバー

HEX： #123A5A #6FA3B8 #C15F3B #F2E8DA #2D2F36

雰囲気： 冒険的、エアリー、太陽を浴びた

おすすめ用途： 旅行ポスターやSNS広告

太陽に照らされた崖と涼しげな水色で、アウトドアで前向きな雰囲気。淡いクリームを背景にダークブルーで見出しを。ラストをバッジやCTAとして使えば深みが出ます。Tip: グラデーションは控えめにし、レトロな雰囲気をキープ。

media.ioで生成されたキャニオンハーバーの画像例

3）ヴィンテージワークウェア

HEX： #1A2D4A #4E7A9A #A84D35 #EFE6D6 #8B6B4A

雰囲気： 伝統的、タフ、信頼感

おすすめ用途： 作業着のパッケージやラベル

使い込まれたデニムや磨かれたメタルのような手作り感と信頼感。インディゴをベースに、ラストやタンで温かみをプラス。ラベルはクリーム、商品名はダークブルーで。Tip: 紙の質感やスタンプ風マークを加えて、伝統的な雰囲気を強調しましょう。

media.ioで生成されたヴィンテージワークウェアの画像例

4）デザートダスクインターフェイス

HEX： #0F2742 #5B87A6 #C26745 #DAD7D0 #F7F2EA

雰囲気： 落ち着き、現代的、洗練

おすすめ用途： ダッシュボードUIやデータビジュアル

静かな夕暮れブルーと日焼けしたようなラストで洗練された雰囲気。明るいニュートラルを背景に、濃いブルーでナビゲーションを。ラストはプライマリーボタンや警告、グラフの強調に。Tip: コントラストは高く、ラストはオフホワイトと組み合わせましょう。

media.ioで生成されたデザートダスクインターフェイスの画像例

5）ストーミーブリック

HEX： #162A3A #4F6F86 #B34E3B #CFC6B8 #2A2B2E

雰囲気： ムーディー、都会的、自信

おすすめ用途： レストランのメニューやサイン

雨の都市のブルーとレンガの暖色で力強くストリート感。ブルーは大きな面やテキスト用、ラストは食欲を刺激するアクセントに。暖かいグレージュで寒さを抑制。Tip: ラストはセクション見出しや細いルール線にして、クリーンなリズム感を。

media.ioで生成されたストーミーブリックの画像例

6）インク＆テラコッタ

HEX： #0A1A2B #2F5D7A #C06A4B #F1E4D2 #5A4A3F

雰囲気： 文学的、暖かい、親密

おすすめ用途： 書籍カバーやポッドキャストアート

インクのような影とテラコッタの暖色で、夜の読書スペースの雰囲気。濃いブルーでタイトルを上質に、クレイラストで親しみやすさもプラス。セリフ体とクリーム色のフィールドで飽きの来ない仕上がり。Tip: タイトルの背後にラストの形を一つ入れて可読性UP、輪郭を強くせずさりげなく。

media.ioで生成されたインク＆テラコッタの画像例

7）ミュージアムミニマル

HEX： #10243A #6C8FA6 #A94F3A #F6F0E6 #3A3F45

雰囲気： クリーン、洗練、控えめ

おすすめ用途： 展示ポスターやプログラム

静寂なギャラリーブルーと抑えたラストでキュレーション感と現代性。アイボリー背景でミュージアムの白を表現し、スレートブルーを本文に。ラストは小さなスタンプや日付、キーシンボルなどが最適。Tip: マージンを広く取り、揃えを厳格にするとミニマル感が強まります。

media.ioで生成されたミュージアムミニマルの画像例

8）ノルディックピア

HEX： #0E2A3E #5B8CA8 #C86A4A #D9D2C6 #F8F6F1

雰囲気： フレッシュ、爽やか、現代的

おすすめ用途： ウェブサイトのヒーローセクション

海の風のようなクリアブルーと暖かいラストが、塗装された桟橋や朝の光を表現。オフホワイトをキャンバスにしてクリーンに、最も濃いブルーはナビや見出しに。ラストはボタン一つに絞ることでアクセントに。Tip: 画像は寒色系で、ラストが確実にフォーカルになるように。

media.ioで生成されたノルディックピアの画像例

9）レトロルートマップ

HEX： #1D3D63 #7BA9C2 #B5533A #F3E8D9 #D4B48C

雰囲気： ポップ、ノスタルジック、日だまり

おすすめ用途： インフォグラフィックや地図デザイン

昔ながらのロードトリップを思い出させる、柔らかなブルーとほこりっぽいラスティトーン。サンディタンがヴィンテージの暖かみを加えますが、パレットを黄色系に寄せすぎません。濃いブルーはテキストや境界線に、ラスティは注目点を示すために使いましょう。ポイント：アイコンはシンプルで丸みを帯びたレトロな雰囲気にしてください。

media.ioで生成したレトロルートマップの画像例

10) 陶芸スタジオ

HEX： #152C45 #6E93AD #C46B4A #EDE2D4 #4A3A32

雰囲気： 職人、触感、落ち着き

おすすめ用途： ハンドメイド製品パッケージ

艶やかなブルーと陶器ラスティトーンがまるで暖かい午後の日差しの中の陶器棚のような触感を感じさせます。クリームとココアのニュートラルがパッケージを清潔で読みやすく保ちます。シールやリボン、ブランドマークにラスティを使い、テキストは濃いブルーで。ポイント：マットな仕上げやさりげないエンボス加工はこれらのアースカラーと相性抜群です。

media.ioで生成した陶芸スタジオの画像例

11) トワイライトレジャー

HEX： #0C2036 #4A6C86 #A94A35 #F4EEE4 #2E3339

雰囲気： シリアス、エレガント、信頼感

おすすめ用途： 財務プレゼンテーション・報告書

トワイライトブルーに控えめなラスティアクセントが自信とデータ志向を感じさせます。暗色は権威を与え、暖かいアクセントはグラフを無機質に見せません。アイボリーはスライド背景に使い、コントラストを保ち目の疲れを軽減します。ポイント：ラスティはデータシリーズやキーカラーのコールアウトボックスに使い、インサイトを際立たせましょう。

media.ioで生成したトワイライトレジャーの画像例

12) シーサイド倉庫

HEX： #0E2F4B #4F7E98 #BB5B3F #D7D0C6 #1B1E22

雰囲気： インダストリアル、大胆、モダン

おすすめ用途： ストリートウェアルックブック

倉庫スチールと潮風にさらされたペイントが、大胆でモダンな印象を作ります。冷たいブルーは写真をシャープに見せ、ラスティがタイポグラフィやタグのアクセントとなります。モノクロ画像や彩度を抑えた写真と組み合わせると一体感が高まります。ポイント：ラスティは全体の10〜15%程度に抑え、意図的なアクセントとして扱いましょう。

media.ioで生成したシーサイド倉庫の画像例

13) ウォームデニムニュートラル

HEX： #183554 #7199B3 #B85A40 #EFE3D2 #B8A89A

雰囲気： 柔らかく、親しみやすく、日常的

おすすめ用途： ライフスタイルブログ・テンプレート

柔らかいデニムブルーと暖かいオートミールニュートラルは親しみやすく、生活感があります。ラスティアクセントが見た目を冷たくしすぎない効果を持ち、特に長いページに有効です。暖かい写真やリネンの質感、ミニマルなアイコンセットと組み合わせてください。ポイント：ヘッダーやリンクはデニムブルー、ラスティはホバーステートや小さなバッジに。

media.ioで生成したウォームデニムニュートラルの画像例

14) 錆びた灯台

HEX： #081E33 #5E89A8 #C15E41 #F7F1E7 #2A2D33

雰囲気： 劇的、海洋的、時代を超えた

おすすめ用途： アルバムカバー・ポスター

暗い海のブルーにラスティの輝きが、灯台の光が霧を切り裂く映画的な印象を作ります。暖かいオフホワイトがタイプに余白を与えつつムーディな雰囲気を保ちます。ラスティはタイトルやグラフィックのワンポイントに控えめに使いましょう。ポイント：さりげないグレインや強いコントラストで劇的なプリント感を保ちます。

media.ioで生成した錆びた灯台の画像例

15) 銅配線UI

HEX： #0D2440 #3F6F92 #C86A45 #EEF1F4 #2B2F35

雰囲気： テクノロジー、シャープ、モダン

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

クールなテックブルーに銅色ラスティアクセントが速く、意図的な印象。製品インターフェースで明確さが重要な場面にブルーとラスティの組み合わせが強く機能します。背景は明るく、ナビや主要テキストには濃いブルーを使用。ポイント：ラスティはアクション階層の一部（主要ボタンなど）にだけ使い、UIの一貫性を保ちます。

media.ioで生成した銅配線UIの画像例

16) 書店エディトリアル

HEX： #132846 #6B8FA8 #B4553D #F2EBDD #6A5243

雰囲気： クラシック、居心地良い、編集出版的

おすすめ用途： 雑誌レイアウト・ニュースレター

居心地の良い書店ブルーにラスティのヘッドラインがスマートで招き入れる印象。紙のようなクリームでレイアウトの読みやすさを保ち、ブラウンが区切りやキャプションの暖かみを加えます。セリフ見出しや余裕あるリーディングと合わせてプリントファーストの雰囲気に。ポイント：ラスティは引用やセクション番号に使い、長いページでも読者の目を誘導しましょう。

media.ioで生成した書店エディトリアルの画像例

17) 秋の海岸ウェディング

HEX： #16324F #7AA2B9 #C86C4B #FBF6EE #C9B7A2

雰囲気： ロマンチック、暖かい、爽やか

おすすめ用途： 招待状・サインデザイン

爽やかな海岸ブルーに秋のラスティアクセントが甘くなりすぎないロマンチックさを演出します。柔らかなアイボリーで招待状は明るく、暖かいグレージュで写真や花のバランスを取ります。繊細なラインアートや洗練されたセリフで名前を飾りましょう。ポイント：ラスティは箔や活版印刷で小さく贅沢な印象に。

media.ioで生成した秋の海岸ウェディングの画像例

18) インダストリアルロフトインテリア

HEX： #0F2236 #557D97 #B85A42 #E6DDCF #2A2B2E

雰囲気： 都市的、居心地良い、バランス

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

都市的なブルーと暖かいラスティは、露出したレンガと塗装キャビネットのよう。クリームとチャコールで快適なベースができ、ロフトやモダンなアパートに最適。ミッドブルーは広い面に、ラスティはテキスタイルやアート、椅子などでアクセントに。ポイント：ラスティを2カ所以上に繰り返して意図的に見せましょう。

media.ioで生成したインダストリアルロフトインテリアの画像例

19) 港夜市

HEX： #102C55 #4E87A8 #C35F43 #EADBC7 #1C1E22

雰囲気： 活気、モダン、夜景

おすすめ用途： イベントフライヤー・プロモーション

夜市ブルーに暖かいラスティスパークがエネルギッシュで現代的。暗色でタイプが際立ち、淡いサンドがデザインを重くしません。ラスティは日付やチケット、キーモチーフに使って注目を誘導。ポイント：濃いブルーの大きなブロックとラスティグラデーションのストリップでパンチのあるフライヤーレイアウトができます。

media.ioで生成した港夜市の画像例

20) アルチザンコーヒーラップ

HEX： #0D2A4A #6C97B1 #B6553F #E9DDCF #3A2E2A

雰囲気： 手作り、暖かい、プレミアム

おすすめ用途： コーヒーバッグパッケージ・広告

焙煎の暖かみとクールブルーの落ち着きは、日の出時のカフェの雰囲気。チョコレートブラウンとラスティがリッチで手作り感を与え、ブルーでモダンな印象を保ちます。ラベルの読みやすさには明るいニュートラル、ブランドロックアップには最も濃いブルーを使いましょう。ポイント：ラスティのストライプやバッジを1つ追加して複数ローストの統一感を出します。

media.ioで生成したアルチザンコーヒーラップの画像例

21) 酸化ブループリント

HEX： #0B2D4D #3E7CA3 #C46445 #F4F5F7 #1F2A33

雰囲気： 精密、エンジニア、自信

おすすめ用途： プロダクト1ページ・テック図表

ブループリントブルーと酸化ラスティアクセントはエンジニア的でシャープな印象。ブルーとラスティの組み合わせで技術レイアウトに読みやすさと暖かみ・個性を加えます。淡いグレーをキャンバスにし、ラスティはコールアウトや矢印、重要ラベルに限定使用。ポイント：ラスティは長文には避け、ハイライト部分だけで最大の明瞭性を。

media.ioで生成した酸化ブループリントの画像例

22) スレートとシエナペアリング

HEX： #13233A #6A8EA8 #A84C37 #EFE7DC #A59A8D

雰囲気： バランス、成熟、万能

おすすめ用途： ブランド運用システム・ガイドライン

スレートブルーとシエナラスティはバランス良く、石と粘土が同じ風景にあるような安定感。ニュートラルカラーでパレットがウェブ・印刷・パッケージで柔軟に使えます。ミッドブルーはUIのセカンダリ状態に、ラスティは上品な強調色として。ポイント：アクセント比率をドキュメント化し、暖かいトーンをチーム全体で一貫して使えるように。

media.ioで生成したスレートとシエナペアリングの画像例

ブルーラストと相性の良い色は？

ニュートラルカラーは一番使いやすい：暖かいアイボリー、クリーム、グレージュ、ピュアホワイトでパレットを呼吸できるようにし、ラスティアクセントが意図的に見えます。チャコールやほぼブラックはタイポグラフィ中心のレイアウトのコントラスト強化にも最適です。

より豊かな組み合わせには、サンド／タンでヴィンテージ感を、スレートグレー・ブルーで技術的な「ブループリント」ムードを加えてみてください。優しい印象にしたい場合は明るいシアンより控えめなダスティブルーを使いましょう。

迷ったら、ラスティは面積で最小にし、ブルーをシステムの主役にして下さい—特にUIでは一貫性と読みやすさが最重要です。

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

まず役割から始めましょう：見出しやナビには濃いブルー、セカンダリ要素にはミッドブルー、背景には明るいニュートラル、強調（ボタン・バッジ・グラフハイライト）にラスティ。この方法で暖かいアクセントがパレットを支配しないようにします。

ブランドでは、ラスティはシール・アイコン・仕切り・パッケージディテールなど小さな部分で暖かみとプレミアム感を伝えます。インテリアではテキスタイル＋アート、椅子＋ラグから少なくとも2つの接点でラスティを反復し、コヒーレンスを作りましょう。

デジタルレイアウトの場合、コントラストを早めにテストしましょう。オフホワイトにラスティ色は、ミッドグレーよりも通常読みやすいです。本文テキストには、純粋なブラックより柔らかい印象を与えたい場合は濃いめのブルーを使いましょう。

AIでブルーラストパレットのビジュアルを作成

ブルーラスティの色合いが実際にどのように見えるか知りたい場合は、ランディングページ、ラベル、ポスター、インテリアのムードボードなどで、量産前に手早くモックアップを作成しましょう。

Media.io のテキストから画像生成機能を使えば、プロンプトを貼り付けて、スタイル（ベクター、エディトリアル、リアル風など）を指定し、ネイビーとラスティのバランスがプロジェクトに合うまで繰り返し調整ができます。

上記のプロンプトを出発点として使い、製品タイプやタイポグラフィの雰囲気、レイアウト形式を自分のブランドに合わせて入れ替えてみましょう。

次へ： グリーン・ブルー・パープルカラーパレット