בנו לוח צבעים למותג מתוך תמונות המוצר שלכם

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

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

למה להתחיל מהמוצר ולא מלוח השראה

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

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

שלב 1: בחרו וחתכו את התמונות

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

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

שלב 2: שלפו חמישה עד שמונה צבעים

גררו כל תמונה למחלץ ובקשו 5 או 6 צבעים לצילום מוצר נקי, או 8 לתמונה עמוסה. הוא מקבץ פיקסלים דומים ומציג את הממוצע של כל קבוצה, מהגדולה לקטנה, עם השטח שכל אחת תופסת בתמונה. נקודת ההתחלה קבועה, לכן אותה תמונה תמיד נותנת את אותו לוח, וכתם בהיר וקטן, כמו מכסה אדום על בקבוק לבן, מקבל משבצת משלו במקום להתמזג בממוצע.

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

שלב 3: תנו לכל צבע תפקיד

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

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

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

שלב 4: בדקו ניגודיות לפני שהצבע יוצא לשימוש

צירופי צבעים שנראים טוב על מסך גדול עלולים להיות קשים לקריאה בטלפון בשמש, וקשים הרבה יותר לאנשים עם ראייה ירודה. ההנחיות לנגישות תוכן ברשת של W3C נותנות לכך מספר, יחס הניגודיות, שנע מ-1:1 (אותו צבע פעמיים) עד 21:1 (שחור על לבן). הסף הוא:

	טקסט רגיל	טקסט גדול
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

טקסט גדול פירושו לפחות 18 נקודות, או 14 נקודות מודגשות, לפי ההגדרה של WCAG. והמספרים הם קווים נוקשים: ההנחיה לסעיף 1.4.3 של W3C קובעת שאין לעגל יחס מחושב, ולכן 4.499:1 לא עומד ב-4.5:1.

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

דוגמה מעשית

נניח שהאריזה שלכם נותנת לכם כחול כהה #1a3c6e, קרמי #fdf6e3 וכתום #e07a2e.

הנוסחה היא (L1 + 0.05) / (L2 + 0.05), כאשר L1 הוא הבהירות היחסית של הצבע הבהיר יותר ו-L2 של הכהה יותר. בהירות יחסית נעה מ-0 לשחור ועד 1 ללבן. הכחול הכהה מסתכם בכ-0.046, הקרמי בכ-0.923 והכתום בכ-0.300.

• טקסט כחול כהה על קרמי: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, בערך 10.1 עם המספרים המעוגלים, ו-10.16:1 מדויק. זה עובר AAA בכל גודל. זה צירוף הטקסט העיקרי שלכם.
• טקסט כתום על קרמי: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, בערך 2.78:1. זה נכשל אפילו לטקסט גדול. הכתום לא צריך לשאת מילים על קרמי.
• טקסט שחור על כתום: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, שהם 7.0 עם המספרים המעוגלים, אבל 6.99:1 מדויק. זה עובר AA לכל טקסט, אבל חסר מעט ל-AAA. מספיק טוב לתווית כפתור.
• טקסט קרמי על כחול כהה: זה אותו צירוף כמו הראשון, ולכן אותו 10.16:1. הפיכת סדר הצירוף לעולם לא משנה את היחס.

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

שלב 5: רשמו את זה פעם אחת

ייצאו את הלוח כ-CSS custom properties או כ-JSON, ושמרו אותו ליד קבצי הלוגו שלכם. כשהחלטתם, שנו את שמות המשתנים לפי התפקיד: --brand-bg, --brand-text, --brand-accent קריאים יותר מ---color-3 אחרי חודש. הוסיפו שורה מתחת לכל אחד שמציינת אילו צירופים עברו, כדי שאף אחד לא יצטרך לעשות את הבדיקה שוב.

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

שימוש בלוח במודעות ובפוסטים

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

איפה Hermoso נכנס

Hermoso היא סוכנת שיווק מבוססת AI. היא חוקרת את המודעות שכבר עובדות בשוק שלכם, מייצרת מודעות תמונה ווידאו שמותאמות למותג, מפרסמת ומתזמנת לחשבונות הרשתות החברתיות שלכם, ומריצה קמפיינים ממומנים בחשבונות המודעות שלכם. כשמוסיפים את המותג מהאתר שלכם, היא לומדת את המוצרים, הלוגו והלוח שלכם. כיתובים וכרטיסי סיום נשארים כבויים אלא אם מבקשים, וכשמבקשים, אפשר להגדיר את צבעי הטקסט, התיבה וכרטיס הסיום בקודי hex, כך שהצירופים שבדקתם כאן הם אלה שיצאו לאוויר. היא פועלת באפליקציית הווב, או בתוך Claude, ChatGPT ו-Cursor דרך שרת ה-MCP שלה.

שאלות נפוצות

איך מוצאים את קודי ה-hex של צבעי המוצר שלי?

חתכו תמונה נקייה למוצר או לאריזה, וגררו אותה למחלץ לוחות צבעים. הוא מציג את הצבעים הראשיים כ-HEX, RGB ו-HSL. הריצו שתיים או שלוש תמונות ושמרו את הצבעים שחוזרים.

איזה יחס ניגודיות טקסט צריך?

לפי WCAG 2.2, רמת AA דורשת 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול, ורמת AAA דורשת 7:1 ו-4.5:1. טקסט גדול הוא לפחות 18 נקודות, או 14 נקודות מודגשות.

האם 4.49:1 מספיק ל-AA?

לא. W3C קובעת שאין לעגל את היחס כשמשווים אותו לסף, ולכן 4.499:1 לא עומד ב-4.5:1.

כמה צבעים צריך שיהיו בלוח מותג?

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

האם הצבעים מתמונה מדויקים?

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