おすすめストリートアート配色20選｜HEXコードと使い方ガイド

ストリートアートのカラーパレットはインパクト重視で作られています ― 太いコントラスト、ネオンのアクセント、意図的に感じる無骨なニュートラルカラー。デザインをモダンでエネルギッシュ、そして「通りの向こうからでも目立つ」見た目にしたいときに最適です。

以下はHEXコード付きで厳選した20種類のストリートアートカラーの組み合わせと、ポスターやブランディング、壁画、SNSグラフィック用の実践的なヒントです。

ストリートアートパレットが効果的な理由

ストリートアートのパレットは、情報の速読性を重視して設計されています。ハイコントラスト（暗いベース＋明るいアクセント）がタイポグラフィやアイコン、図形を際立たせ、ポスターやサムネイル、屋外風レイアウトに最適です。

また、それらは現実の素材（アスファルトの黒、コンクリートのグレー、日焼けたパステル、鮮やかな塗料のアクセント）を模倣しているため、リアルさも感じられます。この「ロー」と「グラフィカル」のミックスが作品にエディトリアルで都会的な雰囲気を与えます。

多くのストリートアートカラースキームはシンプルなヒエラルキーに基づいています：一つの支配的なベース、一つの主役カラー、そして1～2つの小さな「タグ」アクセント。こうすることで、強い色がノイズになりすぎることが防げます。

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

1) 路地裏ネオン

HEX： #1B1B1E #FF2D95 #00F5D4 #FFE66D #F4F4F6

雰囲気： エレクトリック、反抗的、ハイコントラスト

おすすめ用途： コンサートポスターのデザイン

エレクトリックで反抗的な配色は、街灯の下で光る新しいタグのような印象を与えます。ほぼ黒をベースに使い、マゼンタとティールを競うように強調しましょう。黄色は日付やボタン、ステッカー風パーツのハイライトに最適です。アドバイス：背景はすっきり保ち、ネオンは一色だけ強調してノイズを避けましょう。

media.ioで生成した路地裏ネオンの画像例

Media.io

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

今すぐ無料で試す

2) スプレー缶サンセット

HEX： #2B1B3A #FF6B35 #F7D154 #EF476F #F2F3F4

雰囲気： 暖かい、エネルギッシュ、親しみやすい

おすすめ用途： サマーイベントのフライヤー

暖かくポジティブなグラデーションは、レンガに差し込む夕陽のよう。見出しや主役にはオレンジやピンクを、紫でレイアウトをまとめます。淡いライトグレーが全体を爽やかに保ちます。アドバイス：黄色はアイコンやアクションのアクセントに。

media.ioで生成したスプレー缶サンセットの画像例

3) メトロポップ

HEX： #0B1320 #20A4F3 #F7B801 #F18701 #EAEAEA

雰囲気： パンチが効いた、モダン、都会的

おすすめ用途： ブランドのSNSカルーセル

パンチのあるモダンな配色は、交通標識や広告掲示板、通り過ぎる都会の光を思わせます。ブルーをベースにし、イエローオレンジのペアでアクセントを付けましょう。濃紺は文字や枠取りに使い、鮮やかな色が強すぎないように調整。アドバイス：シンプルなグリッドを使い、アクセントの形状を繰り返してスライドに動きを出すと効果的です。

media.ioで生成したメトロポップの画像例

4) コンクリートブルーム

HEX： #3D3D3F #CDB4DB #FFC8DD #BDE0FE #A7C957

雰囲気： 柔らかい、遊び心、アート的

おすすめ用途： ブティックパッケージラベル

柔らかく遊び心のあるパレットは、グレーのコンクリートにパステルのペーストアップを重ねたような印象。ラベンダーとブラッシュでフレンドリーなブランド感を演出し、スカイブルーで余白を生かします。グリーンは小さな植物アクセントやシールマークに最適。アドバイス：未加工用紙に印刷すると、パステルトーンがチョーキーで触感豊かに表現されます。

media.ioで生成したコンクリートブルームの画像例

5) ビニールタグ

HEX： #111827 #7C3AED #22C55E #F97316 #F9FAFB

雰囲気： 大胆、レトロ、自信に満ちた

おすすめ用途： アルバムカバーアートワーク

ビビッドなレトロ配色は、レコードスリーブに描いたマーカーインクや深夜のステッカー貼りを連想させます。バイオレットを主役に、オレンジはポイント使いやアイコニックなシンボルに。グリーンはトラックリストの区切りや小ラベルの差し色におすすめ。アドバイス：ほんのりグレイン（粒子）を加えて印刷感を出すとよりリアルです。

media.ioで生成したビニールタグの画像例

6) ナイトウォールランブル

HEX： #0A0A0B #E11D48 #F59E0B #10B981 #E5E7EB

雰囲気： 強烈、無骨、ドラマチック

おすすめ用途： スポーツプロモポスター

強いコントラストが深夜の壁に激しい投光機が当たった印象を与えます。ブラック主体にレッドとアンバーの組み合わせが感情的なインパクトを生みます。グリーンはスタッツやバッジ、小さなハイライトなど少量にとどめるのがコツ。アドバイス：シャドウは深く、エッジはシャープに保って無骨なエネルギーを強調しましょう。

media.ioで生成したナイトウォールランブルの画像例

7) ラステッドローラー

HEX： #2F2E2B #8C4A2F #C97C5D #E7C8A0 #4C6A5A

雰囲気： アーシー、使い込んだ、本物感

おすすめ用途： コーヒーショップのブランディング

土や錆、古紙、使い込まれたペイントローラーのような雰囲気。ダークオリーブグレーはロゴやメニューに、テラコッタ＆クレイで温かみを追加します。サンドトーンが親しみやすい背景になり、全体をまとめます。アドバイス：細身のサンセリフと合わせて手作り感と都会感アップ。

media.ioで生成したラステッドローラーの画像例

8) チョークアウトライン

HEX： #0F172A #475569 #CBD5E1 #F8FAFC #A3E635

雰囲気： クリーン、グラフィック、ストリートらしい

おすすめ用途： ダッシュボードUIモックアップ

クリーンでストリート感のあるパレットは、チョークラインやテープエッジ、スレート上のシャープな輪郭をイメージさせます。ナビゲーションやヘッダーにはネイビーを、階層や余白にはグレーを使い分け。ライムは明るいインタラクション色としてトグルやグラフ、成功時に最適。アドバイス：アクセントカラーは10％以下に抑えることでUIが引き締まります。

media.ioで生成したチョークアウトラインの画像例

9) ギャラリーカット

HEX： #121212 #FF3D00 #FFD600 #2962FF #FAFAFA

雰囲気： 大胆、キュレート、エディトリアル

おすすめ用途： 展示会ポスター

大胆でありながら洗練された組み合わせは、クリーンなギャラリーの壁にポップなカットアウトステッカーが映える印象です。近いブラックでタイピングを固定し、オレンジやブルーでメインビジュアルを構成。イエローは案内やアンダーライン、小バッジとして最適。アドバイス：広めの余白をとって鮮やかな色が整理されて見えるようにしましょう。

media.ioを使って生成したギャラリーカットの画像例

10) アスファルトミント

HEX：#1F2937 #5EEAD4 #34D399 #FDE68A #F3F4F6

雰囲気：フレッシュ、モダン、バランスの取れた

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

新鮮でモダンなミントトーンは、暗いアスファルトベースを切り裂いた新しい塗料のように感じます。見出しと構造には炭を使用し、フレンドリーな製品キューにはミントとグリーンを重ねます。やわらかなイエローは、ページをめくりすぎずにハイライトに暖かさをプラスします。ヒント: パレットが鮮明で技術的に先進的なままになるように、グラデーションを微妙に保ちます。

media.ioを使って生成したアスファルトミントの画像例

11) ポスターペースト

HEX：#2B2D42 #EF233C #F9C74F #4361EE #EDF2F4

雰囲気：グラフィック、レイヤード、エネルギッシュ

おすすめ用途：コミュニティワークショップポスター

グラフィックでレイヤードされたこれらの色は、素早く乱雑なリズムで積み重ねられた破れたポスターを思い起こさせます。深い藍色にメインタイプと境界線を処理させ、ブロックとアイコンの赤と青を交互に使用します。黄色は、時間、場所、または単一のステッカー要素などの重要な詳細に予約するのが最適です。ヒント: 1 つの形状に微妙な紙が裂けるエッジを追加して、貼り付けの雰囲気を増幅します。

media.ioを使って生成したポスター貼りの画像例

12) 屋上の雾

HEX：#2A2D34 #7F8C8D #B8C0FF #FFD6A5 #F8F7FF

雰囲気：夢のような、穏やかな、雰囲気のある

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

夢のようで穏やかで、屋上や塗装されたスカイラインに漂う早朝の霧のような感じがします。柔らかいバイオレットを優しいフォーカルカラーに、ピーチを使用して暖かさと人間らしいタッチを実現します。チャコールとグレーは控えめにしながら、コピーを読みやすくします。ヒント: 柔らかいグラデーションとたっぷりの空白を組み合わせると、風通しの良い編集感が得られます。

media.ioを使って生成した屋上ヘイズの画像例

13) ステンシル柑橘類

HEX：#0B0F1A #FFB703 #FB8500 #8ECAE6 #219EBC

雰囲気：サニー、パンチ、グラフィック

おすすめ用途：tシャツ グラフィックプリント

日当たりが良くパンチがあり、鮮明なステンシルのエッジと暗い壁に鮮やかな柑橘系のペイントを思い出させます。深いインクトーンをシャツのベースとして使用し、2つのオレンジを積み重ねてインパクトを最大限に高めます。青いペアはパレットを冷却し、素晴らしい二次形状または小さなタイプを作ります。ヒント: 印刷を大胆で手頃な価格に保つために、デザインを 2 つの主要なインクに制限します。

media.ioを使って生成したステンシルcitrusの画像例

14) トンネルグロー

HEX：#0D0D12 #00D1FF #7CFF6B #FF4D6D #F1F5F9

雰囲気：ネオン, キネティック, ナイトライフ

おすすめ用途：DJナイトプロモーションストーリー

ネオンとキネティックで、蛍光塗料がトンネルの中で光を捉えているような感じです。このストリートアートのカラーパレットは、シアンとピンクがヒーローとしてトレードオフし、黒がエッジとタイプを保持するときに最も強力です。緑はアイコンやラインワークの小さな電気スパイクとしてのみ使用してください。ヒント: グローがモバイルで即座に読み取れるように、背景を暗く保ちます。

media.ioを使って生成したトンネルグローの画像例

15) 雨の地下道

HEX：#0B1D2A #274C77 #A3CEF1 #E7ECEF #8B8C89

雰囲気：ムーディー、クール、映画のような

おすすめ用途：写真エッセイの編集レイアウト

ムーディーで映画的で、濡れた舗装、霧、高架下の鉄骨を示唆しています。ヘッダーとディバイダーにネイビーとディープブルーを使用し、淡いブルーに引用符またはキャプションを付けます。柔らかいグレーホワイトは、臨床的になることなくレイアウトを読みやすく保ちます。ヒント: 白黒写真と組み合わせると、まとまりのあるドキュメンタリーな雰囲気が得られます。

media.ioを使って生成した雨降り地下道の画像例

16) インクおよびクロム

HEX：#0A0A0A #6B7280 #D1D5DB #F43F5E #3B82F6

雰囲気：洗練された、タフな、モダン

おすすめ用途：スニーカー商品広告

なめらかでタフで、光沢のあるインク、金属キャップ、反射する都市表面のような感触です。ステージとして黒とクロームグレーを使用し、ヒーローアクセントとしてホットピンクまたはブルーのいずれかを選択します。両方のアクセントを小さくすると、広告が遊び心ではなくプレミアムに感じられます。ヒント: ハードエッジのシャドウを使用して、メタリックな雰囲気を高めます。

media.ioを使って生成したインクとクロームの画像例

17) バブルレターキャンディ

HEX：#2D1B69 #FF70A6 #FFD670 #70D6FF #B8F2E6

雰囲気：遊び心あふれる、甘い、懐かしい

おすすめ用途：キッズワークショップポスター

遊び心があり甘く、バブルレター、キャンディーラッパー、明るいステッカーパックを思い出させます。紫をアンカーにして、ピンクと青を大きな形で読みやすくします。イエローは見出しのハイライトに最適ですが、ミントは大きな色間の遷移をスムーズにします。ヒント: 角を丸め、太いアウトラインを使用して、弾力のある感触に合わせます。

media.ioを使って生成した泡文字キャンディの画像例

18) 石灰岩フェード

HEX：#1C1C1E #6D6875 #B5838D #E5989B #FFE8D6

雰囲気：ミュート, ロマンチック, ヴィンテージ

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

落ち着いたロマンチックな雰囲気で、日差しで色あせた塗料とほこりっぽい石灰岩の壁のような感じがします。メニュー構造にはほぼ黒を使用し、セクションヘッダーと小さなイラストにはモーブとローズを使用します。温かみのあるクリーム色の背景が居心地の良い親しみやすさを保ちます。ヒント: チークトーンが柔らかいままになるように、少し温かい紙で印刷します。

media.ioを使って生成した石灰石フェードの画像例

19) 电気迷彩

HEX：#0F172A #16A34A #A3E635 #FACC15 #FB7185

雰囲気：スポーティ、大声、エッジの効いた

おすすめ用途：ストリートウェアドロップバナー

スポーティで大声で、ネオンペイントの飛び散りで加工し直した迷彩パターンを提案しています。ネイビーを使用してレイアウトをまとめ、2 つのグリーンにメインのグラフィック パターンを持たせます。黄色とピンクは、バッジ、価格、またはドロップ日にすぐにヒットするはずです。ヒント: 多忙な迷彩形状よりも読みやすいように、タイプは主に白またはネイビーにしてください。

media.ioを使って生成した電動迷彩の画像例

20) 週末の壁画

HEX：#111827 #FF0054 #00BBF9 #FEE440 #F8F9FA

雰囲気：明るく、明るく、クリエイティブ

おすすめ用途：クリエイターハイライトリールカバー

明るくて明るい、新鮮なローラーと大きなペイントキャップで週末のウォールセッションのように感じます。ピンクとシアンはメインタイトルの強力なデュオを作り、イエローはパンチの効いたアンダーラインまたはコーナータブとして機能します。タイプのコントラストと構造のために深い炭を保ちます。ヒント: 大きな図形と最小限のテキストに固執して、サムネイル サイズですぐに読み取れます。

media.ioを使って生成した週末壁画の画像例

ストリートアートによく合う色は？

ストリート アートのビジュアルは、強いダーク アンカー (ニア ブラック、チャコール、ディープ ネイビー) と、マゼンタ、シアン、オレンジ、エレクトリック グリーンなどの彩度の高い「ペイント」カラー 1 ~ 2 色と組み合わせるのに最適です。この組み合わせにより、レイアウトが読みやすくなりながら、音量が高く表現力豊かに感じられます。

コンクリートグレー、温かみのあるクリーム、砂、ほこりっぽいモーブなど、落ち着いたニュートラルも、本物の壁や紙を模倣しているため、素晴らしい仲間です。彼らはネオンのアクセントを落ち着かせ、ネガティブなスペースを意図的に見せるのを助けます。

まとまりのあるストリートアートの配色には、「ヒーロー」のアクセントを 1 つ選択し、一貫して繰り返します (見出し、バッジ、キーシェイプ)。余分な明るさは小さなハイライトとしてのみ使用して、デザインが乱雑ではなくパンチのあるままにします。

本物のデザインでストリートアートのカラーパレットを使う方法

階層から始めます。ベースの背景色 (多くの場合、暗い色)、メインの焦点領域にはヒーロー カラー、日付、価格、ボタンなどの小さな合図には 1 つのハイライトを選択します。このシンプルな構造は、本物のストリート作品が限られた塗装と大胆なコントラストを使用する方法と一致しています。

考え抜いてテクスチャーを追加します。微量のグレイン、ハーフトーン、紙が裂けたエッジ、またはインクの飛び散りは、平らな色を印刷された感触と触覚にすることができますが、テキストがシャープに保たれるように微妙に保ちます。

遠距離とサムネイルサイズで読みやすさをテストします。ストリートアートにインスパイアされたデザインはスキャンが速いはずなので、タイプのコントラストを確認し、1つの領域で同じように大きな色合いを多すぎることは避けてください。

AIを使ってストリートアートパレットのビジュアルを作成する

これらのストリートアートパレットを実際に見たい場合は、AIを使用してクイックポスター、バナー、またはソーシャルコンセプトを生成します。十六進の方向を一定に保ちながら、レイアウト、テクスチャ、照明を反復できます。

Media.io では、プロンプトを貼り付け、雰囲気 (ステンシル、貼り付け、ネオン グロー、グレイン) を説明し、色がバランスが取れるように感じるまで結果を絞り込みます。これは、最終的なデザイン作業にコミットする前に、キャンペーンのビジュアルをモックアップするための迅速な方法です。

プロンプトが表示されると、きれいな背景、1 つの支配的なアクセント、および必要なテクスチャ (スクリーンプリントのグレイン、ハーフトーン、破れた紙のエッジ) を指定して、出力が大胆で読みやすいままにします。

次へ： ジャスパーのカラーパレット