ネオブルータリズムの配色パレット20選（HEXコード付き・コピペ可）
ネオブルータリズムのデザインで色選びに悩んでいませんか。そのままコピペして使える実証済みの配色パレットを20種類、正確なHEXコード付きでご紹介します。定番の黄×黒から大胆なライム×ピンクまで揃えました。
Dov Azencot
@DovAzencot正直に言いましょう。ネオブルータリズムのデザインで色を選ぶのは、途方に暮れる作業になりがちです。
大胆で高コントラストな色が必要なのは分かっています。でも、どの大胆な色を？いくつ？幼稚園の図工が失敗したように見せずに、どの色どうしが調和するのでしょうか。
私はこれまで何十ものネオブルータリズムサイトを作ってきましたが、色選びこそ多くの人が行き詰まるところです。そこで、すぐに使える配色パレットを20種類お渡しします。それぞれに正確なHEXコード、使い方の指針、実際の文脈を添えました。
理論はなし。色相環の講義もなし。HEXコードをコピーして、さっそく作り始めましょう。
さっそく見ていきましょう。
パレットの使い方
色に入る前に、ネオブルータリズムの配色システムをどう考えるかを説明します。
ネオブルータリズムのパレットの構成：
- ベース： 黒、または非常に暗い色（ボーダー、テキスト、影に）
- 背景： 白、または非常に明るい色（カードやメインの背景に）
- プライマリ： 主役となるアクセントカラー（CTA、ヘッダー、強調に）
- セカンダリ： それを支えるアクセント（通常は1〜2色）
- アクセント： さらなる色の差し色（任意、控えめに）
重要な原則：
- 高コントラストは必須 – 黒と白がパレットの軸になるべきです
- 繊細さより彩度 – パステルやくすんだトーンは使わない（背景を除く）
- アクセントカラーは絞る – 鮮やかなアクセントは最大1〜3色
- 大胆さを恐れない – 無難すぎると感じるなら、それはブルータルさが足りていません
では、パレットを見ていきましょう。
定番のネオブルータリズムパレット
これらは、この美学を定義する時代を超えた組み合わせです。
1. エレクトリックイエロー
元祖ネオブルータリズムパレット。1つだけ覚えるなら、これを覚えましょう。
--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFFこんなときに：
- テックプロダクトやSaaS
- 注目とエネルギーが必要なもの
- 初めてのネオブルータリズムプロジェクト
効果的な理由： 白地に黄色は最大限の視認性を生みます。黒のボーダーとテキストが構造を与えます。これがNeobrutalismのデフォルトパレットなのには理由があります。まず失敗しようがないのです。
使用例：
// Primary CTA button
<button className="bg-[#FFDB33] text-[#000000] border-4 border-[#000000]
shadow-[6px_6px_0_0_#000000] px-8 py-4 font-bold">
Get Started
</button>実際の事例： Gumroadはインターフェース全体でこのパレットのバリエーションを使っています。
2. ホットピンクパンチ
態度とエネルギーのあるブランドに。
--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #00F0FF
--border: #000000
--card: #FFFFFF
--accent: #FFDB33こんなときに：
- クリエイティブエージェンシー
- ファッションやストリートウェアのブランド
- 若者向けのプロダクト
- アンチ企業的なもの全般
効果的な理由： ホットピンクは注目を要求します。シアンと組み合わせるとレトロフューチャーな雰囲気が生まれます。黄色のアクセントが、圧を与えずに3つ目の次元を加えます。
カラーブロッキングの戦略：
// Three-color feature grid
<div className="grid grid-cols-3 gap-6">
<div className="bg-[#FF006E] border-4 border-[#000000] p-8">
<h3 className="text-white">Feature 1</h3>
</div>
<div className="bg-[#00F0FF] border-4 border-[#000000] p-8">
<h3 className="text-black">Feature 2</h3>
</div>
<div className="bg-[#FFDB33] border-4 border-[#000000] p-8">
<h3 className="text-black">Feature 3</h3>
</div>
</div>3. サイバーライム
デジタルなエッジと最大限の視認性。
--background: #FFFFFF
--foreground: #000000
--primary: #AAFC3D
--primary-hover: #97F819
--secondary: #FF4FD8
--border: #000000
--accent: #00F0FFこんなときに：
- ゲームやeスポーツ
- テック系スタートアップ
- 開発者向けツール
- 未来的・デジタル志向のもの
効果的な理由： ライムグリーンが「デジタル」を叫び、マゼンタピンクがコントラストをもたらします。このパレットは、ターミナル画面とレイブのポスターを掛け合わせたような雰囲気です。
例：
// Hero section with lime background
<section className="bg-[#AAFC3D] min-h-screen">
<h1 className="text-8xl font-black text-[#000000]">
LEVEL UP
</h1>
<button className="bg-[#FF4FD8] border-4 border-[#000000]
shadow-[8px_8px_0_0_#000000]">
Start Playing
</button>
</section>4. ブルータルモノクローム
虹色なしのネオブルータリズムが欲しいときに。
--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666こんなときに：
- ミニマルなネオブルータリズム（そう、存在します）
- 建築やデザインのポートフォリオ
- 色がコンテンツの邪魔になるとき
- エッジが欲しいプロフェッショナルな文脈
効果的な理由： ネオブルータリズムが色ではなく構造の話であることを証明します。太いボーダー、硬い影、大胆なタイポグラフィが、色相なしでこの美学を成立させます。
プロのヒント： ホバー状態のために、控えめなアクセントを1つ加えましょう。
--hover-accent: #FFDB33 /* Yellow appears only on interaction */鮮やかでエネルギッシュなパレット
ささやかない、声の大きいブランドのために。
5. サンセットライオット
温もりと反骨精神の出会い。
--background: #FCFFE7
--foreground: #000000
--primary: #EA435F
--primary-hover: #D00000
--secondary: #FFDA5C
--border: #000000
--accent: #CEEBFC
--card: #FFFFFFこんなときに：
- 飲食ブランド
- イベントサイトやフェス
- ライフスタイルやウェルネスのプロダクト
- 温かく親しみやすい印象が欲しいもの
効果的な理由： 赤と黄色がエネルギーと食欲を生みます（文字どおり、これらは食べ物の色です）。水色のアクセントが、ちょうどよく落ち着かせてくれます。
背景の戦略：
クリーム色の背景（#FCFFE7）は純白よりも柔らかく、赤と黄色をきつくせずに引き立てます。
6. ラベンダードリーム
ネオブルータリズムと遊び心の出会い。
--background: #F9F5F2
--foreground: #000000
--primary: #C4A1FF
--primary-hover: #9678FF
--secondary: #E7F193
--accent: #FE91E9
--border: #000000
--card: #FFFFFFこんなときに：
- クリエイティブなポートフォリオ
- アートやイラストのプロジェクト
- 美容やコスメ
- 遊び心が欲しいZ世代向けブランド
効果的な理由： ラベンダーパープルは大胆でありながら攻撃的ではありません。ライムイエローやマゼンタピンクと組み合わせると、ネオブルータリズムの構造を保ちつつ、遊び心のある、キャンディのようなパレットになります。
例：
// Testimonial card with lavender accent
<div className="bg-[#C4A1FF] border-4 border-[#000000] shadow-[6px_6px_0_0_#000000] p-8">
<p className="text-black font-bold text-lg">
"This product changed my workflow completely!"
</p>
<div className="bg-[#E7F193] border-2 border-[#000000] inline-block px-4 py-2 mt-4">
<span className="font-bold text-black">Sarah K., Designer</span>
</div>
</div>7. オレンジバースト
高いエネルギーと最大限の温もり。
--background: #FFFFFF
--foreground: #000000
--primary: #F07200
--primary-hover: #FF8011
--secondary: #EF8C27
--accent: #FF6B6B
--border: #000000
--muted: #FFE1C7こんなときに：
- スポーツやフィットネスのブランド
- 夏のキャンペーン
- エネルギーや行動を訴えるプロダクト
- CTAの多いページ
効果的な理由： オレンジはWebデザインであまり使われないため、一瞬で個性を放ちます。複数のオレンジの濃淡が、色を追加せずに奥行きを生みます。
8. フォレストフレッシュ
土の香りのネオブルータリズム、意外でしょう？
--background: #FFFFFF
--foreground: #000000
--primary: #599D77
--primary-hover: #39654C
--secondary: #A3D9B1
--accent: #FFE75A
--border: #000000
--card: #F9F5F2こんなときに：
- サステナブル・エコ系ブランド
- 健康やウェルネス
- アウトドアや自然志向のプロダクト
- 地に足のついたネオブルータリズムが欲しいとき
効果的な理由： 緑は柔らかくある必要はありません。このパレットは高コントラストの彩度の高い緑を使い、有機的でありながらブルータルな美学を保っています。
独自のポイント：
クリーム色のカード背景（#F9F5F2）が、純白では出せない温もりを加えます。
大胆で実験的なパレット
境界を押し広げたいデザイナーのために。
9. ネオンミッドナイト
最高のダークモードネオブルータリズム。
--background: #0F0F0F
--foreground: #F5F5F5
--primary: #00FF88
--secondary: #FF0066
--accent: #00D4FF
--border: #F5F5F5
--card: #1A1A1Aこんなときに：
- ゲームプラットフォーム
- 開発者向けツールやコーディングアプリ
- ナイトモード体験
- サイバーパンクな美学
効果的な理由： 暗い背景に載せたネオンカラーが、あのターミナル／ハッカー的な雰囲気を生みます。黒ではなく白のボーダーが定石を覆しつつ、コントラストを保ちます。
実装のヒント：
// Dark background with neon accents
<div className="bg-[#0F0F0F] min-h-screen p-8">
<h1 className="text-[#00FF88] text-7xl font-black
[-webkit-text-stroke:3px_#F5F5F5]">
GAME ON
</h1>
<button className="bg-[#FF0066] text-[#F5F5F5] border-4 border-[#F5F5F5]
shadow-[6px_6px_0_0_#00D4FF]">
Play Now
</button>
</div>10. バブルガムカオス
マキシマリズムとネオブルータリズムの出会い。
--background: #FFF5F8
--foreground: #000000
--primary: #FF3FE0
--secondary: #00E5FF
--accent-1: #FFE600
--accent-2: #00FF94
--border: #000000
--card: #FFFFFFこんなときに：
- 音楽やエンターテインメント
- おもちゃブランドや子ども向けプロダクト
- 短期間のマーケティングキャンペーン
- 控えめさが失敗になるとき
効果的な理由： 4つの鮮やかな色は混沌に聞こえますが、黒のボーダーと白のカードがそれを抑え込みます。これはネオブルータリズムの「多いほど良い」という哲学を論理的な極限まで突き詰めたものです。
注意： このパレットはとにかくうるさいです。ブランドが最大限のエネルギーに耐えられる場合にのみ使いましょう。
11. エレクトリックバイオレット
モダンなエッジを効かせたパープルの力。
--background: #F5F5F5
--foreground: #1A1A1A
--primary: #7B6DF5
--primary-hover: #5F4FE6
--secondary: #FED13B
--border: #3A3A3A
--card: #FFFFFF
--muted: #CFCCEAこんなときに：
- SaaSプロダクト
- フィンテックアプリ
- クリエイティブ系ソフトウェア
- モダンな生産性ツール
効果的な理由： パープルは、気取らずにプレミアムな印象を与えます。黄色のセカンダリが温もりを添えます。このパレットは、プロフェッショナルさと遊び心を絶妙にまたいでいます。
ダークモードのバリアント：
--background: #0F0F12
--foreground: #F5F5F5
--primary: #7B6DF5
--card: #1A1A1D
--border: #2E2E3212. ブラッドオレンジ
攻撃的で温かい。
--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFFこんなときに：
- スポーツチーム
- エナジードリンクや大胆な食品ブランド
- 行動を促すプロダクト
- ハロウィンや秋のキャンペーン
効果的な理由： 赤みのあるオレンジはエネルギッシュで食欲をそそります。ゴールドのアクセントがプレミアムな趣を加えます。黒のセカンダリが温もりを引き締めます。
洗練されたブルータルなパレット
ネオブルータリズムは洗練できます。その証明です。
13. ティール&コーラル
補色を正しく使いこなす。
--background: #FAFAFA
--foreground: #000000
--primary: #00BFA6
--secondary: #FF6B6B
--accent: #FFE66D
--border: #000000
--card: #FFFFFFこんなときに：
- 健康やウェルネスのアプリ
- 教育プラットフォーム
- ライフスタイルブランド
- エネルギッシュさと落ち着きのバランスが欲しいとき
効果的な理由： ティールとコーラルは補色関係にあり、自然な視覚的おもしろさを生みます。黄色のアクセントが3つ目の次元を加えます。このパレットは新鮮でモダンな印象です。
14. インディゴ&ゴールド
ラグジュアリーなブルータリズム。
--background: #F8F9FA
--foreground: #000000
--primary: #4B0082
--secondary: #FFD700
--accent: #FFFFFF
--border: #000000
--card: #FFFFFFこんなときに：
- プレミアムなプロダクト
- ハイエンドなファッション
- 限定メンバーシップ
- ネオブルータリズムに高級感を持たせたいとき
効果的な理由： 深いインディゴが品質と特別感を示します。ゴールドが高級感をもたらします。この組み合わせは、ありがちな原色とは一線を画すプレミアムなネオブルータリズムの美学を生みます。
15. ミント&チャコール
クールで冷静。
--background: #FFFFFF
--foreground: #2D3748
--primary: #48BB78
--secondary: #4A5568
--accent: #F6E05E
--border: #2D3748
--card: #F7FAFCこんなときに：
- 金融や銀行（ネオブルータリズム版）
- 専門サービス
- BtoBのSaaS
- 信頼が重要だが退屈は避けたいとき
効果的な理由： ミントグリーンは大胆でありながら攻撃的ではありません。純黒ではなくチャコールにすることで、コントラストを保ちつつ硬さをわずかに和らげます。
実験的でトレンドを先取りするパレット
これらは勇敢な人のためのものです。
16. ドーパミンオーバーロード
すべての色を、一度に。
--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #8338EC
--accent-1: #FFBE0B
--accent-2: #00F5FF
--accent-3: #3A86FF
--border: #000000
--card: #FFFFFFこんなときに：
- 音楽フェス
- 子ども向けアプリやゲーム
- マーケティングの話題づくり
- 「やりすぎ」がゴールのとき
（かろうじて）効果的な理由： このパレットは「アクセントは最大3色」のルールをあえて破ります。黒のボーダーと白の背景が混沌を抑え込みます。控えめに使いましょう。
プロのヒント： それぞれの色に具体的な役割を割り当てましょう。
// Each section gets its own accent
<section className="bg-[#FF006E]">Hero</section>
<section className="bg-[#8338EC]">Features</section>
<section className="bg-[#FFBE0B]">Pricing</section>
<section className="bg-[#00F5FF]">Testimonials</section>17. アシッドウォッシュ
90年代のノスタルジーとモダンなブルータリズムの出会い。
--background: #E0F7FF
--foreground: #000000
--primary: #FF00FF
--secondary: #00FFFF
--accent: #FFFF00
--border: #000000
--card: #FFFFFFこんなときに：
- レトロゲーム
- ヴェイパーウェイヴの美学
- ノスタルジックなブランド
- あえて時代遅れに見せたいもの
効果的な理由： 純粋なマゼンタ、シアン、イエローが90年代のコンピューターグラフィックスを思い起こさせます。水色の背景が強烈さを和らげます。
18. ラスト&クリーム
工業的なネオブルータリズム。
--background: #FFF9F0
--foreground: #2B1F1F
--primary: #C1502E
--secondary: #686463
--accent: #E8C547
--border: #2B1F1F
--card: #FFFFFFこんなときに：
- 建設や工業系
- ハンドメイドや職人ブランド
- コーヒーや食品（土の香りの雰囲気）
- ネオブルータリズムに温もりと質感が欲しいとき
効果的な理由： 錆びたオレンジとクリームが、土の香りのする有機的な雰囲気を生みます。黒ではなく濃い茶色にすることで、コントラストを保ちつつ温もりを加えます。
19. サイバーグレープ
パープルを、デジタルに。
--background: #0D0221
--foreground: #F0F0F0
--primary: #8B5CF6
--secondary: #EC4899
--accent: #10B981
--border: #F0F0F0
--card: #1A0B2Eこんなときに：
- 暗号資産やブロックチェーン
- AIや機械学習のプロダクト
- 未来的なSaaS
- ダークモード体験
効果的な理由： 深いパープルの背景に鮮やかなアクセントが、ハイテクな雰囲気を生みます。暗い背景に明るいボーダーという構成が、構造を保ちつつ従来のネオブルータリズムを反転させます。
20. サンシャイン&シャドウ
最大限のコントラスト、最小限の色数。
--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DCこんなときに：
- ブルータルなシンプルさが欲しいとき
- 読む量の多いサイト
- ブログや出版物
- 2色（と黒・白）で十分なとき
効果的な理由： オレンジが唯一の色です。黒と白が重い仕事をこなします。クリーム色のカードが控えめな温もりを加えます。このパレットは、ネオブルータリズムにおいても「少ないほど豊か」であり得ることを証明します。
パレットの実装方法
お気に入りのパレットを選んで、CSSに落とし込みましょう。
Tailwind CSS v4の場合
styles.css に追加します。
@theme {
--color-background: #FFFFFF;
--color-foreground: #000000;
--color-primary: #FFDB33;
--color-secondary: #000000;
--color-border: #000000;
--color-card: #FFFFFF;
}
:root {
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
--border: #000000;
}そしてマークアップで使います。
<button className="bg-primary text-foreground border-4 border-border">
Click Me
</button>通常のCSSの場合
CSS変数を定義します。
:root {
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
--border: #000000;
}
.btn-primary {
background-color: var(--primary);
color: var(--foreground);
border: 4px solid var(--border);
box-shadow: 6px 6px 0 0 var(--border);
}React／Styled Componentsの場合
export const theme = {
colors: {
background: '#FFFFFF',
foreground: '#000000',
primary: '#FFDB33',
border: '#000000',
},
shadows: {
brutal: '6px 6px 0 0 #000000',
},
}プロジェクトに合ったパレットの選び方
まだ迷っていますか？この決定木を使いましょう。
SaaSやテックプロダクトを作っているなら： → エレクトリックイエロー（#1）かエレクトリックバイオレット（#11）から始めましょう
クリエイターやデザイナーを狙うなら： → ラベンダードリーム（#6）かホットピンクパンチ（#2）を試しましょう
プロフェッショナルかつ大胆にしたいなら： → ミント&チャコール（#15）かティール&コーラル（#13）を使いましょう
ブランドがハイエナジーなら： → サイバーライム（#3）かオレンジバースト（#7）でいきましょう
ダークモードで作っているなら： → ネオンミッドナイト（#9）かサイバーグレープ（#19）から始めましょう
無難にいきたいなら： → ブルータルモノクローム（#4）かサンシャイン&シャドウ（#20）
人と違うことをしたいなら： → バブルガムカオス（#10）かドーパミンオーバーロード（#16）
避けるべき配色の組み合わせ
どんな大胆な色でもネオブルータリズムで機能するわけではありません。避けるべき組み合わせを紹介します。
1. パステル＋黒のボーダー 柔らかいピンク（#FFB6C1）やラベンダー（#E6E6FA）は彩度が足りません。硬い構造とぶつかり合ってしまいます。
2. 原色の使いすぎ 赤＋青＋黄＋緑＋紫＝視覚的な混沌。プライマリは1色、セカンダリは最大1〜2色に抑えましょう。
3. 低コントラストなアクセント 白地に薄い黄色（#FFFFE0）。白地にグレー（#808080）。目を細めて見えないなら、使わないでください。
4. 濁った茶色 茶色（#8B4513）は機能することもあります（ラスト&クリームを参照）が、たいていの茶色はネオブルータリズムの幾何学的なエネルギーに対して有機的すぎます。
5. 複数のネオン ネオンピンク＋ネオングリーン＋ネオンブルー＝頭痛。ネオンは1つだけ選び、黒と白で引き締めましょう。
パレットを使いこなすプロのヒント
1. モノクロから始め、色は戦略的に足す
まずは黒と白でレイアウトを組みましょう。それから、強調が必要なところにだけ色を加えます。
- CTAにはプライマリカラー
- 重要なセクションにはセカンダリ
- それ以外はニュートラルのまま
2. 60-30-10ルールを使う
ネオブルータリズムでも、比率は重要です。
- 60%はニュートラル（白、黒、グレー）
- 30%はプライマリカラー
- 10%はセカンダリ／アクセント
3. アクセシビリティを検証する
パレットをコントラストチェッカーに通しましょう。黄色地に黒テキスト？たいてい問題ありません。白地にピンクのテキスト？たいてい不合格です。
ツール： WebAIM Contrast Checkerを使いましょう
4. ホバー状態を用意する
ホバー時にはプライマリカラーの彩度を下げるか、暗くしましょう。
--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */5. ダークモードを忘れない
これらのパレットの多くにはダークモードのバリアントがあります。背景を反転させ、明るさを調整するだけです。
/* Light mode */
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
/* Dark mode */
.dark {
--background: #1A1A1A;
--foreground: #F5F5F5;
--primary: #FFDB33; /* Often stays the same */
}全パレットをダウンロード
20種類すべてを、すぐに使える形式で欲しいですか？
Tailwind Config： 20パレットすべてをTailwindのテーマ設定として → Download JSON
CSS変数： 20パレットすべてをCSS変数のセットとして → Download CSS
Figma： 20パレットすべてをFigmaのカラースタイルとして → Get Figma File
おわりに
色は主観的ですが、ネオブルータリズムの色は複雑ではありません。
公式：
- 黒と白から始める（これは譲れません）
- 大胆なプライマリカラーを1色選ぶ（黄、ピンク、ライム、オレンジ、パープル）
- 必要ならセカンダリのアクセントを1色加える（任意）
- 控えめに使い、黒と白に仕事をさせる
このガイドのパレットは、無難なスターター向け（エレクトリックイエロー、ブルータルモノクローム）から実験的な狂気（バブルガムカオス、ドーパミンオーバーロード）まで、すべてを網羅しています。
まず1つから始めましょう。使ってみましょう。調整しましょう。自分のものにしましょう。
そして忘れないでください。最高のネオブルータリズムパレットとは、あなたが腹をくくって使い切るパレットです。この美学では中途半端は通用しません。大胆にいくか、やめるかです。
さあ、色を選んで、無視できない何かを作りましょう。🎨
Neobrutalismをお使いですか？ これらのパレットはすでにライブラリに組み込まれています。テーマを切り替えるだけで完了です → neobrutalism.com
もっと知りたいですか？ お気に入りのパレットをコメントで教えてください。あなた自身のブルータルな配色の組み合わせもぜひシェアしてください。