כלל 60-30-10
זה הכלל השימושי ביותר לחלוקת הצבעים. הוא מגיע מעיצוב פנים, אבל עובד בכל פרויקט.
- 60%: הצבע הדומיננטי. בדרך כלל צבע ניטרלי או גוון רך. הוא מכסה רקעים ושטחים גדולים.
- 30%: הצבע המשני. הוא מוסיף אישיות. השתמש בו לבלוקים, לתפריטים או לרהיטים.
- 10%: צבע ההדגשה. הנועז מכולם. השתמש בו לכפתורים, לאייקונים או לפרטים.
למשל: אוף-וייט ב-60%, כחול כהה ב-30% וכתום ב-10%.
לא צריך למדוד בדיוק. הרעיון הוא שצבע אחד מוביל, אחד תומך ואחד בולט.
התפקיד של הצבעים הניטרליים
הצבעים הניטרליים הם לבן, שחור, אפור, בז׳, קרם וחומים בהירים. הם מתאימים כמעט לכל דבר.
הם נותנים לעין מנוחה ועוזרים לצבעים החזקים לבלוט. פלטה בלי צבעים ניטרליים בדרך כלל מעייפת.
- לבן ואוף-וייט: ניקיון ומרחב.
- אפור: מודרני ומאופק. בחר אפורים חמים או קרים בהתאם לשאר הפלטה.
- בז׳ וחול: חום ותחושה טבעית.
- שחור או כמעט שחור: אלגנטיות וניגודיות. לטקסט, אפור כהה מאוד בדרך כלל נעים יותר לעין משחור מלא.
שילוב לפי טמפרטורה
הצבעים מתחלקים לחמים (אדומים, כתומים, צהובים) ולקרים (כחולים, ירוקים, סגולים). יש שלוש דרכים פשוטות לשלב ביניהם:
- רק חמים: נעים ואנרגטי. מצוין למסעדות או למותגים ידידותיים.
- רק קרים: רגוע ומקצועי. מצוין לבריאות, לטכנולוגיה או לפיננסים.
- בסיס קר עם הדגשה חמה: האפשרות הגמישה ביותר. ההדגשה החמה מושכת את העין על רקע רגוע.
מה שבדרך כלל לא עובד הוא ערבוב של הרבה צבעים חמים וקרים עזים בבת אחת, בלי צבע דומיננטי.
ניגודיות לטקסט
צבע יפה לא שווה הרבה אם אי אפשר לקרוא את הטקסט. הניגודיות בין הטקסט לרקע היא המפתח לקריאות ולנגישות.
- השתמש בטקסט כהה על רקע בהיר, או בטקסט בהיר על רקע כהה.
- הימנע מטקסט צהוב, ירוק בהיר או אפור בהיר על לבן.
- הימנע מהנחה של צבעים משלימים רוויים זה על זה, כמו אדום על ירוק. הם ״רוטטים״ ומעייפים את העיניים.
- הנחיות WCAG דורשות יחס מינימלי של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.
אפשר לבדוק כל זוג צבעים עם בודק הניגודיות שלנו.
15 שילובי צבעים שתמיד עובדים
הזוגות האלה הם נקודות פתיחה בטוחות. השתמש בהם כבסיס והוסף צבע ניטרלי או צבע הדגשה לפי הצורך.
- כחול כהה וקרם: קלאסי, רציני וקל לקריאה.
- שחור וזהב: יוקרה ואלגנטיות.
- כחול וכתום: משלימים ומלאי אנרגיה.
- ירוק יער ובז׳: טבעי ורגוע.
- ורוד ואפור פחם: מודרני ומאוזן.
- צהוב ושחור: ניגודיות מקסימלית, אידיאלי לאזהרות.
- בורדו וחול: חם ומתוחכם.
- טורקיז וקורל: רענן וקייצי.
- סגול ולילך בהיר: מונוכרומטי ויצירתי.
- חום וירוק מרווה: אדמתי, אידיאלי למותגים טבעיים.
- אפור ואפרסק: רך וידידותי.
- כחול פטרול וצהוב חיוור: רגוע עם נגיעה של אור.
- טרקוטה ואוף-וייט: חם וים-תיכוני.
- כחול-ירקרק כהה וחרדל: רטרו ומלא אופי.
- לבן ואדום: ישיר, אנרגטי ובולט מאוד.
עוד הרבה רעיונות, עם קודי ה-HEX שלהם, תמצא בדף שילובי צבעים שלנו.
צבעים שמתאימים לכל צבע
אם כבר יש לך צבע ראשי, הרשימה הזו נותנת נקודת פתיחה מהירה:
- אדום: לבן, שחור, אפור, כחול כהה ובז׳. למשהו נועז, ורוד או כתום.
- כתום: כחול כהה, טורקיז, לבן, קרם וחום.
- צהוב: אפור, שחור, כחול כהה ולבן. צהוב חרדל מתאים יפה לירוק כהה.
- ירוק: בז׳, לבן, חום, זהב וורוד רך.
- כחול: לבן, כתום, אפור, צהוב וקורל. כחול כהה מתפקד כמעט כמו צבע ניטרלי.
- סגול: אפור, לילך, זהב, ירוק מרווה ולבן.
- ורוד: אפור, כחול כהה, ירוק זית, לבן וזהב.
- חום: קרם, ירוק, כחול פטרול, כתום ואוף-וייט.
שים לב שהצבעים הניטרליים מופיעים כמעט בכל רשימה. הם הדרך הבטוחה ביותר לשלב צבע חזק.
איך ליצור שילוב משלך
- בחר צבע ראשי לפי מה שאתה רוצה לשדר.
- מצא צבע משני בגלגל הצבעים: צבע שכן למשהו רגוע, צבע מנוגד למשהו בולט.
- הוסף צבע ניטרלי אחד או שניים.
- בחר צבע הדגשה אחד בלבד למה שהכי חשוב.
- בדוק את הפלטה על דוגמה אמיתית: דף אינטרנט, שקופית או תמונה של החדר.
כשיש ספק, השתמש בפחות צבעים. שלושה עד חמישה צבעים מספיקים כמעט לכל פרויקט.
טעויות נפוצות בשילוב צבעים
- שימוש ביותר מדי צבעים. התוצאה נראית מבולגנת ושום דבר לא בולט.
- לתת לכל הצבעים אותו משקל. בלי צבע דומיננטי, העין לא יודעת לאן להסתכל.
- לשכוח את הניגודיות. טקסט שאי אפשר לקרוא או כפתורים שאף אחד לא רואה.
- לרוות הכול. צבעים חיים מאוד מעייפים. שלב אותם עם גוונים רכים יותר.
- להתעלם מההקשר. צבע נראה אחרת באור יום, על מסך או בדפוס.
- להעתיק בלי להתאים. פלטה שעובדת למותג אחד לא בהכרח מתאימה לקהל שלך.
- לערבב צבעים ניטרליים בטמפרטורות שונות. אפור קר ליד בז׳ חם עלול להיראות עכור. בחר צבעים ניטרליים מאותה משפחה.
- לא לבדוק על כמה מסכים. צבע יכול להיראות מצוין במחשב שלך ודהוי בטלפון. תמיד בדוק ביותר ממכשיר אחד.