20の最高のアーバンカラーパレットとHexコード一覧

都市のカラーパレットは、現代都市生活の雰囲気を捉えます：落ち着いたニュートラルカラー、シャープな影、画面や印刷物でも映える温かみのあるアクセント。

以下では、HEXコード付きの20以上の都市系カラーパレットアイデアと、すぐに使えるAIプロンプトをご紹介しています。Media.ioにコピーすれば、マッチするビジュアルを素早く生成できます。

都市カラーパレットが効果的な理由

都市系パレットが「リアル」に感じられるのは、都市が自然に提供する色——コンクリートグレー、アスファルトチャコール、霧のブルー、レンガレッド、そして温かな屋内の光——を基盤にしているからです。

さらに、とても実用的でもあります。落ち着いたニュートラルカラーはタイポグラフィやアイコン、商品写真の配置がしやすく、単一のアクセントカラーはCTAやラベル、ハイライトの階層を明確にします。

何より、都市系カラースキームはブランドシステム全体にスケールしやすいのが特徴です。UIコンポーネントからポスター、パッケージ、SNSテンプレートまで統一感を保ちつつ、流行に流されすぎません。

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

1）サイドウォークラテ

HEX： #F4AFA5 #C9C6C1 #3B2F2F #8E9A93 #F7F3EE

雰囲気： 居心地が良い、落ち着き、モダン

おすすめ用途： カフェのブランディングやメニューデザイン

心地よく都市の温もりを感じるこのトーンは、肌寒い朝の歩道でラテを手に取るような感覚。メニューやポイントカード、小型パッケージなど、温もりが重要な場面に最適な都市系パレットです。サーモンのアクセントはエスプレッソのテキストと組み合わせてコントラストを、背景はオフホワイトで軽やかさを。使い方のコツ：セージグレーをサブ見出しに使えば、レイアウトが落ち着いた印象になります。

Media.ioで生成したサイドウォークラテの画像例

Media.io

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

今すぐ無料で試してみる

2）スチール＆シトラス

HEX： #4C5866 #D7DCE2 #F2B441 #23262A #2F7C8A

雰囲気：シャープ、エネルギッシュ、自信

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

スチールグレーとシトラスは、ガラスの塔や速い通勤を思わせる組み合わせ。ダッシュボードやヒーローセクションにピッタリです。ナビゲーションにはチャコールを、シトラスはボタンやバッジ、主要な指標だけに限定。使い方のコツ：ティールはチャートやリンクのみにしてアクセントの階層を分かりやすく。

Media.ioで生成したスチール＆シトラスの画像例

3）ネオンアレイダスク

HEX： #1B1A22 #3B2A4A #E64B7A #F1C84C #B6B8C5

雰囲気：大胆、エレクトリック、夜遊び

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

深い影に映える電気ピンクとゴールドの光は濡れた舗道に反射するネオンのよう。濃いベース色は大きな文字に使い、ホットアクセントは日付やDJ、チケットのランクを際立たせるのに。シンプルな幾何学図形と合わせると視覚的ノイズがなくなります。薄いグレーはスペースや可読性に。使い方のコツ：見出しの背景にバイオレット～ブラックのグラデーションを用いて深みを簡単に演出。

Media.ioで生成したネオンアレイダスクの画像例

4）ルーフトップガーデン

HEX： #2E5D50 #8FB8A6 #E7D7C6 #C46A4A #3C3C3C

雰囲気：フレッシュ、ブティック、リラックス

おすすめ用途：ブティックホテルのウェブサイトビジュアル

新鮮なグリーンと温かな粘土色は、ルーフトップのプランターやテラコッタポット、静かなラウンジコーナーを思わせます。アメニティや予約、写真キャプションなど、ホスピタリティページにぴったり。ソフトクリームとディープグリーンの組み合わせで落ち着いたコントラスト、粘土色はボタンやハイライトに。使い方のコツ：本文テキストにはチャコールを使って高級感と読みやすさを。

Media.ioで生成したルーフトップガーデンの画像例

5）メトロコンクリート

HEX： #2D2F33 #6C7077 #B8BCC2 #F1F2F4 #A66B5B

雰囲気：プロフェッショナル、建築的、控えめ

おすすめ用途：不動産のパンフレットや物件リスト

滑らかなコンクリートグレーと控えめなカッパーは、ラッシュ時の新築ロビーの雰囲気。信頼・構造・さりげない温かみが求められる不動産レイアウトに最適です。カッパーアクセントは力強い写真と合わせ、ライトグレーは間取り図やスペックのクリーンなキャンバスに。使い方のコツ：見出しはブラック近くで、本文はペールグレー上に配置して印刷にも読みやすく。

Media.ioで生成したメトロコンクリートの画像例

6）ブリック＆フォグ

HEX： #B55A4A #E6E0D8 #6E7B83 #2C2A28 #F3B48B

雰囲気：伝統的、落ち着き、スタジオ向け

おすすめ用途：建築ポートフォリオサイト

レンガの温もりと霧がかったグレーは、曇り空の下にある古い外観のイメージ。プロジェクトページにはライトニュートラルを、レンガやピーチは場所や年、賞など重要なディテールの強調に。余白や細い線で作品が主役になるようにしてください。使い方のコツ：キャプションや寸法にはチャコールを使用し、抑制された建築的な印象を保つ。

Media.ioで生成したブリック＆フォグの画像例

7）クロスウォークミニマル

HEX： #0F1012 #FFFFFF #B9BDC5 #E0D6C7 #D66A5E

雰囲気：ミニマル、編集、ハイコントラスト

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

高コントラスト白黒に柔らかな温かみのニュートラルが交差点のストライプや磨かれた店舗のような印象。ルックブックやタイポグラフィ主体の表紙、写真キャプションなどスペースが必要な場面に好適。サーモンコーラルのアクセントはセクションの区切りやページ番号に、小さな範囲のみ。使い方のコツ：写真はやや彩度を落として温かみのある紙色が際立つように。

Media.ioで生成したクロスウォークミニマルの画像例

8）ストリートカー・ティール

HEX： #1F6A78 #86A9B0 #F7E7D3 #D27C5D #1C2024

雰囲気：爽やか、沿岸都市、招待的

おすすめ用途：トラベルブログのヘッダーグラフィック

ティールと柔らかなサンドは、水辺へ向かうストリートカーと日差しに照らされた建物のイメージ。タイトルバーやナビゲーションにはティール、クリーム色が長文を快適にします。コーラルはバッジや地図ピン、カテゴリータグなどスキャン誘導に。使い方のコツ：本文はブラック近くのチャコールで読みやすく、ピュアブラックほど強すぎない印象に。

Media.ioで生成したストリートカー・ティールの画像例

9）ウェアハウスラスト

HEX： #7A3E2E #B46A4E #D9C1A7 #4A4F55 #1F1F1F

雰囲気：無骨、クラフト、インダストリアル

おすすめ用途：クラフトビール缶パッケージ

ラスティーブラウンとざらついたダークカラーは、再生木材やスチールビーム、小規模なタップルームのような雰囲気を演出します。こうしたトーンは、質感や本物らしさが大切なパッケージに最適で、大胆な書体やシンプルなスタンプと特によく合います。サンディベージュにはホップやグレインのイラストを合わせて、ラベルの重さを和らげましょう。使い方のヒント：中間のグレーは法律文書などを目立たせず、視認性を保つために使ってください。

media.ioで生成されたウェアハウスラストの画像例

10）ギャラリーグレージュ

HEX： #F2EEE8 #D6CEC4 #A39B92 #5A5957 #C98B7A

雰囲気： 落ち着き、洗練、モダン

おすすめ用途： ミニマリストインテリアデザインブランドキット

ソフトなグレージュの重なりは、暖かいスポットライトとマットフレームで静かなギャラリー壁のよう。都会的なこのカラーパレットは、控えめな洗練さが必要なブランドガイドやスライド、ポートフォリオカバーに最適です。ディープグレーとクリーンなサンセリフ書体を組み合わせて、くすんだテラコッタでハイライトやサインを加えてください。使い方のヒント：最も明るい色調で背景をまとめ、濃い色は構成や階層に利用しましょう。

media.ioで生成されたギャラリーグレージュの画像例

11）アスファルトブルーム

HEX： #24262B #5E6A75 #C7CDD2 #F2AFA5 #8A3B4A

雰囲気： スリーク、ロマンティック、都会の夜

おすすめ用途： スキンケア製品広告クリエイティブ

暗いアスファルトトーンとブラッシュやベリーの色合いが、夜のスカイラインに咲く花のような印象です。この組み合わせは、過度にパステルにしたくないエレガントなビューティー広告におすすめ。ブラッシュピンクとクリーンな商品コピーを組み合わせ、ベリーはパーセンテージやメリットなど小さな強調ポイントに。使い方のヒント：クールグレーの背景を選べば、ブラッシュが甘すぎず、フレッシュに仕上がります。

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

12）ナイトトレイン

HEX： #0B0E14 #1E2A3A #4F6D7A #C7A27C #EAE2D6

雰囲気： ムーディー、頼もしい、シネマティック

おすすめ用途： アプリオンボーディングUI画面

ディープネイビーとスレートカラーは、列車の窓から流れる街の灯りを見ているような雰囲気です。温かみのあるタンカラーがプレミアム感をプラスし、フィンテックや旅行、メンバーシップ系アプリに好相性。クリーム色は大きな見出しに使い、ボタンはタンでビジュアルの流れを明確に。使い方のヒント：スレートはセカンダリーテキストに使い、ダーク背景でも快適さをキープしましょう。

media.ioで生成されたナイトトレインの画像例

13）サイドストリートパステル

HEX： #F6C6B4 #F1E6D8 #B7C0C7 #8E9CA6 #5B4B4B

雰囲気： ソフト、親密、モダンクラシック

おすすめ用途： 都市の駆け落ち招待状セット

柔らかなピーチとペーパークリームは、夕暮れ時の静かな裏道を思わせます。ロマンチックでありながら現代的なエッジを加えたい招待状に最適です。クールグレーはクリーンなセリフ書体と合わせ、ディープココアは名前や重要なディテール専用に。使い方のヒント：細いグレーラインでレイアウトに構造感を出し、抜け感を保ちましょう。

media.ioで生成されたサイドストリートパステルの画像例

14）コーナーベーカリーサイネージ

HEX： #F3D1B8 #C06B5A #3A2F2C #A1A9A5 #F7F5F1

雰囲気： ウェルカミング、職人風、近所感

おすすめ用途： 店舗サイン＆ポスターグラフィック

温かいペイストリートーンとココアブラウンで、近所のパン屋の手描き看板の雰囲気。クリーム色のベースで視認性を高め、テラコッタレッドにブランドマークを載せましょう。控えめなグレーグリーンは材料表示やサブラベルに使えば甘さ控えめのカラーバランスに。使い方のヒント：ダークブラウンをメインテキスト色に印刷するとブラックより柔らかい仕上がりです。

media.ioで生成されたコーナーベーカリーサイネージの画像例

15）スカイラインブルーアワー

HEX： #2C3E50 #4B5D67 #95A5A6 #E0C097 #E76F51

雰囲気： コーポレート、洗練、前向き

おすすめ用途： 年次報告書カバーデザイン

ブルーアワーのトーンに暖かなハイライトが加わり、街の灯りがともる直前のスカイラインを感じさせます。権威と温かみ両方が必要な企業レポートやピッチデッキに最適。スレートブルーはセクションに、サンドカラーのグラフ、コーラルアクセントは成果や強調ポイントに活用。使い方のヒント：アイコン塗りはライトグレーブルーで揃えるとプロフェッショナルな一体感が生まれます。

media.ioで生成されたスカイラインブルーアワーの画像例

16）トラムチケット

HEX： #F5F0E6 #D1C5B6 #2F3A3D #4F8A8B #E07A5F

雰囲気： 整然、レトロモダン、クリア

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

クリーム色の紙とインキーチャコールで、スタンプされたトラムチケットの懐かしさと収集性を再現。装飾よりも明瞭さが求められる地図や時刻表、インフォグラフィックにぴったりの都会的配色。ティールは路線に、コーラルは主役の路線や乗り換えポイント用に。使い方のヒント：ラベルはチャコールで、線が細くなりすぎないようにすれば、小さいサイズでも可読性を保てます。

media.ioで生成されたトラムチケットの画像例

17）ペイブメントピーチ

HEX： #F4AFA5 #F8EDE3 #C9C3BB #6D6A67 #2B2B2B

雰囲気： フレンドリー、モダン、ソーシャルファースト

おすすめ用途： ソーシャルメディアカルーセルテンプレート

柔らかいピーチと暖かいニュートラルカラーで、日差しを浴びた舗道やミニマルな店先をイメージ。明るいクリームはスライドの主役に、ピーチは見出しやステッカー、プライスタグに活用。ダークチャコールと広めの行間で、モバイルでもキャプションが読みやすいように。使い方のヒント：シャドウは控えめに、シンプルな形を使ってクリーンで目を引く仕上がりに。

media.ioで生成されたペイブメントピーチの画像例

18）レイニープラザ

HEX： #3D4A4F #6E7F86 #B4C0C6 #E9E3DA #9C5C4B

雰囲気： クール、安定、アウトドア

おすすめ用途： アウトドアギアカタログ見開き

クールグレーとミスティブルーは、傘がゆっくり行き交う雨の広場の情景。こうしたトーンは商品写真に堅実で実用的な枠を与えたいカタログ見開きに最適です。クレイアクセントはプライスタグや特集情報に、明るいニュートラルは紙のベースと。使い方のヒント：ミッドグレーブルーは区切り線や表に使えば、レイアウトが整理されつつごちゃごちゃしません。

media.ioで生成されたレイニープラザの画像例

19）ディストリクトナイトマーケット

HEX： #2A1F2D #5C3D5A #D96C5F #F0B44C #E6E4DF

雰囲気： 活気、スパイシー、夜景

おすすめ用途： ストリートフードフェスティバルフライヤー

プラムの影、スパイシーなコーラル、ゴールデンな光で、提灯が揺れる賑やかなナイトマーケットの雰囲気。深い色味は背景ブロックに、暖かいアクセントで出演者や場所、時間に視線を誘導しましょう。淡いニュートラルは細かいテキストで、強い色でも情報が読みやすく。使い方のヒント：書体はシンプル＆ヘビーにしてビビッドなアクセントに負けないように。

media.ioで生成されたディストリクトナイトマーケットの画像例

20）モダンロフト

HEX： #F1E9DD #C9B9A6 #7C7A73 #2C2C2C #C46D5C

雰囲気： 暖かい、上質、コンテンポラリー

おすすめ用途： 家具製品ランディングページヒーロー

暖かなプラスターニュートラルにクレイアクセントを加えた静かなロフトは、クリーンな直線と柔らかな午後の光が特徴。クリーム色をメインキャンバスに、チャコールの見出しと構造的なグリッドでレイアウトを引き締めてください。クレイアクセントはボタンや商品ラベルに用い、写真を邪魔しない程度の暖かさを加えましょう。使い方のヒント：サブパネルはトープ系でまとめるとプレミアムな重層感が生まれます。

media.ioで生成されたモダンロフトの画像例

21）アンダーパスインク

HEX： #111316 #3E4650 #9AA3AD #E6DFD5 #F4A07B

雰囲気： 無骨、シャープ、モダン

おすすめ用途： ストリートウェアドロップポスターグラフィック

インキーブラックとクールグレーは高架下の壁のような質感、アプリコットカラーは新しいペンキに貼ったステッカーのような鮮やかさ。濃いベースで大胆な書体やインパクト重視の写真処理を。ライトニュートラルは商品情報ブロックに使い、アプリコットは日付や値段など目立たせたいワンポイント専用。使い方のヒント：マージンを広めに取って、濃色でも窮屈にならず上質感を保ちましょう。

media.ioで生成されたアンダーパスインクの画像例

都市に合う色は？

都会的なパレットとは、チャコール、コンクリートグレー、オフホワイト、スレートブルーといった構造的ニュートラルと組み合わせるのがベスト。これらの色はレイアウトの可読性を高め、写真の統一感も演出します。

アクセントとしては、サーモンやクレイ、コッパー、シトラスなどの暖色、またはティールやスチールブルーなど冷たいカラーをひとつだけ選び、視線を誘導します。「ひとつだけ強いアクセント」の使い方が都会配色をモダンで清潔感のある印象にまとめるコツです。

もっとバリエーションが必要な場合は、2つめのアクセントを小さいスケール（リンクやグラフ線、タグなど）で加え、背景やテキストはニュートラルで統一感を保ちましょう。

都市カラーパレットの実際のデザインでの使い方

まず最初に、背景はニュートラル（オフホワイトまたはライトグレー）にし、最も濃い色をタイポグラフィやUI構造部分に使いましょう。これが都会デザイン特有のシャープなコントラストを生みます。

次に、アクセントカラーには1つの用途だけ割り当ててください（例：CTAボタン、価格ラベル、イベント日付、主要数値など）。全てのハイライトが同じ色味なら、意図的で“都会らしい清潔感”が生まれます。

最後に、彩度のバランスを取ります。都会的なパレットは、写真をほんの少し desaturation し、インターフェース配色も控えめにすると、アクセントが生き生きと際立ちます。

AIで都市カラーパレットのビジュアルを作成

上記のどの都会配色でも、統一感のあるモックアップ、ポスター、UIコンセプトを作りたい場合は、そのパレットのプロンプトをコピーして、数分でビジュアルスタイルを生成できます。

Media.ioなら、縦横比の変更や、被写体の入れ替え（ポスターからランディングページへ変更など）、同じパレットの雰囲気を保ってブランド一貫性も簡単に保てます。

好きな画像ができたら、キャンペーン用やサムネイル、プレゼン用スライドなどにもすぐブラウザから応用・微調整できます。

次へ： ライトサーモンカラー パレット