پرش به محتوا
1.6k

1 می 2026

نئوبروتالیسمپالت‌های رنگیطراحیطراحی وبcss

20 پالت رنگی نئوبروتالیسم همراه با کدهای hex (آماده برای کپی و پیست)

در انتخاب رنگ برای طراحی نئوبروتالیستی‌تان به مشکل خورده‌اید؟ اینجا 20 پالت رنگی آزموده‌شده در میدان همراه با کدهای hex دقیق داریم که می‌توانید کپی و پیست کنید. از زرد و مشکی کلاسیک تا ترکیب‌های جسورانهٔ لایم و صورتی.

DA

Dov Azencot

@DovAzencot
هم‌رسانی در X

رک بگوییم: انتخاب رنگ برای یک طراحی نئوبروتالیستی می‌تواند طاقت‌فرسا باشد.


می‌دانید که به رنگ‌های جسور و پرکنتراست نیاز دارید. اما کدام رنگ‌های جسور؟ چند تا؟ و کدام‌ها بی‌آنکه شبیه یک کاردستی مهدکودکِ خراب‌شده شوند با هم جفت می‌شوند؟


من ده‌ها سایت نئوبروتالیستی ساخته‌ام، و جایی که بیشتر آدم‌ها گیر می‌کنند همین انتخاب رنگ است. برای همین 20 پالت رنگیِ آمادهٔ استفاده را به شما می‌سپارم — هر کدام با کدهای hex دقیق، راهنمای کاربرد و بافتی از دنیای واقعی.


نه تئوری. نه سخنرانی دربارهٔ چرخهٔ رنگ. فقط کدهای hex را کپی کنید و شروع به ساختن کنید.


بزنیم به دل کار.



چطور از این پالت‌ها استفاده کنید

پیش از رسیدن به رنگ‌ها، این‌طور باید دربارهٔ سیستم‌های رنگی نئوبروتالیستی فکر کنید:


ساختار یک پالت نئوبروتالیستی:

  • پایه: مشکی یا خیلی تیره (برای کادرها، متن، سایه‌ها)
  • پس‌زمینه: سفید یا خیلی روشن (برای کارت‌ها، پس‌زمینهٔ اصلی)
  • اصلی: رنگ لهجهٔ اصلی شما (CTAها، هدرها، تأکید)
  • ثانویه: لهجهٔ پشتیبان (معمولاً 1 تا 2 رنگ اضافه)
  • لهجه‌ها: چاشنی‌های رنگی اضافه (اختیاری، کم و دقیق)

اصول کلیدی:

  1. کنتراست بالا اجباری است - مشکی و سفید باید لنگرِ پالت شما باشند
  2. اشباع بر ظرافت - نه پاستل، نه رنگ‌های خفه (به‌جز در پس‌زمینه‌ها)
  3. رنگ‌های لهجه را محدود کنید - نهایتاً 1 تا 3 لهجهٔ پرجنب‌وجوش
  4. از جسارت نترسید - اگر خیلی امن به نظر می‌رسد، به‌اندازهٔ کافی بروتال نیست

و حالا، بیایید به سراغ پالت‌ها برویم.



پالت‌های نئوبروتالیستی کلاسیک

اینها ترکیب‌های بی‌زمانی هستند که این زیبایی‌شناسی را تعریف می‌کنند.


1. Electric Yellow

پالت اصیل نئوبروتالیستی. اگر فقط یکی را یاد می‌گیرید، همین را یاد بگیرید.

--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. Hot Pink Punch

برای برندهایی با شخصیت و انرژی.

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

چه زمانی استفاده کنید:

  • آژانس‌های خلاق
  • برندهای مد و استریت‌ور
  • محصولات هدف‌گذاری‌شده برای جوانان
  • هر چیز ضدشرکتی

چرا جواب می‌دهد: صورتی پرزرق خواستار توجه است. در جفت با فیروزه‌ای حال‌وهوایی رتروفوتوریستیک می‌سازد. لهجهٔ زرد بدون شلوغ‌کردن یک بُعد سوم اضافه می‌کند.


راهبرد بلوک‌بندی رنگ:

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

بیشترین دیده‌شدن با یک لبهٔ دیجیتال.

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

چه زمانی استفاده کنید:

  • گیمینگ و ورزش‌های الکترونیک
  • استارتاپ‌های فناوری
  • ابزارهای توسعه‌دهنده
  • هر چیز فوتوریستیک یا دیجیتال‌محور

چرا جواب می‌دهد: سبز لایم فریاد «دیجیتال» می‌زند در حالی که صورتی ماژنتا کنتراست را می‌دهد. این پالت مثل پنجرهٔ ترمینالی است که با پوستر یک ریو تلاقی کرده.


نمونه:

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

وقتی نئوبروتالیسم را بدون رنگین‌کمان می‌خواهید.

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

چه زمانی استفاده کنید:

  • نئوبروتالیسم مینیمال (بله، وجود دارد)
  • نمونه‌کارهای معماری و طراحی
  • وقتی رنگ حواس را از محتوا پرت می‌کند
  • بافت‌های حرفه‌ای که به لبه‌ای تیز نیاز دارند

چرا جواب می‌دهد: ثابت می‌کند که نئوبروتالیسم دربارهٔ رنگ نیست، بلکه دربارهٔ ساختار است. کادرهای ضخیم، سایه‌های سخت و تایپوگرافی جسور این زیبایی‌شناسی را بدون یک ته‌رنگ به دوش می‌کشند.


نکتهٔ حرفه‌ای: یک لهجهٔ ظریف برای حالت‌های hover اضافه کنید:

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


پالت‌های پرجنب‌وجوش و پرانرژی

برای برندهایی که پچ‌پچ نمی‌کنند.


5. Sunset Riot

گرما با شورش روبه‌رو می‌شود.

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

چه زمانی استفاده کنید:

  • برندهای غذا و نوشیدنی
  • سایت‌های رویداد و فستیوال
  • محصولات سبک‌زندگی و تندرستی
  • هر چیزی که باید گرم و دعوت‌کننده حس شود

چرا جواب می‌دهد: قرمز و زرد انرژی و اشتها می‌سازند (به‌معنای واقعی: اینها رنگ‌های غذایند). لهجهٔ آبی روشن دقیقاً به‌اندازهٔ لازم خنک می‌کند.


راهبرد پس‌زمینه: پس‌زمینهٔ کرمی (#FCFFE7) نرم‌تر از سفید خالص است و باعث می‌شود قرمزها و زردها بدون تندی برجسته شوند.



6. Lavender Dream

نئوبروتالیسم با خیال‌پردازی روبه‌رو می‌شود.

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

انرژی بالا، بیشترین گرما.

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

چه زمانی استفاده کنید:

  • برندهای ورزشی و تناسب‌اندام
  • کمپین‌های تابستانی
  • محصولات متمرکز بر انرژی و کنش
  • صفحاتی پر از فراخوان به کنش

چرا جواب می‌دهد: نارنجی در طراحی وب کم‌استفاده است، و همین آن را بی‌درنگ متمایز می‌کند. چند سایهٔ نارنجی بدون نیاز به رنگ‌های اضافه عمق می‌سازند.



8. Forest Fresh

نئوبروتالیسم خاکی، کی فکرش را می‌کرد؟

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

چه زمانی استفاده کنید:

  • برندهای پایدار و سازگار با محیط زیست
  • سلامت و تندرستی
  • محصولات فضای باز و متمرکز بر طبیعت
  • وقتی به نئوبروتالیسمی نیاز دارید که پایش روی زمین باشد

چرا جواب می‌دهد: سبز لازم نیست نرم باشد. این پالت از سبزهای اشباع با کنتراست بالا استفاده می‌کند، و زیبایی‌شناسی بروتال را حفظ می‌کند در حالی که ارگانیک حس می‌شود.


ویژگی خاص: پس‌زمینهٔ کرمی کارت (#F9F5F2) گرمایی می‌افزاید که سفید خالص نمی‌دهد.



پالت‌های جسور و تجربی

برای طراحانی که می‌خواهند مرزها را جابه‌جا کنند.


9. Neon Midnight

نئوبروتالیسم در حالت تیره در بهترین شکلش.

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

ماکسیمالیسم با نئوبروتالیسم روبه‌رو می‌شود.

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

چه زمانی استفاده کنید:

  • موسیقی و سرگرمی
  • برندهای اسباب‌بازی و محصولات کودکان
  • کمپین‌های بازاریابی کوتاه‌عمر
  • وقتی ظرافت یک اشتباه باشد

چرا جواب می‌دهد: چهار رنگ پرجنب‌وجوش شبیه آشوب به گوش می‌رسند، اما کادرهای مشکی و کارت‌های سفید مهارش می‌کنند. این فلسفهٔ «بیشتر یعنی بهتر»ِ نئوبروتالیسم است که تا حد منطقی‌اش کشیده شده.


توجه: این پالت پرسروصداست. فقط وقتی استفاده‌اش کنید که برندتان بیشترین انرژی را تاب بیاورد.



11. Electric Violet

قدرت بنفش با یک لبهٔ مدرن.

--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: #2E2E32


12. Blood Orange

تهاجمی و گرم.

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

چه زمانی استفاده کنید:

  • تیم‌های ورزشی
  • نوشیدنی‌های انرژی‌زا و برندهای غذایی جسور
  • محصولات کنش‌محور
  • کمپین‌های هالووین یا پاییز

چرا جواب می‌دهد: قرمز-نارنجی پرانرژی و اشتهاآور است. لهجهٔ طلایی یک لمس پریمیوم می‌افزاید. مشکی ثانویه آن گرما را به زمین لنگر می‌زند.



پالت‌های بروتالِ ظریف

نئوبروتالیسم می‌تواند پالوده باشد. اینجا گواهش.


13. Teal & Coral

رنگ‌های مکمل که درست انجام شده‌اند.

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

چه زمانی استفاده کنید:

  • اپلیکیشن‌های سلامت و تندرستی
  • پلتفرم‌های آموزشی
  • برندهای سبک‌زندگی
  • وقتی به تعادل میان پرانرژی و آرام‌بخش نیاز دارید

چرا جواب می‌دهد: سبزآبی و مرجانی مکمل‌اند و علاقهٔ بصری طبیعی می‌سازند. لهجهٔ زرد یک بُعد سوم می‌افزاید. این پالت تازه و مدرن حس می‌شود.



14. Indigo & Gold

بروتالیسم لوکس.

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

چه زمانی استفاده کنید:

  • محصولات پریمیوم
  • مد سطح‌بالا
  • عضویت‌های انحصاری
  • وقتی نئوبروتالیسم باید گران حس شود

چرا جواب می‌دهد: نیلی عمیق نشانهٔ کیفیت و انحصار است. طلا لوکسی می‌افزاید. با هم یک زیبایی‌شناسی نئوبروتالیستی پریمیوم می‌سازند که از رنگ‌های اصلی معمول متمایز است.



15. Mint & Charcoal

خنک و آرام.

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

چه زمانی استفاده کنید:

  • مالی و بانکداری (نسخهٔ نئوبروتالیستی)
  • خدمات حرفه‌ای
  • SaaSِ B2B
  • وقتی اعتماد مهم است اما خسته‌کننده گزینه نیست

چرا جواب می‌دهد: سبز نعنایی جسور است اما تهاجمی نیست. زغالی به‌جای مشکی خالص خشونت را کمی نرم می‌کند در حالی که کنتراست را حفظ می‌کند.



تجربی و پیشرو در ترندها

اینها برای شجاعان‌اند.


16. Dopamine Overload

همهٔ رنگ‌ها. همه با هم.

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

نوستالژی دههٔ 90 با بروتالیسم مدرن روبه‌رو می‌شود.

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

چه زمانی استفاده کنید:

  • گیمینگ رترو
  • زیبایی‌شناسی‌های ویپورویو
  • برندهای نوستالژیک
  • هر چیزی که با کنایه از مد افتاده

چرا جواب می‌دهد: ماژنتا، فیروزه‌ای و زرد خالص گرافیک کامپیوتری دههٔ 90 را زنده می‌کنند. پس‌زمینهٔ آبی روشن شدت را نرم می‌کند.



18. Rust & Cream

نئوبروتالیسم صنعتی.

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

چه زمانی استفاده کنید:

  • ساخت‌وساز و صنعت
  • برندهای دست‌ساز و صنایع دستی
  • قهوه و غذا (حال‌وهوای خاکی)
  • وقتی نئوبروتالیسم به گرما و بافت نیاز دارد

چرا جواب می‌دهد: نارنجی زنگاری و کرمی حسی خاکی و ارگانیک می‌سازند. قهوه‌ای تیره به‌جای مشکی گرما می‌افزاید در حالی که کنتراست را حفظ می‌کند.



19. Cyber Grape

بنفش، اما در نسخهٔ دیجیتال.

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

چه زمانی استفاده کنید:

  • ارز دیجیتال و بلاکچین
  • محصولات هوش مصنوعی و یادگیری ماشین
  • SaaSهای فوتوریستیک
  • تجربه‌های حالت تیره

چرا جواب می‌دهد: پس‌زمینهٔ بنفش عمیق با لهجه‌های پرجنب‌وجوش حسی های‌تک می‌سازد. کادرهای روشن روی پس‌زمینهٔ تیره نئوبروتالیسم سنتی را برمی‌گردانند در حالی که ساختار را حفظ می‌کنند.



20. Sunshine & Shadow

بیشترین کنتراست، کمترین رنگ.

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

چه زمانی استفاده کنید:

  • وقتی به سادگی بروتال نیاز دارید
  • سایت‌های پر از متن برای خواندن
  • وبلاگ‌ها و نشریات
  • وقتی دو رنگ (به‌علاوهٔ مشکی و سفید) کافی است

چرا جواب می‌دهد: نارنجی تنها رنگ است. مشکی و سفید کار سنگین را انجام می‌دهند. کارت‌های کرمی گرمایی ظریف می‌افزایند. این پالت ثابت می‌کند که کمتر می‌تواند بیشتر باشد — حتی در نئوبروتالیسم.



چطور این پالت‌ها را پیاده کنید

پالت مورد علاقه‌تان را انتخاب کنید و در 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 یا محصول فناوری می‌سازید: → با Electric Yellow (#1) یا Electric Violet (#11) شروع کنید


اگر خلاق‌ها یا طراحان را هدف می‌گیرید: → Lavender Dream (#6) یا Hot Pink Punch (#2) را امتحان کنید


اگر به چیزی حرفه‌ای اما جسور نیاز دارید: → از Mint & Charcoal (#15) یا Teal & Coral (#13) استفاده کنید


اگر برندتان لبریز از انرژی است: → Cyber Lime (#3) یا Orange Burst (#7) را انتخاب کنید


اگر در حالت تیره می‌سازید: → با Neon Midnight (#9) یا Cyber Grape (#19) شروع کنید


اگر می‌خواهید محتاط بازی کنید: → Brutal Monochrome (#4) یا Sunshine & Shadow (#20)


اگر می‌خواهید متفاوت باشید: → Bubblegum Chaos (#10) یا Dopamine Overload (#16)



ترکیب‌های رنگی که باید از آنها پرهیز کرد

هر رنگ جسوری در نئوبروتالیسم جواب نمی‌دهد. اینجا چند ترکیب که بهتر است رد شوند:


1. پاستل‌ها + کادرهای مشکی صورتی ملایم (#FFB6C1) و لوندری (#E6E6FA) اشباع کافی ندارند. با ساختار سخت درگیر می‌شوند.


2. رنگ‌های اصلیِ بیش‌ازحد قرمز + آبی + زرد + سبز + بنفش = آشوب بصری. به 1 رنگ اصلی و نهایتاً 1 تا 2 رنگ ثانویه بسنده کنید.


3. لهجه‌های کم‌کنتراست زرد روشن (#FFFFE0) روی پس‌زمینه‌های سفید. خاکستری (#808080) روی سفید. اگر چشم‌ها را ریز کنید و آن را نبینید، استفاده‌اش نکنید.


4. قهوه‌ای‌های گِل‌آلود قهوه‌ای (#8B4513) می‌تواند جواب بدهد (Rust & Cream را ببینید)، اما بیشتر قهوه‌ای‌ها برای انرژی هندسی نئوبروتالیسم بیش‌ازحد ارگانیک حس می‌شوند.


5. چند نئون با هم صورتی نئون + سبز نئون + آبی نئون = میگرن. یک نئون انتخاب کنید و آن را با مشکی و سفید به زمین لنگر بزنید.



نکات حرفه‌ای برای استفاده از این پالت‌ها

1. با تک‌رنگ شروع کنید، رنگ را راهبردی اضافه کنید

اول چیدمانتان را در مشکی و سفید بسازید. سپس فقط جایی که به تأکید نیاز دارید رنگ اضافه کنید:

  • CTAها رنگ اصلی را می‌گیرند
  • بخش‌های مهم رنگ ثانویه را می‌گیرند
  • باقی همه‌چیز خنثی می‌ماند

2. قانون 60-30-10 را به کار ببرید

حتی در نئوبروتالیسم، نسبت‌ها مهم‌اند:

  • 60٪ خنثی (سفید، مشکی، خاکستری‌ها)
  • 30٪ رنگ اصلی
  • 10٪ ثانویه/لهجه

3. دسترس‌پذیری را تست کنید

پالتتان را از یک بررسی‌کنندهٔ کنتراست بگذرانید. متن مشکی روی زرد؟ معمولاً قبول می‌شود. متن صورتی روی سفید؟ اغلب رد می‌شود.

ابزار: از WebAIM Contrast Checker استفاده کنید


4. حالت‌های hover بسازید

برای hover اشباع را کم کنید یا رنگ اصلی را تیره کنید:

--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: هر 20 پالت به‌صورت پیکربندی‌های تم Tailwind → دانلود JSON


متغیرهای CSS: هر 20 پالت به‌صورت مجموعه‌های متغیر CSS → دانلود CSS


Figma: هر 20 پالت به‌صورت سبک‌های رنگی Figma → دریافت فایل Figma



جمع‌بندی

رنگ ذهنی است، اما رنگ نئوبروتالیستی پیچیده نیست:


فرمول:

  1. با مشکی و سفید شروع کنید (غیرقابل‌مذاکره)
  2. یک رنگ اصلیِ جسور انتخاب کنید (زرد، صورتی، لایم، نارنجی، بنفش)
  3. در صورت نیاز یک لهجهٔ ثانویه اضافه کنید (اختیاری)
  4. کم و دقیق استفاده کنید: بگذارید مشکی و سفید کار را انجام دهند

پالت‌های این راهنما همه‌چیز را پوشش می‌دهند، از گزینه‌های شروعِ امن (Electric Yellow، Brutal Monochrome) تا جنون تجربی (Bubblegum Chaos، Dopamine Overload).


با یکی شروع کنید. استفاده‌اش کنید. تنظیمش کنید. آن را از آنِ خود کنید.


و یادتان باشد: بهترین پالت نئوبروتالیستی همان است که خودتان را به آن متعهد می‌کنید. نیمه‌کاره‌ها در این زیبایی‌شناسی جواب نمی‌دهند. یا جسور یا هیچ.


حالا رنگ‌هایتان را انتخاب کنید و چیزی بسازید که چشم‌پوشی از آن ناممکن باشد. 🎨




از Neobrutalism استفاده می‌کنید؟ این پالت‌ها از پیش در کتابخانه تعبیه شده‌اند. فقط تم را عوض کنید و تمام → neobrutalism.com

بیشتر می‌خواهید؟ یک نظر با پالت مورد علاقه‌تان بگذارید یا ترکیب‌های رنگی بروتال خودتان را به اشتراک بگذارید.

مطالب مرتبط

→ بازگشت به مطالب