20 Palet Warna Neobrutalisme dengan Kode Hex (Siap Salin & Tempel)

Sejujurnya: memilih warna untuk desain neobrutalis bisa terasa membingungkan.

Anda tahu Anda butuh warna yang berani dan berkontras tinggi. Tetapi warna berani yang mana? Berapa banyak? Dan mana yang berpadu tanpa terlihat seperti prakarya anak TK yang gagal?

Saya sudah membangun lusinan situs neobrutalis, dan di pemilihan warnalah kebanyakan orang tersendat. Jadi saya serahkan kepada Anda 20 palet warna siap pakai, masing-masing lengkap dengan kode hex persis, panduan penggunaan, dan konteks nyatanya.

Tanpa teori. Tanpa kuliah roda warna. Cukup salin kode hex-nya dan mulai membangun.

Mari kita mulai.

Cara Memakai Palet Ini

Sebelum masuk ke warnanya, berikut cara berpikir tentang sistem warna neobrutalis:

Struktur sebuah palet neobrutalis:

• Basis: hitam atau sangat gelap (untuk garis tepi, teks, bayangan)
• Latar: putih atau sangat terang (untuk kartu, latar utama)
• Primer: warna aksen utama Anda (CTA, header, penekanan)
• Sekunder: aksen pendukung (biasanya 1-2 warna tambahan)
• Aksen: percikan warna tambahan (opsional, secukupnya)

Prinsip utama:

1. Kontras tinggi itu wajib - hitam dan putih harus menjadi jangkar palet Anda
2. Saturasi di atas kehalusan - tanpa pastel, tanpa nada teredam (kecuali pada latar)
3. Batasi warna aksen - maksimal 1-3 aksen yang mencolok
4. Jangan takut berani - jika terasa terlalu aman, berarti belum cukup brutal

Sekarang, mari kita masuk ke paletnya.

Palet Neobrutalis Klasik

Inilah paduan abadi yang mendefinisikan estetikanya.

1. Electric Yellow

Palet neobrutalis yang orisinal. Jika Anda hanya menguasai satu, kuasai yang ini.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Produk tech dan SaaS
• Apa pun yang butuh perhatian dan energi
• Proyek neobrutalis pertama Anda

Kenapa berhasil: Kuning di atas putih menghasilkan visibilitas maksimal. Garis tepi dan teks hitam memberi struktur. Ada alasan kenapa ini palet bawaan Neobrutalism: nyaris mustahil dikacaukan.

Contoh penggunaan:

Salin// 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>

Contoh dunia nyata: Gumroad memakai variasi palet ini di seluruh antarmukanya.

2. Hot Pink Punch

Untuk merek dengan karakter dan energi.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #00F0FF
--border: #000000
--card: #FFFFFF
--accent: #FFDB33

Kapan memakainya:

• Agensi kreatif
• Merek fesyen dan streetwear
• Produk yang menyasar anak muda
• Apa pun yang antikorporat

Kenapa berhasil: Merah muda menyala menuntut perhatian. Dipadu dengan sian menciptakan nuansa retrofuturistik. Aksen kuning menambahkan dimensi ketiga tanpa membebani.

Strategi color blocking:

Salin// 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. Cyber Lime

Visibilitas maksimal dengan sentuhan digital.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #AAFC3D
--primary-hover: #97F819
--secondary: #FF4FD8
--border: #000000
--accent: #00F0FF

Kapan memakainya:

• Gaming dan esport
• Startup tech
• Perkakas developer
• Apa pun yang futuristik atau mengutamakan digital

Kenapa berhasil: Hijau lime berteriak "digital" sementara merah muda magenta memberi kontras. Palet ini terasa seperti jendela terminal yang disilangkan dengan poster rave.

Contoh:

Salin// 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. Brutal Monochrome

Saat Anda ingin neobrutalisme tanpa pelangi.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666

Kapan memakainya:

• Neobrutalisme minimalis (ya, itu ada)
• Portofolio arsitektur dan desain
• Saat warna akan mengganggu konten
• Konteks profesional yang butuh karakter

Kenapa berhasil: Membuktikan bahwa neobrutalisme bukan soal warna, melainkan soal struktur. Garis tepi tebal, bayangan keras, dan tipografi tebal menopang estetikanya tanpa satu pun rona.

Tips pro: Tambahkan satu aksen halus untuk keadaan hover:

Salin--hover-accent: #FFDB33  /* Yellow appears only on interaction */

Palet yang Cerah dan Energik

Untuk merek yang tidak berbisik.

5. Sunset Riot

Kehangatan bertemu pemberontakan.

Salin--background: #FCFFE7
--foreground: #000000
--primary: #EA435F
--primary-hover: #D00000
--secondary: #FFDA5C
--border: #000000
--accent: #CEEBFC
--card: #FFFFFF

Kapan memakainya:

• Merek makanan dan minuman
• Situs acara dan festival
• Produk lifestyle dan wellness
• Apa pun yang harus terasa hangat dan mengundang

Kenapa berhasil: Merah dan kuning memunculkan energi dan selera makan (secara harfiah: ini warna makanan). Aksen biru muda menyejukkan tepat secukupnya.

Strategi latar: Latar krem (#FCFFE7) lebih lembut daripada putih murni, sehingga merah dan kuning menonjol tanpa terasa kasar.

6. Lavender Dream

Neobrutalisme bertemu keceriaan.

Salin--background: #F9F5F2
--foreground: #000000
--primary: #C4A1FF
--primary-hover: #9678FF
--secondary: #E7F193
--accent: #FE91E9
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Portofolio kreatif
• Proyek seni dan ilustrasi
• Kecantikan dan kosmetik
• Merek Gen Z yang menginginkan keceriaan

Kenapa berhasil: Ungu lavender itu berani tetapi tidak agresif. Dipadu dengan kuning lime dan merah muda magenta, ia menciptakan palet yang ceria, nyaris seperti permen, yang tetap mempertahankan struktur neobrutalis.

Contoh:

Salin// 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. Orange Burst

Energi tinggi, kehangatan maksimal.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #F07200
--primary-hover: #FF8011
--secondary: #EF8C27
--accent: #FF6B6B
--border: #000000
--muted: #FFE1C7

Kapan memakainya:

• Merek olahraga dan kebugaran
• Kampanye musim panas
• Produk yang berfokus pada energi dan aksi
• Halaman yang padat call-to-action

Kenapa berhasil: Oranye kurang dimanfaatkan dalam desain web, sehingga langsung terasa khas. Beberapa gradasi oranye menciptakan kedalaman tanpa butuh warna tambahan.

8. Forest Fresh

Neobrutalisme yang membumi, siapa sangka?

Salin--background: #FFFFFF
--foreground: #000000
--primary: #599D77
--primary-hover: #39654C
--secondary: #A3D9B1
--accent: #FFE75A
--border: #000000
--card: #F9F5F2

Kapan memakainya:

• Merek berkelanjutan dan ramah lingkungan
• Kesehatan dan kebugaran
• Produk luar ruang dan yang berfokus pada alam
• Saat Anda butuh neobrutalisme yang terasa membumi

Kenapa berhasil: Hijau tidak harus lembut. Palet ini memakai hijau jenuh berkontras tinggi, mempertahankan estetika brutal sembari terasa organik.

Ciri khas: Latar kartu berwarna krem (#F9F5F2) menambahkan kehangatan yang tidak akan diberikan putih murni.

Palet yang Berani dan Eksperimental

Untuk desainer yang ingin mendorong batas.

9. Neon Midnight

Neobrutalisme mode gelap di puncaknya.

Salin--background: #0F0F0F
--foreground: #F5F5F5
--primary: #00FF88
--secondary: #FF0066
--accent: #00D4FF
--border: #F5F5F5
--card: #1A1A1A

Kapan memakainya:

• Platform gaming
• Perkakas developer dan aplikasi pemrograman
• Pengalaman mode malam
• Estetika cyberpunk

Kenapa berhasil: Warna neon di atas latar gelap menciptakan nuansa terminal/hacker itu. Garis tepi putih alih-alih hitam membalikkan keadaan sambil mempertahankan kontras.

Tips implementasi:

Salin// 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. Bubblegum Chaos

Maksimalisme bertemu neobrutalisme.

Salin--background: #FFF5F8
--foreground: #000000
--primary: #FF3FE0
--secondary: #00E5FF
--accent-1: #FFE600
--accent-2: #00FF94
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Musik dan hiburan
• Merek mainan dan produk untuk anak
• Kampanye pemasaran berumur pendek
• Saat kehalusan justru jadi kesalahan

Kenapa berhasil: Empat warna cerah terdengar seperti kekacauan, tetapi garis tepi hitam dan kartu putih menahannya. Inilah filosofi "lebih banyak lebih baik" dari neobrutalisme yang dibawa ke ekstrem logisnya.

Perhatian: Palet ini BERISIK. Pakai hanya jika merek Anda sanggup menampung energi maksimal.

11. Electric Violet

Kekuatan ungu dengan sentuhan modern.

Salin--background: #F5F5F5
--foreground: #1A1A1A
--primary: #7B6DF5
--primary-hover: #5F4FE6
--secondary: #FED13B
--border: #3A3A3A
--card: #FFFFFF
--muted: #CFCCEA

Kapan memakainya:

• Produk SaaS
• Aplikasi fintech
• Perangkat lunak kreatif
• Perkakas produktivitas modern

Kenapa berhasil: Ungu terasa premium tanpa berlagak. Kuning sekunder memberi kehangatan. Palet ini menyeimbangkan yang profesional dan yang ceria dengan sempurna.

Varian mode gelap:

Salin--background: #0F0F12
--foreground: #F5F5F5
--primary: #7B6DF5
--card: #1A1A1D
--border: #2E2E32

12. Blood Orange

Agresif dan hangat.

Salin--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Tim olahraga
• Minuman energi dan merek makanan yang berani
• Produk yang berorientasi aksi
• Kampanye Halloween atau musim gugur

Kenapa berhasil: Merah kejinggaan itu energik dan menggugah selera. Aksen emas menambahkan sentuhan premium. Hitam sekunder menjangkarkan kehangatannya.

Palet Brutal yang Berkelas

Neobrutalisme bisa halus. Inilah buktinya.

13. Teal & Coral

Warna komplementer yang dikerjakan dengan benar.

Salin--background: #FAFAFA
--foreground: #000000
--primary: #00BFA6
--secondary: #FF6B6B
--accent: #FFE66D
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Aplikasi kesehatan dan kebugaran
• Platform edukasi
• Merek lifestyle
• Saat Anda butuh keseimbangan antara yang energik dan yang menenangkan

Kenapa berhasil: Teal dan koral itu komplementer, menciptakan daya tarik visual yang alami. Aksen kuning menambahkan dimensi ketiga. Palet ini terasa segar dan modern.

14. Indigo & Gold

Brutalisme mewah.

Salin--background: #F8F9FA
--foreground: #000000
--primary: #4B0082
--secondary: #FFD700
--accent: #FFFFFF
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Produk premium
• Fesyen kelas atas
• Keanggotaan eksklusif
• Saat neobrutalisme harus terasa mahal

Kenapa berhasil: Indigo pekat memancarkan kualitas dan eksklusivitas. Emas memberi kemewahan. Bersama-sama, keduanya menciptakan estetika neobrutalis premium yang menonjol dari warna primer yang biasa.

15. Mint & Charcoal

Sejuk dan tenang.

Salin--background: #FFFFFF
--foreground: #2D3748
--primary: #48BB78
--secondary: #4A5568
--accent: #F6E05E
--border: #2D3748
--card: #F7FAFC

Kapan memakainya:

• Keuangan dan perbankan (edisi neobrutalis)
• Layanan profesional
• SaaS B2B
• Saat kepercayaan penting tetapi membosankan bukan pilihan

Kenapa berhasil: Hijau mint itu berani tetapi tidak agresif. Abu-abu arang alih-alih hitam murni sedikit melunakkan kekerasannya sambil mempertahankan kontras.

Eksperimental dan Mengikuti Tren

Yang ini untuk yang pemberani.

16. Dopamine Overload

Semua warna. Sekaligus.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #8338EC
--accent-1: #FFBE0B
--accent-2: #00F5FF
--accent-3: #3A86FF
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Festival musik
• Aplikasi dan permainan untuk anak
• Aksi mencuri perhatian dalam pemasaran
• Saat "terlalu banyak" justru tujuannya

Kenapa berhasil (nyaris tidak): Palet ini dengan sengaja melanggar aturan "maksimal 3 warna". Garis tepi hitam dan latar putih menahan kekacauannya. Pakai secukupnya.

Tips pro: Beri setiap warna tujuan yang spesifik:

Salin// 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. Acid Wash

Nostalgia tahun 90-an bertemu brutalisme modern.

Salin--background: #E0F7FF
--foreground: #000000
--primary: #FF00FF
--secondary: #00FFFF
--accent: #FFFF00
--border: #000000
--card: #FFFFFF

Kapan memakainya:

• Gaming retro
• Estetika vaporwave
• Merek nostalgia
• Apa pun yang usang secara ironis

Kenapa berhasil: Magenta, sian, dan kuning murni membangkitkan grafik komputer tahun 90-an. Latar biru muda melunakkan intensitasnya.

18. Rust & Cream

Neobrutalisme industrial.

Salin--background: #FFF9F0
--foreground: #2B1F1F
--primary: #C1502E
--secondary: #686463
--accent: #E8C547
--border: #2B1F1F
--card: #FFFFFF

Kapan memakainya:

• Konstruksi dan industri
• Merek kerajinan dan buatan tangan
• Kopi dan makanan (nuansa membumi)
• Saat neobrutalisme butuh kehangatan dan tekstur

Kenapa berhasil: Oranye karat dan krem menciptakan kesan membumi dan organik. Cokelat tua alih-alih hitam menambahkan kehangatan sambil mempertahankan kontras.

19. Cyber Grape

Ungu, tetapi dibuat digital.

Salin--background: #0D0221
--foreground: #F0F0F0
--primary: #8B5CF6
--secondary: #EC4899
--accent: #10B981
--border: #F0F0F0
--card: #1A0B2E

Kapan memakainya:

• Kripto dan blockchain
• Produk AI dan machine learning
• SaaS futuristik
• Pengalaman mode gelap

Kenapa berhasil: Latar ungu pekat dengan aksen cerah menciptakan kesan high-tech. Garis tepi terang di atas latar gelap membalikkan neobrutalisme tradisional sambil mempertahankan struktur.

20. Sunshine & Shadow

Kontras maksimal, warna minimal.

Salin--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DC

Kapan memakainya:

• Saat Anda butuh kesederhanaan yang brutal
• Situs yang padat bacaan
• Blog dan publikasi
• Saat dua warna (plus hitam dan putih) sudah cukup

Kenapa berhasil: Oranye satu-satunya warna. Hitam dan putih yang mengerjakan tugas berat. Kartu krem menambahkan kehangatan halus. Palet ini membuktikan bahwa lebih sedikit bisa berarti lebih, bahkan dalam neobrutalisme.

Cara Menerapkan Palet Ini

Pilih palet favorit Anda dan tempatkan di CSS Anda:

Untuk Tailwind CSS v4

Tambahkan ke styles.css Anda:

Salin@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;
}

Lalu pakai di markup Anda:

Salin<button className="bg-primary text-foreground border-4 border-border">
  Click Me
</button>

Untuk CSS Biasa

Definisikan variabel CSS:

Salin: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);
}

Untuk React/Styled Components

Salinexport const theme = {
  colors: {
    background: '#FFFFFF',
    foreground: '#000000',
    primary: '#FFDB33',
    border: '#000000',
  },
  shadows: {
    brutal: '6px 6px 0 0 #000000',
  },
}

Memilih Palet yang Tepat untuk Proyek Anda

Masih bingung? Pakai pohon keputusan ini:

Jika Anda membangun SaaS atau produk tech: → Mulai dengan Electric Yellow (#1) atau Electric Violet (#11)

Jika Anda menyasar kreator atau desainer: → Coba Lavender Dream (#6) atau Hot Pink Punch (#2)

Jika Anda butuh sesuatu yang profesional tetapi berani: → Pakai Mint & Charcoal (#15) atau Teal & Coral (#13)

Jika merek Anda penuh energi: → Pilih Cyber Lime (#3) atau Orange Burst (#7)

Jika Anda membangun dalam mode gelap: → Mulai dengan Neon Midnight (#9) atau Cyber Grape (#19)

Jika Anda ingin bermain aman: → Brutal Monochrome (#4) atau Sunshine & Shadow (#20)

Jika Anda ingin tampil beda: → Bubblegum Chaos (#10) atau Dopamine Overload (#16)

Paduan Warna yang Perlu Dihindari

Tidak semua warna berani berhasil dalam neobrutalisme. Berikut beberapa paduan yang sebaiknya dilewati:

1. Pastel + Garis Tepi Hitam Merah muda lembut (#FFB6C1) dan lavender (#E6E6FA) saturasinya tidak cukup. Keduanya berbenturan dengan struktur yang kaku.

2. Terlalu Banyak Warna Primer Merah + biru + kuning + hijau + ungu = kekacauan visual. Batasi pada 1 primer, maksimal 1-2 sekunder.

3. Aksen Berkontras Rendah Kuning muda (#FFFFE0) di atas latar putih. Abu-abu (#808080) di atas putih. Jika Anda memicingkan mata dan tidak melihatnya, jangan pakai.

4. Cokelat yang Keruh Cokelat (#8B4513) bisa berhasil (lihat Rust & Cream), tetapi sebagian besar cokelat terasa terlalu organik untuk energi geometris neobrutalisme.

5. Beberapa Neon Sekaligus Merah muda neon + hijau neon + biru neon = migrain. Pilih SATU neon dan jangkarkan dengan hitam dan putih.

Tips Pro untuk Memakai Palet Ini

1. Mulai Monokrom, Tambahkan Warna dengan Strategi

Bangun dahulu tata letak Anda dalam hitam dan putih. Lalu tambahkan warna hanya di tempat yang butuh penekanan:

• CTA mendapat warna primer
• Bagian penting mendapat sekunder
• Sisanya tetap netral

2. Terapkan Aturan 60-30-10

Bahkan dalam neobrutalisme, proporsi itu penting:

• 60% netral (putih, hitam, abu-abu)
• 30% warna primer
• 10% sekunder/aksen

3. Uji Aksesibilitas

Jalankan palet Anda melalui pemeriksa kontras. Teks hitam di atas kuning? Biasanya lolos. Teks merah muda di atas putih? Sering gagal.

Alat: pakai WebAIM Contrast Checker

4. Buat Keadaan Hover

Kurangi saturasi atau gelapkan warna primer Anda untuk hover:

Salin--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */

5. Jangan Lupakan Mode Gelap

Sebagian besar palet ini punya varian mode gelap. Cukup balik latarnya dan sesuaikan kecerahannya:

Salin/* Light mode */
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
 
/* Dark mode */
.dark {
  --background: #1A1A1A;
  --foreground: #F5F5F5;
  --primary: #FFDB33; /* Often stays the same */
}

Unduh Semua Palet

Ingin semua 20 palet dalam format siap pakai?

Config Tailwind: Semua 20 palet sebagai konfigurasi tema Tailwind → Unduh JSON

Variabel CSS: Semua 20 palet sebagai set variabel CSS → Unduh CSS

Figma: Semua 20 palet sebagai gaya warna Figma → Dapatkan Berkas Figma

Renungan Akhir

Warna itu subjektif, tetapi warna neobrutalis tidaklah rumit:

Formulanya:

1. Mulai dari hitam dan putih (tidak bisa ditawar)
2. Pilih SATU warna primer yang berani (kuning, merah muda, lime, oranye, ungu)
3. Tambahkan SATU aksen sekunder jika perlu (opsional)
4. Pakai secukupnya: biarkan hitam dan putih yang mengerjakan tugasnya

Palet dalam panduan ini mencakup segalanya, dari opsi pemula yang aman (Electric Yellow, Brutal Monochrome) hingga kegilaan eksperimental (Bubblegum Chaos, Dopamine Overload).

Mulai dari satu. Pakai. Sesuaikan. Jadikan milik Anda.

Dan ingat: palet neobrutalis terbaik adalah yang benar-benar Anda tekuni. Setengah-setengah tidak berhasil dalam estetika ini. Berani total atau tidak sama sekali.

Sekarang pilih warna Anda dan bangun sesuatu yang mustahil diabaikan. 🎨

Memakai Neobrutalism? Palet-palet ini sudah terintegrasi ke dalam pustakanya. Cukup ganti temanya dan selesai → neobrutalism.com

Ingin lebih banyak? Tinggalkan komentar dengan palet favorit Anda atau bagikan paduan warna brutal Anda sendiri.