דילוג לתוכן

20 פלטות צבעים לניאו-ברוטליזם עם קודי Hex (מוכנות להעתקה)

מתקשים לבחור צבעים לעיצוב הניאו-ברוטליסטי שלכם? הנה 20 פלטות צבעים בדוקות בשטח עם קודי hex מדויקים להעתקה והדבקה. מהקלאסיקה של צהוב ושחור ועד לשילובים נועזים של lime וורוד.

בואו נהיה כנים: בחירת צבעים לעיצוב ניאו-ברוטליסטי יכולה להרגיש מציפה.


אתם יודעים שאתם צריכים צבעים נועזים ובעלי ניגודיות גבוהה. אבל אילו צבעים נועזים? כמה? אילו מהם עובדים יחד בלי להיראות כמו פרויקט אמנות של גן ילדים שהשתבש?


בנינו עשרות אתרים ניאו-ברוטליסטיים, ובחירת הצבעים היא המקום שבו רוב האנשים נתקעים. אז אנחנו מגישים לכם 20 פלטות צבעים מוכנות לשימוש — כל אחת עם קודי hex מדויקים, הנחיות שימוש והקשר מהעולם האמיתי.


בלי תיאוריה. בלי הרצאות על גלגל הצבעים. פשוט העתיקו את קודי ה-hex והתחילו לבנות.


בואו נצלול פנימה.



איך להשתמש בפלטות האלה

לפני שנגיע לצבעים, הנה איך לחשוב על מערכות צבע ניאו-ברוטליסטיות:


מבנה של פלטה ניאו-ברוטליסטית:

  • בסיס: שחור או כהה מאוד (למסגרות, טקסט, צללים)
  • רקע: לבן או בהיר מאוד (לכרטיסים, רקע ראשי)
  • ראשי: צבע ההדגשה המרכזי שלכם (CTA, כותרות, הדגשה)
  • משני: הדגשה תומכת (בדרך כלל 1-2 צבעים נוספים)
  • דגשים: נגיעות צבע נוספות (אופציונלי, השתמשו במשורה)

עקרונות מרכזיים:

  1. ניגודיות גבוהה היא חובה - שחור ולבן צריכים לעגן את הפלטה שלכם
  2. רוויה על פני עדינות - בלי פסטלים, בלי גוונים עמומים (חוץ מרקעים)
  3. הגבילו את צבעי ההדגשה - 1-3 דגשים חיים לכל היותר
  4. אל תפחדו מנועזות - אם זה מרגיש בטוח מדי, זה לא מספיק ברוטלי

עכשיו, בואו נגיע לפלטות.



Classic Neobrutalist Palettes

אלה השילובים הנצחיים שמגדירים את האסתטיקה.


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

מתי להשתמש:

  • סוכנויות קריאייטיב
  • מותגי אופנה ו-streetwear
  • מוצרים ממוקדי צעירים
  • כל דבר אנטי-תאגידי

למה זה עובד: ורוד עז דורש תשומת לב. בשילוב עם ציאן הוא יוצר וייב רטרו-פוטוריסטי. הצהוב כדגש מוסיף ממד שלישי בלי להעמיס.


אסטרטגיית color blocking:

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

מתי להשתמש:

  • gaming ו-esports
  • סטארטאפים טכנולוגיים
  • כלי מפתחים
  • כל דבר פוטוריסטי או דיגיטל-first

למה זה עובד: ירוק lime צועק "דיגיטלי" בעוד הוורוד המגנטה מספק ניגודיות. הפלטה הזאת מרגישה כמו חלון טרמינל מוצלב עם פוסטר של רייב.


דוגמה:

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


Vibrant & Energetic Palettes

למותגים שלא לוחשים.


5. Sunset Riot

חמימות פוגשת מרד.

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

מתי להשתמש:

  • מותגי מזון ומשקאות
  • אתרי אירועים ופסטיבלים
  • מוצרי לייפסטייל ו-wellness
  • כל דבר שצריך להרגיש חם ומזמין

למה זה עובד: אדום וצהוב יוצרים אנרגיה ותיאבון (תרתי משמע — אלה צבעים של אוכל). הכחול הבהיר כדגש מקרר את הדברים בדיוק במידה.


אסטרטגיית רקע: רקע הקרם (#FCFFE7) רך יותר מלבן טהור, ומאפשר לאדומים ולצהובים לבלוט בלי להיות חדים.



6. Lavender Dream

ניאו-ברוטליזם פוגש שובבות.

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

מתי להשתמש:

  • תיקי עבודות קריאייטיביים
  • פרויקטים של אמנות ואיור
  • ביוטי וקוסמטיקה
  • מותגי דור ה-Z שרוצים שובבות

למה זה עובד: סגול לבנדר נועז אבל לא אגרסיבי. בשילוב עם צהוב lime וורוד מגנטה, הוא יוצר פלטה שובבה, כמעט כמו ממתקים, שעדיין שומרת על מבנה ניאו-ברוטליסטי.


דוגמה:

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

מתי להשתמש:

  • מותגי ספורט וכושר
  • קמפייני קיץ
  • מוצרים שמכוונים לאנרגיה ולפעולה
  • עמודים עתירי call-to-action

למה זה עובד: כתום מנוצל פחות מדי בעיצוב web, מה שהופך אותו לייחודי באופן מיידי. כמה גוונים של כתום יוצרים עומק בלי צורך בצבעים נוספים.



8. Forest Fresh

ניאו-ברוטליזם ארצי — מי היה מאמין?

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

מתי להשתמש:

  • מותגי קיימות ואקולוגיה
  • בריאות ו-wellness
  • מוצרים ממוקדי טבע וחוץ
  • כשצריך ניאו-ברוטליזם שמרגיש מקורקע

למה זה עובד: ירוק לא חייב להיות רך. הפלטה הזאת משתמשת בירוקים רוויים עם ניגודיות גבוהה, ושומרת על האסתטיקה הברוטלית תוך תחושה אורגנית.


מאפיין ייחודי: רקע הכרטיס בצבע קרם (#F9F5F2) מוסיף חמימות שלבן טהור לא היה מספק.



Bold Experimental Palettes

למעצבים שרוצים לפרוץ גבולות.


9. Neon Midnight

ניאו-ברוטליזם במצב כהה במיטבו.

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

מתי להשתמש:

  • פלטפורמות gaming
  • כלי מפתחים ואפליקציות קוד
  • חוויות מצב לילה
  • אסתטיקת cyberpunk

למה זה עובד: צבעי ניאון על רקעים כהים יוצרים את הווייב של טרמינל/האקר. מסגרות לבנות במקום שחורות הופכות את הקערה על פיה תוך שמירה על ניגודיות.


טיפ ליישום:

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

מתי להשתמש:

  • קבוצות ספורט
  • משקאות אנרגיה ומותגי מזון נועזים
  • מוצרים ממוקדי פעולה
  • קמפיינים של ליל כל הקדושים או סתיו

למה זה עובד: אדום-כתום אנרגטי ומעורר תיאבון. הזהב כדגש מוסיף נגיעה פרימיום. השחור המשני מקרקע את החמימות.



Sophisticated Brutal Palettes

ניאו-ברוטליזם יכול להיות מעודן. הנה ההוכחה.


13. Teal & Coral

צבעים משלימים שנעשו נכון.

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

מתי להשתמש:

  • אפליקציות בריאות ו-wellness
  • פלטפורמות חינוכיות
  • מותגי לייפסטייל
  • כשצריך איזון בין אנרגטי למרגיע

למה זה עובד: טורקיז ואלמוג הם צבעים משלימים, שיוצרים עניין ויזואלי טבעי. הצהוב כדגש מוסיף ממד שלישי. הפלטה הזאת מרגישה רעננה ומודרנית.



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
  • כשאמון חשוב אבל שיעמום הוא לא אופציה

למה זה עובד: ירוק מנטה נועז אבל לא אגרסיבי. פחם במקום שחור טהור מרכך מעט את הקשיחות תוך שמירה על ניגודיות.



Experimental & Trend-Forward

אלה למי שאמיצים.


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

מתי להשתמש:

  • gaming רטרו
  • אסתטיקת vaporwave
  • מותגים נוסטלגיים
  • כל דבר מיושן בצורה אירונית

למה זה עובד: מגנטה, ציאן וצהוב טהורים מעוררים אסוציאציה לגרפיקה של מחשבים משנות ה-90. הרקע הכחול הבהיר מרכך את העוצמה.



18. Rust & Cream

ניאו-ברוטליזם תעשייתי.

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

מתי להשתמש:

  • בנייה ותעשייה
  • מותגי handmade ואומנות
  • קפה ואוכל (וייב ארצי)
  • כשניאו-ברוטליזם צריך חמימות וטקסטורה

למה זה עובד: כתום חלוד וקרם יוצרים תחושה ארצית ואורגנית. חום כהה במקום שחור מוסיף חמימות תוך שמירה על ניגודיות.



19. Cyber Grape

סגול, אבל דיגיטלי.

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

מתי להשתמש:

  • קריפטו ו-blockchain
  • מוצרי AI ו-machine learning
  • 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;
}

ואז השתמשו בזה ב-markup שלכם:

<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-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 Config: כל 20 הפלטות כתצורות theme של Tailwind ← Download JSON


CSS Variables: כל 20 הפלטות כסטים של משתני CSS ← Download CSS


Figma: כל 20 הפלטות כסגנונות צבע של Figma ← Get Figma File



מחשבות לסיום

צבע הוא סובייקטיבי, אבל צבע ניאו-ברוטליסטי הוא לא מסובך:


הנוסחה:

  1. התחילו בשחור ולבן (לא ניתן למשא ומתן)
  2. בחרו צבע ראשי נועז אחד (צהוב, ורוד, lime, כתום, סגול)
  3. הוסיפו דגש משני אחד אם צריך (אופציונלי)
  4. השתמשו במשורה — תנו לשחור וללבן לעשות את העבודה

הפלטות במדריך הזה מכסות הכול, מאפשרויות פתיחה בטוחות (Electric Yellow, Brutal Monochrome) ועד לטירוף ניסיוני (Bubblegum Chaos, Dopamine Overload).


התחילו עם אחת. השתמשו בה. התאימו אותה. הפכו אותה לשלכם.


וזכרו: הפלטה הניאו-ברוטליסטית הטובה ביותר היא זו שאתם מתחייבים אליה. חצי מידות לא עובדות באסתטיקה הזאת. או בגדול או בכלל לא.


עכשיו בחרו את הצבעים שלכם ובנו משהו בלתי אפשרי להתעלמות. 🎨





משתמשים ב-Neobrutalism? הפלטות האלה כבר מובנות בספרייה. פשוט החליפו את ה-theme וסיימתם ← neobrutalism.com

רוצים עוד? השאירו תגובה עם הפלטה האהובה עליכם או שתפו שילובי צבעים ברוטליים משלכם.


→ חזרה לבלוג