20 नियोब्रूटलिज़्म कलर पैलेट हेक्स कोड के साथ (कॉपी और पेस्ट के लिए तैयार)

ईमानदारी से कहें तो: नियोब्रूटलिस्ट डिज़ाइन के लिए कलर चुनना भारी पड़ सकता है।

आप जानते हैं कि आपको बोल्ड, हाई-कॉन्ट्रास्ट कलर चाहिए। पर कौन से बोल्ड कलर? कितने? कौन से एक साथ काम करते हैं, बिना किसी बिगड़े हुए किंडरगार्टन आर्ट प्रोजेक्ट जैसे दिखे?

मैंने दर्जनों नियोब्रूटलिस्ट साइटें बनाई हैं, और कलर चुनना ही वह जगह है जहाँ ज़्यादातर लोग अटक जाते हैं। तो मैं आपको 20 इस्तेमाल के लिए तैयार कलर पैलेट दे रहा हूँ — हर एक ठीक-ठीक हेक्स कोड, इस्तेमाल के दिशानिर्देश और असल दुनिया के संदर्भ के साथ।

कोई सिद्धांत नहीं। कलर व्हील पर कोई लेक्चर नहीं। बस हेक्स कोड कॉपी करें और बनाना शुरू करें।

तो चलिए शुरू करते हैं।

इन पैलेट का इस्तेमाल कैसे करें

कलर पर आने से पहले, यहाँ बताया गया है कि नियोब्रूटलिस्ट कलर सिस्टम के बारे में कैसे सोचें:

एक नियोब्रूटलिस्ट पैलेट की संरचना:

• बेस: काला या बहुत गहरा (बॉर्डर, टेक्स्ट, शैडो के लिए)
• बैकग्राउंड: सफ़ेद या बहुत हल्का (कार्ड, मुख्य बैकग्राउंड के लिए)
• प्राइमरी: आपका मुख्य एक्सेंट कलर (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

कब इस्तेमाल करें:

• फ़ाइनेंस और बैंकिंग (नियोब्रूटलिस्ट संस्करण)
• पेशेवर सेवाएँ
• B2B 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

कब इस्तेमाल करें:

• म्यूज़िक फ़ेस्टिवल
• बच्चों के ऐप और गेम
• मार्केटिंग स्टंट
• जब "हद से ज़्यादा" ही लक्ष्य हो

यह क्यों काम करता है (मुश्किल से): यह पैलेट जानबूझकर "ज़्यादा से ज़्यादा 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

कब इस्तेमाल करें:

• क्रिप्टोकरेंसी और ब्लॉकचेन
• AI और मशीन लर्निंग प्रोडक्ट
• फ़्यूचरिस्टिक 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

और चाहिए? अपने पसंदीदा पैलेट के साथ एक कमेंट छोड़ें या अपने खुद के ब्रूटल कलर मेल शेयर करें।