20 لوحة ألوان نيوبروتالية مع أكواد Hex جاهزة للنسخ

لنكن صريحين؛ اختيار الألوان لتصميم نيوبروتالي قد يبدو أمرًا مربكًا.

أنت تعرف أنك تحتاج إلى ألوان جريئة وعالية التباين. لكن أي ألوان جريئة؟ وكم عددها؟ وأيها ينسجم معًا دون أن يبدو كمشروع فني في روضة أطفال خرج عن السيطرة؟

لقد بنيت عشرات المواقع النيوبروتالية، واختيار الألوان هو المكان الذي يعلق فيه معظم الناس. لذلك أقدّم لك 20 لوحة ألوان جاهزة للاستخدام، كل واحدة مع أكواد hex دقيقة وإرشادات استخدام وسياق من العالم الواقعي.

بلا نظريات، وبلا محاضرات عن عجلة الألوان. فقط انسخ أكواد الـ hex وابدأ البناء.

لنبدأ.

كيفية استخدام هذه اللوحات

قبل أن نصل إلى الألوان، إليك كيف تفكّر في أنظمة الألوان النيوبروتالية:

بنية اللوحة النيوبروتالية:

• الأساس: أسود أو داكن جدًا (للحدود والنص والظلال)
• الخلفية: أبيض أو فاتح جدًا (للبطاقات والخلفية الرئيسية)
• الرئيسي: لون الإبراز الأساسي لديك (أزرار الحث على الإجراء، العناوين، التأكيد)
• الثانوي: إبراز مساند (عادة لون أو لونان إضافيان)
• الدرجات المميزة: لمسات لونية إضافية (اختيارية، استخدمها باعتدال)

المبادئ الأساسية:

1. التباين العالي إلزامي - الأسود والأبيض يجب أن يرسيا لوحتك
2. التشبّع قبل النعومة - بلا ألوان باستيل، وبلا درجات باهتة (باستثناء الخلفيات)
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-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

متى تستخدمها:

• المحافظ الإبداعية
• مشاريع الفن والرسم التوضيحي
• التجميل ومستحضرات الزينة
• علامات الجيل زد التي تريد المرح

لماذا تنجح: البنفسجي اللافندري جريء لكنه غير عدواني. اقترانه بالأصفر الليموني والوردي الأرجواني يخلق لوحة مرحة تشبه الحلوى تقريبًا، مع الحفاظ على البنية النيوبروتالية.

مثال:

نسخ// 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 للأعمال
• حين تكون الثقة مهمة لكن الملل ليس خيارًا

لماذا تنجح: الأخضر النعناعي جريء لكنه غير عدواني. الفحمي بدلًا من الأسود الخالص يخفّف القسوة قليلًا مع الحفاظ على التباين.

تجريبية ومواكبة للاتجاهات

هذه للجريئين.

16. Dopamine Overload

كل الألوان. دفعة واحدة.

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

متى تستخدمها:

• مهرجانات الموسيقى
• تطبيقات وألعاب الأطفال
• الأنشطة التسويقية اللافتة
• حين يكون "الكثير جدًا" هو الهدف

لماذا تنجح (بالكاد): تكسر هذه اللوحة قاعدة "ثلاثة ألوان كحد أقصى" عن قصد. الحدود السوداء والخلفيات البيضاء تحتوي الفوضى. استخدمها باعتدال.

نصيحة احترافية: خصّص لكل لون غرضًا محددًا:

نسخ// 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

حنين التسعينيات يلتقي بالبروتالية الحديثة.

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

متى تستخدمها:

• الألعاب الرجعية
• أساليب الفيبورويف
• العلامات الحنينية
• أي شيء قديم بشكل ساخر

لماذا تنجح: الأرجواني والسماوي والأصفر الخالص تستحضر رسوميات حواسيب التسعينيات. الخلفية الزرقاء الفاتحة تخفّف الحِدّة.

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. الكثير من الألوان الأساسية أحمر + أزرق + أصفر + أخضر + أرجواني = فوضى بصرية. التزم بلون أساسي واحد، ولون ثانوي أو لونين كحد أقصى.

3. درجات الإبراز منخفضة التباين الأصفر الفاتح (#FFFFE0) على الخلفيات البيضاء. الرمادي (#808080) على الأبيض. إذا حدّقت ولم تستطع رؤيته، فلا تستخدمه.

4. درجات البني الموحلة البني (#8B4513) قد ينجح (انظر Rust & Cream)، لكن معظم درجات البني تبدو عضوية أكثر من اللازم بالنسبة لطاقة النيوبروتالية الهندسية.

5. النيونات المتعددة وردي نيوني + أخضر نيوني + أزرق نيوني = صداع نصفي. اختر نيونًا واحدًا، وارسّخه بالأسود والأبيض.

نصائح احترافية لاستخدام هذه اللوحات

1. ابدأ أحادي اللون، وأضف الألوان باستراتيجية

ابنِ تخطيطك بالأسود والأبيض أولًا. ثم أضف اللون فقط حيث تحتاج إلى التأكيد:

• أزرار الحث على الإجراء تحصل على اللون الأساسي
• الأقسام المهمة تحصل على اللون الثانوي
• كل ما عدا ذلك يبقى محايدًا

2. استخدم قاعدة 60-30-10

حتى في النيوبروتالية، التناسب مهم:

• 60% محايد (أبيض، أسود، رمادي)
• 30% لون أساسي
• 10% ثانوي/إبراز

3. اختبر إمكانية الوصول

مرّر لوحتك عبر مدقّق تباين. نص أسود على أصفر؟ عادة ينجح. نص وردي على أبيض؟ غالبًا يفشل.

الأداة: استخدم WebAIM Contrast Checker

4. أنشئ حالات 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 */
}

تنزيل جميع اللوحات

تريد جميع اللوحات العشرين بصيغة جاهزة للاستخدام؟

إعدادات Tailwind: جميع اللوحات العشرين كإعدادات ثيم لـ Tailwind ← تنزيل JSON

متغيرات CSS: جميع اللوحات العشرين كمجموعات متغيرات CSS ← تنزيل CSS

Figma: جميع اللوحات العشرين كأنماط ألوان في Figma ← احصل على ملف Figma

أفكار ختامية

اللون أمر ذاتي، لكن اللون النيوبروتالي ليس معقدًا:

الصيغة:

1. ابدأ بالأسود والأبيض (غير قابل للتفاوض)
2. اختر لونًا أساسيًا جريئًا واحدًا (أصفر، وردي، ليموني، برتقالي، أرجواني)
3. أضف لمسة ثانوية واحدة إن لزم الأمر (اختياري)
4. استخدم باعتدال، ودع الأسود والأبيض يقومان بالعمل

تغطي اللوحات في هذا الدليل كل شيء، من الخيارات الأولية الآمنة (Electric Yellow، Brutal Monochrome) إلى الجنون التجريبي (Bubblegum Chaos، Dopamine Overload).

ابدأ بواحدة. استخدمها. عدّلها. اجعلها لك.

وتذكّر: أفضل لوحة نيوبروتالية هي التي تلتزم بها. الحلول الوسط لا تنجح في هذا الأسلوب. كن جريئًا أو انسحب.

الآن اختر ألوانك وابنِ شيئًا يستحيل تجاهله. 🎨

تستخدم Neobrutalism؟ هذه اللوحات مدمجة بالفعل في المكتبة. فقط بدّل الثيم وانتهى الأمر ← neobrutalism.com

تريد المزيد؟ اترك تعليقًا بلوحتك المفضلة أو شارك تركيبات الألوان البروتالية الخاصة بك.