ディストピアのカラーパレットは緊張感の上に成り立っています:ざらついたニュートラルカラー、汚染されたパステル、工業的で管理された、やや不安を感じさせるハイアラートなアクセントカラー。
以下に20種類以上のディストピアカラーパレットのアイデア(HEXコード付き)、さらにUIやポスター、ブランディングでの実用的なノート、AIでビジュアル生成用の再利用可能なプロンプトを紹介します。
なぜディストピアパレットはここまで効果的なのか
ディストピアカラースキームが現実的に感じられるのは、コンクリート、霧、酸化した金属、ナトリウム街灯、スクリーングローなど、実際の素材や照明を模倣しているからです。そのリアリズムが、たとえコンセプトが未来的であってもデザインを地に足のついたものにします。
また、瞬時に階層を生み出します。深いチャコールや青みがかったグレーが構造を与え、アンバー、毒々しいグリーン、サイレンレッドなどの単一の警戒色が追加装飾なしで注意を引きます。
ほとんどのディストピアパレットは、もともと「ブランドセーフ」で真面目なプロダクト向きです:コントロールされ、ミニマルで、コントラストが強いのが特徴。アクセントカラーを変えるだけで、サイバーパンク、ミリタリー、シネマティックにも変化します。
20種以上のディストピアカラーパレットアイデア(HEXコード付き)
1) アッシュフォールコンクリート

HEX: #1C1F24 #3A4048 #6B727C #B6B1A6 #D9D4C9
雰囲気: ざらつき、冷たさ、ミニマル
最適な用途: ブルータリストUIダッシュボード
サイレンが鳴り止んだ後の都市のようにざらついて静か。これらのセメントグレーとチョーキーニュートラルは管理され緊張感があります。管理画面やデータの多いダッシュボード、システム画面など、明確さが重要な場所に最適です。最も明るい色は余白と組み合わせて使い、最も暗い色はナビやヘッダー用に使いましょう。アドバイス:アクセントカラーはアイコンのステートのみで使い、インターフェイスが過剰にならないように。
media.ioで生成したアッシュフォールコンクリートの画像例
Media.ioはブラウザで動画・画像・音声を作成・編集できるオンラインAIスタジオです。
2) ラスティッドネオン

HEX: #0F1114 #2B2F36 #A14E2D #D8893A #E6D2B8
雰囲気:工業的、緊急、熱を帯びた
最適な用途:テック製品広告・ヒーローバナー
工業感と緊急感、酸化スチールに消えかけたネオンサインの光が当たるような配色。ラスティとアンバーは深いグラファイト背景に映え、ヒーローバナーやフィーチャーカットアウトに最適。ペールサンド色は余白として使い、テキストの読みやすさと高級感をキープ。アドバイス:明るいアンバーは主要ボタン1つのみに使い、危険テープのように多用しないこと。
media.ioで生成したラスティッドネオンの画像例
3) バンカー カーキ

HEX: #121513 #2D332F #5B5F45 #8F8A5D #C8C3A1
雰囲気:ミリタリー、控えめ、しっかりした印象
最適な用途:アウトドアブランドのアイデンティティ・ラベル
控えめでしっかりとしたバンカーグリーンは、キャンバスや埃、使い込まれたフィールドギアのような雰囲気。アウトドア向けブランドや実用的なパッケージ、規律ある雰囲気を出したいラベルシステムに最適。ライトカーキと黒い文字を組み合わせれば読みやすさと無駄のない印象に。アドバイス:オリーブのミッドトーンはサブバッジ用に使い、階層を落ち着かせる。
media.ioで生成したバンカー カーキの画像例
4) スモッグバイオレット

HEX: #17131A #3A2E44 #6B5A7A #A69AA8 #E3DEE6
雰囲気:ムーディー、夜、内省的
最適な用途:アルバムカバー・エディトリアル誌面
ムーディーで夜の雰囲気、重いスモッグ越しの街灯のようなバイオレット。アルバムアートやロングフォームのエディトリアル、空気感が大事なポスターデザインなどに最適。柔らかなラベンダーと深いインク色の背景を組み合わせると、ゴシックではなくエレガントに仕上がる。アドバイス:背景にさりげない粒状ノイズを入れてグラデーションを映画的に。
media.ioで生成したスモッグバイオレットの画像例
5) 放射性モス

HEX: #0B0E0C #1F2A1F #3C5A3A #7CC04B #D6F2B8
雰囲気:毒々しい、生き生き、高コントラスト
最適な用途:ゲームUI・SFサムネイル
毒々しく生き生きした苔が、放棄されたトンネルでブラックライトに光っているような雰囲気。このセットはゲームUIやSFサムネイル、緑色を即座に認識させたいステータス表示に最適。ネオンモス色はハイライト用に留め、下地は濃いグリーンに任せて。アドバイス:薄いミントは小さなテキストやアイコンのライン用途限定で、色あせを防ぐ。
media.ioで生成した放射性モスの画像例
6) サーベイランススレート

HEX: #0E141B #1F2C3A #2F4A5A #8AA0AE #E8EEF2
雰囲気:臨床的、監視的、テクノロジー感
最適な用途:セキュリティSaaS UIとレポート
臨床的で監視感のある青みがかったグレーはCCTVグローやサーバールームの光を彷彿とさせます。セキュリティダッシュボード、監査レポート、エンタープライズSaaSなど、信頼と節度が重視されるシーンに適しています。淡いオフホワイトは十分なスペースと組み合わせて壁画的な圧迫感を避けて。アドバイス:中間のスレートはテーブル行用、最も暗い色はサイドバー用として、視線誘導を早く。
media.ioで生成したサーベイランススレートの画像例
7) ナイトカーフュー

HEX: #050608 #141621 #2B2E3E #5E6176 #C9CBD6
雰囲気:静寂、緊張、夜想曲
最適な用途:映画のポスター・タイトルカード
静かで緊張感のあるミッドナイトブルーが、夜間外出禁止の空っぽの街路のような雰囲気。タイトルカードや映画ポスター、黒を使わず深みが欲しいダークモードレイアウトに最適。淡いグレーと圧縮活字でシネマティックな雰囲気にシャープさをプラス。アドバイス:中間色で淡いビネットを加え、見出しに目線を誘導しましょう。
media.ioで生成したナイトカーフューの画像例
8) 壊れたサイネージ

HEX: #111315 #3E3B37 #B7A99A #E0C34E #F3EFE6
雰囲気:風化、警告、都会的
最適な用途:イベントフライヤー・グリッティポスター
風化し警戒感がにじむ、色あせた看板や割れた道路標示のようなパレット。これらの色調はフライヤーや抗議スタイルのポスター、グランジ系エディトリアルグラフィックの強いディストピア配色にぴったり。警告イエローは粗いテクスチャやハーフトーンと小面積・下線などに限定。アドバイス:ディストレストタイプにしたときは暖かみのあるオフホワイトで可読性を。
media.ioで生成した壊れたサイネージの画像例
9) コールドパイプライン

HEX: #0B0F12 #1C272E #3B4B4F #7A8C8A #D5DFDD
雰囲気:メカニカル、冷たい、実用的
最適な用途:インフォグラフィックス・技術資料
機械的で冷ややかなブルーグリーンのグレーは、配管、バルブ、曇ったスチールを思い起こさせます。冷静なコントラストが必要な技術ドキュメント、インフォグラフィック、システム図で信頼できます。淡いミスト調はシャープなラインアイコンと組み合わせ、濃い色は構造を定義します。ヒント:グラフは2つの主な色で抑え、データが雰囲気より先に伝わるようにしましょう。
media.ioで生成されたコールドパイプラインの画像例
10)ウォーストランド・サンライズ(荒地の夜明け)

HEX: #241C1A #5A3B2E #A96A4A #D0A27A #F1E6D6
雰囲気: くすんだ、希望に満ちた、映画的な
最適な用途: ブックカバーや映画的キーアートに
くすんでいるが希望に満ち、砂と煙を切り裂く朝日を感じさせます。ブックカバー、映画的キーアート、温かみがほしいが明る過ぎないランディングページにおすすめのパレット。ディープアンバーは余白たっぷりで組み合わせ、大きなグラデーションにはピーチサンドを使いましょう。ヒント:最も濃い色で硬い影を一つだけ加え、日差しを感じるリアルさをプラス。
media.ioで生成されたウォーストランド・サンライズの画像例
11)リアクター・コア(反応炉コア)

HEX: #0A0C10 #1B2330 #2E3D57 #F05A3A #F2E7D8
雰囲気: 緊迫、危険、ハイテク
最適な用途: スタートアップのブランディングやコール・トゥ・アクション部に
チャージされ危険な印象で、冷たい機械の中に熱せられた金属を感じさせます。スチールブルーと加熱オレンジのコントラストが、スタートアップブランドやCTA重視のページに適したディストピア配色を作ります。オレンジ×クリームはボタンやバッジ、背景はディープブルーでドラマ感を保ちましょう。ヒント:オレンジは本文には使わず、インタラクションやハイライト用に限定します。
media.ioで生成されたリアクター・コアの画像例
12)スタティック・フォグ(静的な霧)

HEX: #0D0E10 #2A2B2E #5B5D62 #A8ABB2 #F4F5F7
雰囲気: 冷たく、現代的、エアリー
最適な用途: ミニマル系ウェブサイトやタイポグラフィシステムに
冷たく現代的なグレーは、霧がかった画面一面を流れるノイズのよう。ミニマルなWeb、タイポグラフィシステム、色味を抑えてドラマ感が欲しいポートフォリオに最適です。ほぼ黒×ほぼ白で文字を際立たせ、中間グレーで区切りを柔らかく。ヒント:カートやカードは明るいグレーでほんのり色を付け、平坦感を防ぎましょう。
media.ioで生成されたスタティック・フォグの画像例
13)クォーリー・ダスト(採石場の埃)

HEX: #15110E #3A3028 #6D6258 #A79E93 #E7E1D7
雰囲気: 土っぽい、使い込まれた、控えめ
最適な用途: 手仕事プロダクトのパッケージやカタログに
土っぽく使い込まれたトーンは、砕石、乾いた土、風化した革を彷彿させます。明るい色は余裕あるスペースで、濃いブラウンはロゴマークに。ブランドシステムやカタログに最適。ヒント:微細な紙のグレインを加えれば、ニュートラルカラーも意図的=味わいになります。
media.ioで生成されたクォーリーダストの画像例
14)アシッド・レインコート(酸性レインコート)

HEX: #0E1012 #2C3136 #55606A #C7D24A #E7EBD0
雰囲気: ウェット、都市的、警告的ネオン
最適な用途: ストリートウェアのルックブックなどに
濡れた都会感、ネオンレインコート越しのアスファルトの反射を思わせる配色。ストリートルックブック、ドロップ告知、力強いタイポグラフィレイアウトに最適。酸っぱい黄緑とチャコールで強いコントラストを作り、淡色で余白に。ヒント:アクセントはタグラインやサイズラベル等、繰り返すマイクロディテールとして利用しましょう。
media.ioで生成されたアシッド・レインコートの画像例
15)ライオット・サイレン(暴動サイレン)

HEX: #120B0C #3A1C20 #7A2E34 #D23B3B #F2D7D7
雰囲気: 攻撃的、緊迫、ドラマチック
最適な用途: キャンペーングラフィックや太字見出しに
攻撃的かつ緊迫。暗く煙る中を切り裂くサイレンの光をイメージ。キャンペーン用バナーや目立つヘッドライン等、スクロールを止めたい場面に最適。ホットレッドは深いマルーンと組み、淡いピンクはテキストの背面パネルだけに使用。ヒント:グラデは最小で、レッドを鋭く権威的に見せましょう。
media.ioで生成されたライオットサイレンの画像例
16)ブラックアウト・ターミナル(停電ターミナル)

HEX: #000000 #0E1A14 #1F3B2C #4F8A63 #CFEBD9
雰囲気: ハッカー的、コード風、夜行性
最適な用途: 端末UIや開発者ツールに
ハッカーの冷静さと暗室で光る端末感。開発ツール、ターミナル風UI、ログイン画面のディストピア配色に最適な緑。ミントで純黒との鮮明な対比を作り、ミドグリーンはパネル用。ヒント:一番明るい緑は、アクティブカーソルやサクセス、短い数値表示だけに限定使いを。
media.ioで生成されたブラックアウト・ターミナルの画像例
17)アーバン・ディケイ・ティール(都市の錆び青緑)

HEX: #0C1011 #1E2A2C #2F4E4C #5FA39A #D9F1ED
雰囲気: 錆びた、涼やか、雰囲気的
最適な用途: 音楽ビジュアルやSNS投稿に
腐食した涼やかなティールは、酸化された金属や湿ったコンクリ感。音楽ビジュアルやSNS投稿、暗すぎない雰囲気あるムービングBGに最適。シーグラス色×チャコールでテキスト、淡いアクアでソフトなグローを追加。ヒント:ぼかしやブルーム効果で淡い光の反射感を演出。
media.ioで生成されたアーバン・ディケイ・ティール画像例
18)デサチュレイテッド・カーニバル(色あせたカーニバル)

HEX: #1A1A1E #3E3B46 #7C6A72 #B09A87 #E7DFD6
雰囲気: 不気味、ノスタルジック、色褪せた
最適な用途: エディトリアルコラージュやジンに
不気味で懐かしく、長期放置後の遊具の色褪せペイントのよう。くすんだモーヴとダスティベージュは、ジンやエディトリアルコラージュ、アートプリントに最適。ウォームベージュ×ディープチャコールで読みやすさを保ち、モーヴ系は切抜きやキャプションに。ヒント:少しズレた印刷効果で、意図的な不安感を演出。
media.ioで生成されたデサチュレイテッド・カーニバルの画像例
19)ミューテッド・ワーニングテープ(くすんだ警告テープ)

HEX: #0F0F10 #2A2A2B #666154 #C2B65A #F0EEDC
雰囲気: 注意、ほこりっぽい、実用的
最適な用途: UXアラートやシステムステータス画面に
注意を引くほこりっぽい色合いは、日差しと埃にさらされた警告テープ風。UXアラートやシステム画面、オンボーディングの注意喚起におすすめ。くすみイエロー×チャコールでアイコン、クリーム色はメッセージパネルに。ヒント:イエローは警告専用にして、階層の信頼性を保ちましょう。
media.ioで生成されたミューテッド・ワーニングテープの画像例
20)エグザイル・コースト(追放者の海岸)

HEX: #0B1416 #193038 #2F5B63 #8DA7A5 #E3ECEA
雰囲気: 風が強い、遠い、哀愁
最適な用途: 旅行エディトリアルや写真オーバーレイに
風が吹きすさび遠く、冷えた波しぶきと夜明けの無人ドックを想像させます。旅行エディトリアル、写真オーバーレイ、静かで不安感を醸すウェブセクションに。ディープティール×淡いミストで読みやすいオーバーレイを作り、ミッドブルーグレーはUIの形づくりに。ヒント:写真使用時は彩度低めで、色使いが主役になるように。
media.ioで生成されたエグザイル・コーストの画像例
21)シンダー・ブロッサム(灰と花)

HEX: #141012 #3B2A2F #6E4A55 #B07B7C #EFE1DF
雰囲気: ロマンチックな廃墟、柔らかさ、スモーキー
最適な用途: ビューティーブランドやパッケージに
ロマンチックな廃墟の儚さとスモークのような柔らかさがまざるダスティローズブラウン。ビューティブランド、フレグランスパッケージ、温かみ+エッジの効いたブティック型LPに。ブラッシュ色はディーププラムブラウンと組みロゴや見出しに、淡色はクリーンな製品スペースに。ヒント:サテン仕上げや繊細なグラデでモーヴを上質に見せると効果的。
media.ioで生成されたシンダー・ブロッサム画像例
ディストピアに合う色は?
ディストピア系パレットは控えめなニュートラル(チャコール、グラファイト、コンクリグレー、ダスティベージュ、オフホワイト)と最も相性が良いです。これらの色は素材感と機能美を与え、全体をリアルに見せます。
アクセントには、警告や状態を示す「シグナルカラー」を選びましょう(アンバー、毒々しい黄緑、ホットオレンジ、サイレンレッド、アイスシアン等)。雰囲気をピリッと保つため、使い過ぎは避けて。
くすんだパープル、ティール、ブルーグレーは理想的な「ブリッジ」カラー。雰囲気(夜、霧、監視グロー)を加えつつ、UIやエディトリアルで可読性を保てます。
実際のデザインでディストピアカラーパレットを使う方法
まずはダークベース(ほぼ黒、ネイビースレート、ディープグリーン等)を敷き、2つの中間色で面構成します。一番淡い色は文字領域やカード、余白に用い、全体が暗闇一色にならないようにしましょう。
アクセントは必ず狙いを持って。ハイライト1色は主なアクションやアラート用、2色目(任意)はホバーや選択、進捗等セカンダリ用途に。3色以上使うと、ディストピアンの抑制感よりサイバーパンク的な喧騒になりがち。
テクスチャは世界観の説得力を高めます。繊細なグレイン、紙繊維、網点の摩耗、ソフトなビネットなどで、ニュートラル多用の組み合わせも映画的・生活感を加えつつ明快さは失いません。
AIでディストピアパレットのビジュアルを作成する
ポスターやUIモック、パッケージ、SNSクリエイティブ等を合わせる場合はテキストプロンプトから画像生成し、HEXカラーやライティングキュー(霧、ネオン、強いサイドライト、CRTグロー等)で見た目を統一します。
各パレット下のプロンプトを流用し、題材(ダッシュボード → LP、フライヤー → アルバム)を変えても、カラーワードやムード表現を揃えればシリーズ感が生まれます。
Media.ioなら、ディストピア風画像もブラウザだけで簡単生成。クイック編集で配色も全アセットで一貫性を保てます。
ディストピアカラーパレット FAQ
-
ディストピアカラーパレットとは?
ディストピアカラーパレットは、くすみやざらつき、工業的な色(多くはダークニュートラル+警告色アクセント1つ)による、緊張・制御・未来感・終末感などの雰囲気を演出する配色セットです。 -
UIデザインに最適なディストピア色は?
チャコール、スレートブルー、オフホワイトはUIのための信頼できる基盤色であり、琥珀色、毒々しいグリーン、ホットオレンジのようなアクセント色を主なアクション、警告、アクティブ状態に一つだけ使用します。 -
ディストピアなカラースキームを読みやすく保つにはどうすればいいですか?
テキストパネルにはオフホワイトや淡いミストカラーを使い、本文テキストは高コントラストのニュートラル(アクセントではなく)を維持し、鮮やかな色はボタンやバッジ、アイコンなど小さなコンポーネントだけに限定しましょう。 -
サイバーパンクとディストピアのパレットの違いは何ですか?
サイバーパンクは通常ネオンや高彩度(マゼンタ/シアン)が特徴ですが、ディストピアのパレットはより控えめで、コンクリートニュートラルや霧のような中間色、警戒アクセント色が控えめに使われます。 -
ディストピアのパレットはブランディングに使えますか?
はい、特にテクノロジー、セキュリティ、アウトドア、編集、映画ブランドに適しています。コンクリート、スレート、カーキなどニュートラルを中心としたセットを選び、ブランドの「シグナル」となるアクセントカラーを一つ加えましょう。 -
ディストピアデザインにはどのアクセントカラーを選ぶべきですか?
欲しい感情に応じて「シグナル」アクセントを選びましょう:注意には琥珀色、SF的なエネルギーには毒々しいグリーン、緊急性には赤、熱い工業的な強度にはオレンジが最適です。 -
自分のパレットに合ったディストピアな視覚イメージを生成するには?
テキストから画像生成ツールを使い、マテリアルやライティング(霧、コンクリート、酸化金属、CRTグロー)とキーカラーの単語を含めて制作し、構図とコントラストを一貫させながら繰り返し作成しましょう。
次へ: デュークブルーのカラーパレット

