תורת הצבע למי שלא מעצב — מפלטה גנרית לזהות ויזואלית

3.1 למה צבע הוא הדבר הראשון שמפריד גנרי ממקצועי

תנסו את הניסוי הבא: פתחו 10 אתרים של סטארטאפים ישראליים ב-10 טאבים. הסתכלו עליהם במבט חטוף של 2 שניות לכל אחד. מה תראו? כנראה — ים של כחול-לבן עם אפור. אולי עם מבצע קטן של צהוב. זו לא טעות של האתרים הספציפיים — זה דפוס של השוק כולו. וזה בדיוק מה שהופך אתר ל"נראה כמו כל שאר האתרים".

כשאנשים רואים אתר, הצבע הוא הדבר הראשון שהמוח מעבד — לפני הפונט, לפני ה-layout, לפני ה-copy. זה קורה תוך 90 מילישניות, לפני שהעין הספיקה לקרוא את הלוגו. צבע הוא ה-signature הויזואלי של המותג, ואם ה-signature הזה הוא "blue-600 ו-Tailwind gray-100" — המותג שלכם משדר "עוד SaaS אחד", גם אם המוצר מדהים.

מה AI עושה בלי פלטה מוגדרת

כשאתם מבקשים מ-AI "build me a SaaS landing page" בלי להגדיר פלטה, מה שקורה הוא: ה-AI בוחר את הערך הסטטיסטי הסביר ביותר — blue-600 כ-primary, gray-100 כרקע, gray-900 לטקסט. אלה ה-Tailwind defaults, וכולם ראו אותם במיליון אתרים אחרים. התוצאה: פלטה גנרית שמשמשת כ-tell של "AI בנה את זה".

אפילו אם תגדירו רק צבע ראשי ("use emerald green") — AI עדיין יבחר secondary, neutrals ו-accents מה-defaults שלו, והתוצאה תהיה פלטה "רבע מוגדרת" שנראית לא עקבית. חייבים להגדיר את כל 5 התפקידים מראש, ולא רק את הצבע הראשי.

למה הפרק הזה הוא ה-ROI הכי גבוה בשלב ה-foundation

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

1. צבעים גלובליים — כל decision צבעוני משפיע על כל אחד מאות האלמנטים באתר. שינוי primary = שינוי של hundreds of buttons, borders, icons, links.
2. design tokens הם compounding — פעם שמגדירים את הפלטה כ-CSS custom properties, כל אתר שתבנו אחר-כך עם AI מתחיל עם בסיס עקבי. זה חוסך שעות בכל פרויקט.
3. Dark mode "חינם" — אם הפלטה שלכם עשויה נכון, dark mode מתווסף ב-5 שורות CSS. אם לא — זה שכתוב של כל האתר.
4. Accessibility compliance — contrast ratio נכון מראש חוסך audit של שעות ותיקונים בדקה 90 של הפרויקט.

3.2 גלגל הצבעים — ב-10 דקות למתחילים מוחלטים

גלגל הצבעים (Color Wheel) הוא התרשים החזותי הבסיסי של תורת הצבע. במקום לזכור כללים מופשטים, פשוט מסתכלים על מעגל עם 12 צבעים סדורים, ומשם קל להחליט. לא חייבים לזכור אותו בעל-פה — כל הכלים שנראה (Coolors, Adobe Color, Realtime Colors) משתמשים בגלגל באופן גרפי.

המבנה של הגלגל — 3 שכבות

1. Primary colors (3): אדום, כחול, צהוב. אלה הצבעים שלא אפשר לייצר ממיקס של אחרים (במודל צבע מסורתי).
2. Secondary colors (3): כתום (אדום+צהוב), ירוק (צהוב+כחול), סגול (אדום+כחול). תוצר של שני primary.
3. Tertiary colors (6): כל השאר — red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet. תוצר של primary + secondary סמוך.

3 המימדים של כל צבע

כל צבע מתואר ב-3 ערכים שצריך להבין — הם יחזרו בכל כלי שתשתמשו בו:

זהו ה-HSL model (Hue, Saturation, Lightness), והוא הדרך האינטואיטיבית הכי טובה לחשוב על צבע. כשאתם רוצים "אותו צבע, יותר כהה" — פשוט מקטינים את ה-Lightness. כשרוצים "אותו צבע, פחות צורח" — מקטינים את ה-Saturation. נסו את זה ב-Chrome DevTools: כשבוחרים אלמנט, אפשר לגרור את סרגלי ה-HSL ולראות את ההשפעה בזמן אמת.

OKLCH — ה-model החדש שכדאי להכיר

CSS מודרני (2023+) תומך ב-oklch() — מודל חדש שמתקן בעיה ישנה של HSL: ב-HSL, צבעים שונים עם אותה Lightness לא באמת נראים באותה בהירות למוח האנושי. ב-OKLCH — כן. זה אומר ש-gradients נראים חלקים יותר, ומדרגות בפלטה נראות מרווחות שווה.

/* HSL — מדרגות לא אחידות ויזואלית */
--blue-500: hsl(220, 80%, 50%);
--green-500: hsl(120, 80%, 50%);  /* נראה בהיר יותר למרות אותו L */

/* OKLCH — מדרגות אחידות ויזואלית */
--blue-500: oklch(55% 0.2 240);
--green-500: oklch(55% 0.2 145);  /* באמת נראה באותה בהירות */

לא חובה להשתמש ב-OKLCH מהיום הראשון — HSL ו-HEX עדיין תקינים לחלוטין — אבל כדאי להכיר, במיוחד אם אתם בונים פלטה של 10 shades לכל צבע. Tailwind v4 משתמש ב-OKLCH כברירת מחדל בצבעים שלו.

3.3 חוקי הרמוניה — 4 הקומבינציות שעובדות תמיד

הרמוניה צבעונית (Color Harmony) = יחס מתמטי בין צבעים בגלגל שיוצר שילוב שהמוח תופס כ"נכון". יש כמה עשרות חוקים, אבל 4 מהם מכסים 95% מהמקרים. כל פלטה שתבנו בקורס הזה תתבסס על אחד מהם.

החוקים, עם תיאור וזמן שימוש

הדגשה חשובה: הרמוניה לא מספיקה

שימו לב — אף פלטה מקצועית לא משתמשת רק ב-2 או 3 צבעים הרמוניים גרידא. הפלטה המלאה היא הרמוניה + neutrals + semantics. ההרמוניה קובעת את ה-primary/secondary/accent, והניטרלים והסמנטיים משלימים את התמונה (נראה את זה בסעיף 3.4).

המלצה ל-beginners: התחילו ב-Analogous

אם זו הפלטה הראשונה שאתם בונים — בחרו Analogous. זה הכי סלחני (כל 3 הצבעים מאותה משפחה, קשה לעשות תקלה), זה נראה הכי "פרופשיונלי" בעין לא מאומנת, וזה הכי קל לגזור ממנו neutrals (להוריד saturation ל-5-10% = אפור עם נגיעה של הצבע הראשי). רוב האתרים הפרימיום שאתם מכירים משתמשים ב-Analogous בסוף היום.

3.4 אנטומיית פלטה מקצועית — 5 התפקידים

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

התפקידים

פירוט: למה 5 shades לניטרלים

חייבים 5 מדרגות של אפור כדי לכסות את כל ה-use cases:

• neutral-50 (כמעט לבן): רקע של האתר
• neutral-200 (אפור בהיר): גבולות, dividers, disabled buttons
• neutral-400 (אפור בינוני): placeholder text, icons secondary
• neutral-700 (אפור כהה): body text
• neutral-900 (כמעט שחור): headings

פלטה עם רק 2-3 ניטרלים תיאלץ אתכם להשתמש בשחור מוחלט (#000) לטקסט — וזה קשה מדי לעין. ניטרל-900 הוא לא שחור; הוא שחור-עם-נגיעה-של-הצבע-הראשי, וזה מה שנותן לאתר "חום" ויזואלי גם בלי להוסיף צבעים.

טריק מקצועי: neutrals צבועים

האפור שלכם לא חייב להיות אפור "טהור" (H=0°, S=0%). קחו את ה-hue של ה-primary והנמיכו את ה-saturation ל-3-8%. זה יוצר neutrals "חמים" או "קרים" שתורמים לאחדות ויזואלית של כל האתר. דוגמה:

/* Primary: כחול */
--color-primary: oklch(55% 0.18 240);

/* Neutral מסורתי — אפור "מת" */
--neutral-700-bad: oklch(35% 0 0);   /* S=0, hue לא משפיע */

/* Neutral מקצועי — אפור "קר" עם נגיעה של primary */
--neutral-700-good: oklch(35% 0.02 240);  /* אותו hue כמו primary! */

הטריק הזה לבד מעביר פלטה מ"חובבנית" ל"נראה שמעצב עבד עליה". זה משהו ש-AI לא יעשה אוטומטית — חייבים להגיד לו במפורש.

3.5 Coolors.co — יצירת פלטה ב-3 צעדים

Coolors (coolors.co) הוא הכלי הפופולרי ביותר ליצירת פלטות צבעים. חינמי לשימוש בסיסי, עם חשבון חינמי לשמירת פלטות. יש בו generator אוטומטי, נעילת צבעים, ויצוא לכל פורמט נפוץ (CSS, SCSS, Tailwind, JSON, PNG).

איך להשתמש — 3 צעדים

1. צעד 1 — פתיחת Generator: כנסו ל-coolors.co/generate. יופיעו 5 צבעים אקראיים. לחצו על מקש רווח (Space) — הצבעים מתחלפים. לחצו עוד פעם — חלופה אחרת. זה הלב של Coolors: generator שמייצר פלטות בזרם.
2. צעד 2 — נעילת הצבע הראשי: כשרואים צבע שאתם אוהבים בעמודה מסוימת (נניח העמודה השנייה), לחצו על סמל המנעול (lock icon) מעליו. מעכשיו לחיצה על רווח משנה את כל השאר חוץ ממנו. כך אתם בונים סביב primary שבחרתם.
3. צעד 3 — ייצוא הפלטה: כשיש פלטה שאתם אוהבים, לחצו על הכפתור "Export" למעלה מימין. בחרו פורמט — ה-CSS הוא האופציה הכי שימושית לקורס הזה (יוצר --color-1, --color-2 וכו'). אפשר גם PNG להצגה, JSON ל-handoff, או Tailwind config.

פיצ'רים מתקדמים ב-Coolors — שווים להכיר

• Adjust panel (לחיצה על צבע): כוונון עדין של HSL, alpha, וחיפוש צבע דומה לפי שם.
• Explore (באתר הראשי): אלפי פלטות שמשתמשים בנו ודירגו. חיפוש לפי tag ("pastel", "vintage", "neon", "minimalist") או לפי צבע. מקור השראה מצוין.
• Contrast Checker (בתוך פלטה): Coolors מראה אוטומטית את ה-contrast ratio בין כל צמד צבעים. אדום = fail, ירוק = pass.
• Image palette extractor: מעלים תמונה (לוגו, תמונת מוצר, הר ביפן — מה שרוצים), ו-Coolors שולף את הצבעים הדומיננטיים ממנה.

Workflow מומלץ ב-Coolors

1. בחרו את ה-hue של ה-primary לפי אופי המותג (ראו framework 3.14 בהמשך).
2. צרו אותו ב-Coolors (אפשר דרך Adjust panel עם HSL מדויק).
3. נעלו אותו. לחצו רווח עד שתקבלו secondary ו-accent שמתאימים.
4. שמרו את הפלטה בחשבון (חינמי). Coolors נותן URL קבוע לפלטה — תעבירו אותו ל-AI.
5. ייצאו ל-CSS ושמרו את ה-output.

3.6 Realtime Colors — לראות את הפלטה על אתר אמיתי

Realtime Colors (realtimecolors.com) — הכלי ה-missing link בין פלטה ב-Coolors לבין אתר אמיתי. מציג דף landing מדומה עם hero, features, testimonials, ו-CTA — ומאפשר לכם לשנות את 5 הצבעים של הפלטה (background, text, primary, secondary, accent) ולראות בזמן אמת איך הפלטה נראית על אלמנטים אמיתיים.

למה זה חשוב

פלטה של 5 ריבועים ב-Coolors לא אומרת כלום על איך היא תיראה בפועל. אותם 5 צבעים יכולים להיראות נפלא בתור ריבועים ואיומים כ-hero section עם טקסט. Realtime Colors סוגר את הפער: אתם מדביקים את הצבעים, ומיד רואים איך הם יושבים על לייוואוט סטנדרטי. זה כמו מדידת בגד במראה — הבד מעניין פחות ממה שהבגד נראה עליכם.

איך להשתמש — 3 צעדים

1. צעד 1 — פתיחה: כנסו ל-realtimecolors.com. תראו דף landing מדומה עם 5 פקדי צבע למעלה: Text, Background, Primary, Secondary, Accent.
2. צעד 2 — הזנת הצבעים: לחצו על כל פקד, הדביקו את ה-hex מהפלטה שלכם ב-Coolors. הדף מתעדכן מיידית — תראו את הכותרת, הכפתורים, ה-icons, וה-cards משתנים.
3. צעד 3 — Test variants: יש כפתור "Randomize" למקרה שרוצים לראות חלופות מהירות. יש toggle ל-Dark mode — לחצו ותראו איך אותה פלטה נראית במצב הכהה. שמרו את ה-URL (הוא מקודד את הפלטה) — הוא משמש כ"link לפלטה שלכם ב-preview".

מה לבדוק ב-Realtime Colors

• קריאות של body text על הרקע — אם צריך לכווץ את העיניים, הפלטה לא עבדה.
• בולטות של ה-CTA (accent) — הוא חייב "לצוץ" מתוך הדף. אם הוא מתמזג עם הרקע או עם ה-primary — צריך לבחור accent ניגודי יותר.
• Headings (H1/H2) — הם מרגישים "נשימה" או "לחוצים"? אם לחוצים, אולי הרקע כהה מדי לטקסט השחור.
• Dark mode variant — לחצו על ה-toggle ובדקו אם בסיס הפלטה עובד גם כהה. זה מנבא אם ה-dark mode שלכם יעבוד חלק בהמשך.

3.7 Contrast Ratio ו-WCAG — הכלל שחוסך שדרוגים

Contrast Ratio הוא יחס מספרי בין 1:1 (שני צבעים זהים — בלתי קריא) ל-21:1 (שחור מוחלט על לבן מוחלט — קריאות מקסימלית). המוח שלנו זקוק ליחס מסוים כדי לקרוא טקסט על רקע בלי להתעייף, ו-W3C הגדיר את ה-minimums בתקן WCAG (Web Content Accessibility Guidelines).

הרמות של WCAG

איזו רמה ליישם בפועל

המטרה הריאלית: WCAG AA על הכל, WCAG AAA על body text. AAA הוא שאפתני מדי ליישום טוטלי (גוזם לכם את כל הניואנסים של אפורים עדינים), אבל AA צריך להיות מינימום מוחלט ולא לפספס. בישראל, ל-law 10838 על נגישות אתרים יש דרישות WCAG AA, אז זה גם חוק — אבל יותר חשוב, זו פשוט הדרך שבני אדם רואים.

3 הצבעים הכי מסוכנים מבחינת contrast

• gray-400 על רקע לבן: יוצר יחס של ~3:1 — עובר רק לטקסט גדול. placeholder זה בסדר, body text — לא.
• Light blue על white: ה"mistake הקלאסי של designer" — #87CEEB על #FFFFFF נותן ~1.6:1 — בלתי קריא.
• Yellow/Orange accents על white: אם ה-accent הוא צהוב בהיר — הוא כנראה נכשל. יש לכהם אותו ל-amber-600 או dark orange.

הנוסחה (לא חייבים לזכור)

החישוב הוא:

Contrast = (L1 + 0.05) / (L2 + 0.05)

כש-L הוא ה-relative luminance של כל צבע (חישוב של ~10 שורות math). אין צורך לעשות את זה ידנית — WebAIM עושה בשבילכם (ראו סעיף 3.8).

3.8 WebAIM Contrast Checker — בדיקה ב-3 צעדים

WebAIM Contrast Checker (webaim.org/resources/contrastchecker) הוא הכלי הסטנדרטי בעולם לבדיקת contrast. חינמי, אין רישום, פועל מיד. WebAIM הוא ארגון non-profit מאוניברסיטת Utah State שעובד על accessibility כבר 25 שנה — הכלי שלהם מהימן והוא ה-reference של התעשייה.

איך להשתמש — 3 צעדים

1. צעד 1 — הזנת 2 צבעים: בדף יש 2 שדות: "Foreground Color" (טקסט) ו-"Background Color" (רקע). הדביקו hex לכל אחד (בלי # — רק 6 תווים). Alternatively, אפשר לפתוח color picker ולבחור ויזואלית.
2. צעד 2 — קריאת התוצאה: מספר גדול מופיע במרכז — ה-contrast ratio (למשל 7.25:1). מתחתיו 4 תוצאות: Normal Text AA/AAA, Large Text AA/AAA. כל אחת יכולה להיות "Pass" (ירוק) או "Fail" (אדום).
3. צעד 3 — תיקון אם fail: אם יש fail, יש 2 סרגלים למטה: "Lightness" לכל צבע. גרירה מורידה/מעלה את ה-lightness. מתעדכן בזמן אמת — תגרירו עד שיש "Pass" בכל השורות. העתיקו את ה-hex החדש ועדכנו בפלטה שלכם.

Workflow מומלץ — audit מלא של הפלטה

עם פלטה של 15 צבעים, יש ~210 צמדים אפשריים. לא חייבים לבדוק את כולם — רק את הצמדים שבפועל ישמשו באתר. רשימת הצמדים הקריטיים:

חייב לעבור את 8 האלה לפחות. אם אחד נכשל — לתקן את הצבע לפני כל דבר אחר. אין "נתקן בהמשך" על contrast.

Browser extensions שווים להכיר

• axe DevTools (Chrome/Firefox): סורק את כל הדף ומזהה בעיות contrast אוטומטית. חינמי, פועל ישירות ב-DevTools.
• WAVE (Web Accessibility Evaluation Tool): גם של WebAIM, סרוק עמוד לכל accessibility issues.
• Chrome Lighthouse: ה-audit ה-built-in של Chrome כולל בדיקת contrast. לחצו F12 → Lighthouse → Accessibility.

3.9 המלכודת הישראלית — כחול-לבן בכל דבר

אם תסתובבו באתרים של סטארטאפים ישראליים, בנקים, חברות ביטוח, וחנויות online — תזהו דפוס מהר מאוד: כחול + לבן. לפעמים עם אפור. נדיר מאוד עם משהו אחר. למה זה קורה, וחשוב יותר — איך לצאת מזה?

למה כולם מגיעים לאותו כחול-לבן

1. "כחול = אמינות" — כל קורס שיווק ראשון מלמד שכחול משדר אמינות (נכון ברמה פסיכולוגית), אז כל מותג שרוצה להיראות "רציני" בוחר כחול. בישראל זה מועצם: דגל המדינה כחול-לבן, אז זה מרגיש "לאומי".
2. Tailwind defaults — blue-600 הוא ה-primary שמוצג בכל example ב-Tailwind docs, shadcn/ui, ו-v0 templates. AI פשוט פולט את זה.
3. "לקוחות אוהבים כחול" — כשאתם מציגים ללקוח שלא בעל רקע עיצובי, כחול תמיד "בסדר". אין התנגדות. זה הופך לבחירה של הססנות עסקית.
4. פחד מ-accent חזק — רוב המעצבים הישראלים (ובעיקר של חברות B2B) מפחדים מ-accent "סוער" כמו כתום, אדום, או ורוד — "זה לא מקצועי". אז הם נשארים עם כחול בכל מקום.

למה זה הורג את המותג

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

איך לצאת — 3 אסטרטגיות

גם אם אתם חייבים להישאר עם כחול מסיבות brand, עשו אותו כחול ספציפי. לא blue-600 של Tailwind. משהו כמו:

• #0B4F6C — Navy עמוק (Deep Navy), מזכיר Stripe/IBM
• #145374 — Teal-blue, ייחודי יותר
• #01295F — Royal navy כמעט שחור, luxury
• #2563EB — לא לבחור! זה כמעט בדיוק blue-600 של Tailwind

3.10 CSS Custom Properties ו-Design Tokens — השפה המשותפת

יש לכם פלטה. יש לכם hex values. עכשיו השאלה: איך שומרים אותם כך שגם אתם, גם מעצב עתידי, גם מפתח עתידי, וגם AI — כולם יוכלו להשתמש בהם בעקביות? התשובה: CSS custom properties (המכונים גם CSS variables), ולמעלה מזה — design tokens.

מה זה CSS custom properties

משתני CSS שמוגדרים פעם אחת ב-:root, ומשתמשים בהם בכל מקום. במקום לכתוב color: #0B4F6C; ב-50 מקומות (ולעדכן ב-50 מקומות אם משנים), כותבים פעם אחת:

:root {
  --color-primary: #0B4F6C;
}

.button {
  background-color: var(--color-primary);
}

.heading {
  color: var(--color-primary);
}

רוצים לשנות את ה-primary? משנים שורה אחת — כל האתר מתעדכן. זו דרך "הפרופ" היחידה לעבוד.

מה זה design tokens

Design tokens הוא מושג רחב יותר. אלה שמות מופשטים להחלטות עיצוביות — לא רק צבעים. כוללים:

• Color tokens: primary, background, text-primary, semantic-success
• Spacing tokens: xs (8px), sm (16px), md (24px), lg (32px), xl (48px)
• Typography tokens: heading-1, body, caption
• Radius tokens: small, medium, large, full
• Shadow tokens: sm, md, lg, xl

בפרק הזה אנחנו מתמקדים בcolor tokens, אבל המושג חוזר לאורך כל הקורס. Spacing tokens יתרחשו בפרק 5, typography tokens בפרק 4, shadow tokens בפרק 2.

שמות טובים לtokens — convention

יש שני סגנונות מקובלים לשמות:

הכי נכון לערבב: ברמה נמוכה — descriptive (--blue-500: #0B4F6C), וברמה גבוהה — functional (--color-primary: var(--blue-500)). זה מבנה של 2 שכבות, שמקל על dark mode (רק ה-functional משתנה, לא ה-descriptive).

דוגמת tokens מלא (טעימה)

:root {
  /* ===== Descriptive tier ===== */
  --blue-50: #F0F7FA;
  --blue-100: #D9E8F0;
  --blue-500: #0B4F6C;
  --blue-700: #073449;
  --blue-900: #041F2C;

  --neutral-50: #FAFAF9;
  --neutral-200: #E7E5E4;
  --neutral-400: #A8A29E;
  --neutral-700: #44403C;
  --neutral-900: #1C1917;

  /* ===== Functional tier ===== */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-700);
  --color-background: var(--neutral-50);
  --color-surface: white;
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-400);
  --color-border: var(--neutral-200);
}

זה יאפשר לכם לשנות את ה-primary מ-blue ל-green ב-שורה אחת (--color-primary), בלי לגעת בכל שימוש באתר. הפלטה המלאה תופיע בסעיף 3.11.

3.11 פלטה מלאה לסטארטאפ ישראלי — דוגמה שלמה

נבנה עכשיו פלטה מלאה לדוגמה — סטארטאפ ישראלי fintech בשם "פסיפס" (שם פיקטיבי לצרכי הדוגמה). המטרה: פלטה שאיננה blue-600 של Tailwind, עם כל 5 התפקידים, design tokens מלאים, ועוברת WCAG AA בכל הצמדים הקריטיים.

ה-brief של "פסיפס"

• תחום: Fintech לעצמאים ועסקים קטנים
• אופי: אמין אבל לא משעמם; עכשווי אבל לא "טק-בובי"
• Archetype: SaaS (Stripe-esque)
• הרמוניה: Analogous (כחול + teal + ירוק) עם accent חם

הפלטה המלאה

קוד CSS מלא ומוכן להדבקה

:root {
  /* ===== Brand tier (descriptive) ===== */
  --brand-blue-50: #E6F0F4;
  --brand-blue-100: #C3DBE3;
  --brand-blue-500: #0B4F6C;
  --brand-blue-700: #073449;
  --brand-blue-900: #041F2C;

  --brand-teal-500: #2EA39B;
  --brand-orange-500: #F76E4C;
  --brand-orange-600: #E55535;

  /* ===== Neutrals (cool-tinted) ===== */
  --neutral-50: #FAFBFC;
  --neutral-100: #F4F6F8;
  --neutral-200: #E4E7EB;
  --neutral-300: #CBD2D9;
  --neutral-400: #9AA5B1;
  --neutral-500: #7B8794;
  --neutral-600: #616E7C;
  --neutral-700: #3E4C59;
  --neutral-800: #323F4B;
  --neutral-900: #1F2933;

  /* ===== Semantic ===== */
  --semantic-success: #2F855A;
  --semantic-warning: #D69E2E;
  --semantic-error: #C53030;
  --semantic-info: #2B6CB0;

  /* ===== Functional tier (this is what components use) ===== */
  --color-primary: var(--brand-blue-500);
  --color-primary-hover: var(--brand-blue-700);
  --color-primary-soft: var(--brand-blue-100);

  --color-secondary: var(--brand-teal-500);

  --color-accent: var(--brand-orange-500);
  --color-accent-hover: var(--brand-orange-600);

  --color-background: var(--neutral-50);
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;

  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-500);
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent: #FFFFFF;

  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-success: var(--semantic-success);
  --color-warning: var(--semantic-warning);
  --color-error: var(--semantic-error);
  --color-info: var(--semantic-info);
}

Contrast audit של הפלטה

תובנה חשובה: הכפתור הכתום עם טקסט לבן עובר רק ל-large text (18pt+). לכן במקום טקסט לבן בכפתור ה-accent, נשתמש ב---color-text-on-accent: var(--neutral-900) — טקסט כהה על accent כתום עובר AA. זו ההחלטה הנכונה תמיד עם accents בהירים-חמים.

3.12 Dark Mode — החלפת משתנים בלבד

הנה המתנה: אם בניתם את הפלטה עם functional tokens (סעיף 3.10), dark mode זה 15 שורות CSS. לא שכפול של כל ה-components. לא media queries בכל מקום. פשוט: ב-dark mode, ערכי ה-functional משתנים.

המבנה הבסיסי

/* Light mode — ברירת מחדל */
:root {
  --color-background: var(--neutral-50);
  --color-surface: #FFFFFF;
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-700);
  --color-border: var(--neutral-200);
}

/* Dark mode — automatic לפי העדפת OS */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--neutral-900);
    --color-surface: var(--neutral-800);
    --color-text-primary: var(--neutral-50);
    --color-text-secondary: var(--neutral-200);
    --color-border: var(--neutral-700);
  }
}

/* Dark mode — manual override (toggle) */
:root[data-theme="dark"] {
  --color-background: var(--neutral-900);
  --color-surface: var(--neutral-800);
  --color-text-primary: var(--neutral-50);
  --color-text-secondary: var(--neutral-200);
  --color-border: var(--neutral-700);
}

זהו. ה-CSS של כל ה-components לא משתנה — הם ממשיכים להשתמש ב-var(--color-background) וב-var(--color-text-primary). אבל הערכים שמאחורי אותם שמות משתנים לפי המצב.

Toggle ידני — הקוד המלא

כדי לאפשר למשתמש לבחור (במקום להסתמך רק על preferences OS):

<!-- HTML -->
<button id="theme-toggle" aria-label="Toggle dark mode">🌙</button>

<script>
const toggle = document.getElementById('theme-toggle');
const root = document.documentElement;

// Initialize from localStorage or from OS preference
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initial = saved || (prefersDark ? 'dark' : 'light');
root.setAttribute('data-theme', initial);

toggle.addEventListener('click', () => {
  const current = root.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  root.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
});
</script>

זה הכל. 15 שורות JavaScript. המשתמש לוחץ, ה-data-theme="dark" נשמר, וה-CSS משתמש ב-attribute הזה להחלפת המשתנים. ה-preference נשמר ב-localStorage לטעינה הבאה.

מה חשוב בחירת הצבעים ל-dark mode

• לא שחור מוחלט לרקע — #000 יוצר קונטרסט חריף מדי. השתמשו ב-neutral-900 (כמעט שחור, עם הצבע-מלוכלך של הברנד).
• הפוך את ה-primary רק אם צריך — בדרך כלל blue-500 של light mode עובד גם ב-dark. אם ה-primary שלכם כהה מדי (#0B4F6C), ב-dark mode יעברו ל-blue-400 או blue-300 שיותר קריא על רקע כהה.
• Semantic colors: להבהיר — error צריך להיות #EF4444 בערך ב-dark (לא #C53030 שנשאר מהlight).
• Shadows עובדים פחות טוב ב-dark — במקום box-shadow רגיל, השתמשו ב-border דק או ב-background-color עם מדרגה אחת קלה יותר.

Dark palette לדוגמת "פסיפס"

:root[data-theme="dark"] {
  --color-background: #121821;        /* לא black טהור */
  --color-surface: #1F2933;
  --color-surface-raised: #323F4B;

  --color-primary: #4FADC9;            /* blue-500 מובהר ל-dark */
  --color-primary-hover: #6DC1DA;
  --color-primary-soft: #1A3544;

  --color-accent: #FF8866;             /* כתום מובהר קצת */

  --color-text-primary: #F5F7FA;
  --color-text-secondary: #CBD2D9;
  --color-text-muted: #9AA5B1;

  --color-border: #3E4C59;

  --color-success: #68D391;
  --color-warning: #F6AD55;
  --color-error: #FC8181;
  --color-info: #63B3ED;
}

3.13 חוק 60-30-10 — חלוקת הצבעים שיוצרת איזון

חוק 60-30-10 הוא כלל זהב שמקורו בעיצוב פנים, אבל עובד מושלם באתרים: 60% dominant, 30% secondary, 10% accent. זו לא תיאוריה — זה המבנה שהעין האנושית מצפה לראות במרחב ויזואלי מאוזן.

הפירוק לאתר

דוגמה קונקרטית — Hero section של "פסיפס"

מדמיינים hero section של 1440×900 פיקסלים:

• 60% (~864×900 שטח) — רקע --color-background (neutral-50 #FAFBFC) + טקסט --color-text-primary (neutral-900). כולל את ה-padding והרווח הלבן.
• 30% (~432×900 שטח) — תמונת מוצר עם blue overlay (primary #0B4F6C). כולל את ה-navbar blue links, logo, heading dense blue.
• 10% (~144×900 שטח) — כפתור CTA אחד בצבע accent (#F76E4C) + badge "Beta" אחד ליד הלוגו בצבע accent.

התוצאה: העין מבינה מיד ש"הלחיצה" היא על הכתום — כי הוא היחיד. אם היו 5 כפתורים כתומים, אף אחד מהם לא היה בולט. החוק של 60-30-10 הוא בעצם הכלל של הגבלת ה-accent: יש רק accent אחד בכל מסך.

איך לדעת אם אתם עומדים בחוק

טיפ פרקטי: פתחו screenshot של ה-hero שלכם ב-Photoshop / Figma / Photopea. השתמשו ב-Eyedropper ודגמו 10 נקודות רנדומליות. ספרו כמה מהן Neutral vs Primary vs Accent. אם ה-distribution לא בערך 6:3:1 — יש לכם בעיית איזון. אם כל 10 הנקודות הן primary — אתם באזור ה"כחול בלי סוף" מסעיף 3.9.

חריגים ומצבים שבהם 60-30-10 לא עובד

• Dark immersive hero (Agency archetype): 80% dominant (רקע שחור), 15% primary, 5% accent.
• Colorful product (Lego, Apple at its peak): 50% dominant, 25% primary, 25% accent — יותר תפקיד לצבע.
• E-commerce luxury (Chanel): 70% dominant (שחור/לבן/crème), 25% primary (זהב/bronze), 5% accent.

3.14 צבעים שמעבירים מסר — אמינות, אנרגיה, יוקרה, טבע

יש מחקרים רבים על השפעת צבע על תפיסה. הרבה מהם גבוליים מבחינה מדעית (color psychology הוא תחום עם הרבה adaptation תרבותית ופרטנית), אבל יש כמה חוקי-אצבע שעובדים מספיק טוב לשמש נקודת התחלה. השתמשו בזה כ-framework ראשוני, לא כאמת מוחלטת.

טבלת המסרים — הצבעים העיקריים

3 חוקים לבחירה לפי מסר

1. הבחירה הראשונה היא hue, לא shade — החליטו קודם "כחול / ירוק / סגול", ואז תתחילו לחפש את ה-shade הנכון בתוך אותה משפחה.
2. ה-accent בדרך כלל מנוגד למסר של primary — אם primary הוא "אמין" (כחול), accent הוא "אנרגיה" (כתום/אדום). זה יוצר דינמיקה.
3. Context תרבותי משנה — בישראל אדום יכול להיות "רציני/מלחמתי" (דגל, צבא), בעוד שבסין הוא "מזל ושגשוג". חושבים על הקהל המטרה לפני הבחירה.

3.15 פרומפט AI — הטמפלייט שמזין פלטה בלי שהוא יחליף אותה

עכשיו שיש לכם פלטה מלאה, design tokens, ו-dark mode — צריך להזין את זה ל-AI בצורה שלא תיתן לו לסטות. זה יותר קשה ממה שזה נשמע: ברירת המחדל של Bolt/Lovable/v0 היא לבחור צבעים בעצמם. אם לא מחזיקים אותם בקו — הם יחזרו לblue-600 אחרי 3 איטרציות.

הטמפלייט — ready to copy-paste

DESIGN TOKENS — USE THESE EXACTLY. DO NOT INVENT NEW COLORS.

Define these CSS custom properties in :root and use only var(--...) references throughout the site. Never hardcode hex values in class attributes or style attributes.

Brand colors:
--color-primary: [PRIMARY_HEX]; /* [PRIMARY_DESCRIPTION, e.g. "deep navy, brand identity"] */
--color-primary-hover: [PRIMARY_HOVER_HEX];
--color-secondary: [SECONDARY_HEX]; /* [SECONDARY_DESCRIPTION] */
--color-accent: [ACCENT_HEX]; /* CTA only, used sparingly */
--color-accent-hover: [ACCENT_HOVER_HEX];

Neutrals (5 shades):
--neutral-50: [NEUTRAL_50_HEX]; /* page background */
--neutral-200: [NEUTRAL_200_HEX]; /* borders, dividers */
--neutral-400: [NEUTRAL_400_HEX]; /* muted text, placeholders */
--neutral-700: [NEUTRAL_700_HEX]; /* body text */
--neutral-900: [NEUTRAL_900_HEX]; /* headings */

Semantic colors:
--color-success: [SUCCESS_HEX];
--color-warning: [WARNING_HEX];
--color-error: [ERROR_HEX];
--color-info: [INFO_HEX];

RULES — enforce strictly:
1. The ONLY CTA color is --color-accent. There must be exactly ONE primary CTA per screen.
2. Follow the 60-30-10 rule: ~60% neutrals (background + surfaces), ~30% primary (headings, links, primary buttons), ~10% accent (single CTA, badges).
3. All text must pass WCAG AA contrast: body text 4.5:1 minimum against its background; large text 3:1.
4. Do NOT use Tailwind default blue-600, purple-600, or purple-to-blue gradients anywhere. Do NOT introduce colors that aren't in the palette above.
5. Dark mode: implement with @media (prefers-color-scheme: dark) AND a manual toggle via [data-theme="dark"]. In dark mode, invert the neutrals: background → --neutral-900, surface → --neutral-800, text → --neutral-50.
6. At the end, output a contrast audit: list each critical text-on-background pair with its ratio. Flag any that don't meet AA.

איך להשתמש — 4 צעדים

1. החליפו את כל ה-placeholders (הערכים בסוגריים מרובעים) עם ה-hex מהפלטה שלכם מסעיף 3.11.
2. הדביקו את הטמפלייט בתחילת הפרומפט, לפני שמתחילים לתאר את תוכן האתר.
3. הוסיפו תיאור שגרתי של האתר אחרי ("Build a landing page for a fintech startup for Israeli freelancers with sections: hero, features, pricing, testimonials, CTA").
4. בסוף הפרומפט, הוסיפו: "At the end, verify that all colors used are from the palette above, with no additions. Flag any violations."

דוגמת פרומפט מלא עם פלטת "פסיפס"

DESIGN TOKENS — USE THESE EXACTLY. DO NOT INVENT NEW COLORS.

Brand colors:
--color-primary: #0B4F6C;
--color-primary-hover: #073449;
--color-secondary: #2EA39B;
--color-accent: #F76E4C;
--color-accent-hover: #E55535;

Neutrals:
--neutral-50: #FAFBFC; --neutral-200: #E4E7EB; --neutral-400: #9AA5B1; --neutral-700: #3E4C59; --neutral-900: #1F2933;

Semantic: --color-success: #2F855A; --color-warning: #D69E2E; --color-error: #C53030; --color-info: #2B6CB0;

[כאן — הכללים 1-6 מלמעלה]

Now build: A landing page for "Pesipas" — a fintech SaaS for Israeli freelancers managing invoices and taxes. Archetype: Stripe-esque. Sections: Hero, 3 features (auto-invoicing, tax prep, expense tracking), 2-tier pricing, 3 testimonials, final CTA. Hebrew copy, dir="rtl", Heebo for headings and Assistant for body.

תוספת ל-RTL / עברית

אם האתר בעברית, הוסיפו את הבלוק הזה בסוף הפרומפט:

HEBREW/RTL SPECIFIC:
- Language: Hebrew primary, dir="rtl" on the root.
- All semantic colors (success/warning/error/info) must be recognizable to Israeli users — avoid associations that differ (e.g., don't use green for "error" which some cultures do).
- Logo and primary buttons must appear on the correct RTL side (top-right for logo, CTAs on the right or centered).
- Dark mode especially important — many Israeli tech users work in dark environments.