צבעים ועיצוב
לצבעים יש את אחד התפקידים הכי חשובים בעיצוב, למשוך תשומת לב לאובייקט מסוים, להעביר רגש או תחושה, לתקשר מסר או משמעות (רמזור), והכל בלי מילים.
צבע הוא חלק מה-DNA שלנו כבני אדם ואנחנו מגיבים אליו בצורה לא מודעת וטבעית, לכן הוא כלי כל כך חזק בעיצוב, אך לדעת לבחור את הצבעים הנכונים זה כישור שלוקח זמן לפתח וכל בחירה היא מושכלת. אז איך יודעים אילו צבעים נראים טוב ביחד ואיזה לא? מתחילים בתיאוריית הצבעים.
מהי תיאוריית הצבעים?
תיאוריית הצבעים או "תורת הצבעים" – בשימוש כבר מאות שנים ע"י אומנים ומעצבים, והיא בסיס חובה לכל מעצב בכל תחום. כולנו כבר יודעים משהו על צבעים, ביסודי מלמדים אותנו על צבעי הבסיס – אדום צהוב כחול, ואיך הערבוב ביניהם יוצר צבעים חדשים. כל הערבובים האפשריים יושבים ביחד על גלגל הצבעים.
גלגל הצבעים
גלגל הצבעים פותח בשנת 1666 ע”י אייזק ניוטון, שמיפה את ספקטרום הצבעים האנושי על גלגל שצורתו מדגימה בצורה מושלמת את היחסים בין הצבעים.
הגלגל מורכב מצבעי יסוד, צבעים משניים וצבעים שלישוניים וכל שאר הערבובים השונים שביניהם. אבל בגדול, אפשר לחלק את גלגל הצבעים בגסות לשני חלקים עיקריים – צבעים חמים וצבעים קרים. במאמר הזה אתמקד בגלגל הצבעים כפי שהוא מופיע בתוכנות העיצוב ובהקשר שרלוונטי אלינו כמעצבים, ובחלק מהמקרים גם ספציפית במה שנוגע לעיצוב אתרים.
שיטות להרכבת צבעים
רובנו מכירים את שיטות הרכבת הצבעים הבסיסיות, RGB ו- CMYK. כל שיטה מתאימה לצורה שבה הצבע נוצר, האחת למסכים והשנייה לדפוס. אך כשמדברים על החלקים הטבעיים שמרכיבים צבע, עבודה עם שתי השיטות האלה מובילה לטעויות ולבחירה שרירותית של צבעים והיא אינה שיטת העבודה הטובה ביותר כשמרכיבים פלטות צבעים.
כל צבע מורכב מ-3 פרמטרים:
גוון (Hue): בחירה של צבע מתוך גלגל הצבעים.
רוויה (Saturation): מהי עוצמת הצבע. כמה הצבע שבחרנו רווי או לא רווי. אין רוויה = אפור
בהירות (Brightness): אור וצל, הוספה של שחור אל תוך הצבע שבחרנו כדי להכהות אותו.
שיטת הרכבת הצבעים הזו נקראת HSB (לפעמים גם HSV) והיא השיטה המדויקת ביותר לעבודה עם צבעים. זו הדרך שבה בני-אדם רואים ומתייחסים לצבעים וזו גם הדרך שבה אנחנו חושבים על צבעים. בהיר יותר, רווי יותר אלה הערות יותר הגיוניות מאשר “יש בו יותר ירוק” או “ אין מספיק מג’נטה”…
לדוגמה, אם תבחרו בצבע סגול, ב-RGB הוא יהיה מורכב מ-3 צבעים שונים ואין לכם שום דרך לשנות את הצבע בצורה הגיונית (בהיר יותר, רווי פחות וכו’) כי אין דרך לזכור את כל השילובים בין שלושת הצבעים האלו וההיגיון בהם מתייחס להרכבת הצבעים על מסך.
בנוסף, כל מסך מראה צבעים בצורה קצת שונה ובשיטה הזו אתם יודעים שהגדרתם את השינוי בצבע שלכם בצורה מדויקת בלי קשר למסך בו הוא מוצג. בשאר השיטות זה בלתי אפשרי.
השיטה הזו מתכתבת עם מה שקורה בטבע וגורמת לכם לשנות צבעים בצורה טבעית. לדוגמה אם בחרתם בצבע ירוק, איך הוא יראה במקום חשוך יותר? (הוספה של שחור לצבע) איך הוא יראה מרחוק? (לאלמנטים במרחק יש פחות רוויה). בקיצור, תמיד לעבוד עם HSB!
נמאס לכם לשבור את הראש עם מדריכים ברשת?
בואו ללמוד בניית אתרים בוורדפרס עם אלמנטור בשיעורים פרטיים אונליין, עם תוכנית לימודים אישית שמותאמת לצרכים שלכם.
הרמוניות צבעים עם Adobe Color
במשך מאות שנים, אומנים וציירים שיכללו את שיטות העבודה שלהם עם צבעים ובנו “נוסחאות” שונות כדי לבנות פלטות צבעים שפשוט עובדות. הנוסחאות האלה נקראות “הרמוניות צבעים”. אז בפרויקט הבא שלכם, במקום לבחור צבעים בצורה רנדומלית הנה כמה נוסחאות שיתנו לכם נקודת פתיחה מעולה, עם הסבר מפורט להיגיון מאחורי כל שיטה. יש נם כלים שונים לבניית הרמוניות צבעים, אני אישית אוהב להשתמש בכלי החינמי של אדובי, Adobe Color.
כנסו ל-Adobe Color ולפני שאתם מתחילים לשחק בצבעים, וודאו כי שיניתם את שיטת הרכבת הצבעים ל-HSV (בפינה השמאלית התחתונה – Color Mode). בממשק תראו את גלגל הצבעים באמצע, הרמוניות הצבעים בצד שמאל, והפלטה שלכם בתחתית המסך.
מתוך 5 הצבעים, הצבע האמצעי הוא צבע הבסיס שלכם ששאר ההרמוניה מושפעת ממנו. הצבעים הקיצוניים מימין ומשמאל הם הצבעים המשניים, ואילו שביניהם לבין צבע הבסיס הן אופציות נוספות שלא חובה להשתמש בהן.
הרמוניות הצבעים
אנלוגי: בהרמוניה הזו, אתם בוחרים את צבע הבסיס וההרמוניה בוחרת למענכם שני צבעים נוספים, אחד מימין לצבע הבסיס ואחד משמאלו.
מדובר בהרמוניה מאוד בסיסית, שיוצרת צבעוניות רגועה שברוב המקרים עובדת טוב מאוד ביחד. החיסרון שלה הוא שהיא נשארת בצד אחד של הגלגל ומדובר בהרמוניה שטחית שאין בה הרבה ניגודיות, דבר שחשוב מאוד בעיצוב אתרים. אם כל האתר שלכם מעוצב מצהובים וכתומים, מאוד קשה ליצור כפתור שיבלוט בצורה משמעותית בכל שאר האתר. לכן חשוב לשלב גם צבע מנוגד שיהיה למצבים מסוימים.
מונוכרומטי: כאן אתם בוחרים צבע אחד וההרמוניה משלימה את הפלטה מאותו הצבע, אך ברוויה ובהירות שונים.
ההרמוניה הזו יוצרת אווירה מאוד מיוחדת וספציפית, והיא גם קלה מאוד לעבודה. אם למשל יש לכם מותג שרוצה ליצור אווירה של תשוקה, עיצוב שכולו מורכב מצבע אדום בלבד, בשינויים של רוויה ובהירות, יעשה את העבודה יותר מכל בחירה אחרת.
מצד שני, מדובר בפלטה לדברים מאוד ספציפיים וברוב המקרים לא הייתי בוחר בה
טריאד: ההרמוניה תשלים שני צבעים במרחק שווה לצבע הבסיס ע”י יצירת משולש על גלגל הצבעים.
שיטת הרמוניה לאמיצים בלבד. ככל שתנסו לשלב יותר צבעים בקומפוזיציה אחת, כל יהיה קשה להגיע לתוצאה מעולה. הקשר בין צבעים הוא מאוד מורכב ויחסי, לכן מומלץ להתחיל עם 1-2 צבעים בלבד.
בטריאד תמיד תתחילו עם 3 צבעים, ובדרך כלל שונים בקיצוניות אחד מהשני, מה שיגרום לפלטה להיות צבעונית מאוד. זה טוב לדברים מאוד נקודתיים כמו מונוכרומטי, אבל לא שימושית ברוב המצבים.
צבע משלים: אתם בוחרים צבע בסיס, וההרמוניה בוחרת את הצבע המנוגד אליו על גלגל הצבעים.
זו ההרמוניה הכי שימושית, אני משתמש בה ב-90% מהמקרים והיא אף פעם לא מאכזבת. תמיד יהיה לכם איזון של צבעים קרים וחמים, ובדרך כלל צבעים שמנוגדים אחד לשני על גלגל הצבעים נראים טוב ביחד. יש לזכור שהצבעוניות לא תעבוד אם תשתמשו בשני הצבעים באופן שווה. יש לבחור צבע אחד ראשי שיוביל את הקומפוזיציה והצבע המנוגד יופיע רק במקומות מסוימים שאליהם תרצו למשוך את תשומת הלב.
צבע משלים מפוצל: כמו צבע משלים, רק שהצבע המנוגד מפוצל לשניים.
שוב, כל צבע נוסף שתכניסו למשוואה יסבך את העבודה משמעותית. במקרה הזה אולי לא כמו טריאד, אך עדיין. מומלץ רק כשיש לכם צורך בפלטה מאוד צבעונית.
לסיכום
אחרי שבחרתם את ההרמוניה שמתאימה לפרויקט שלכם, יש לזכור שזו רק נקודת פתיחה. עכשיו תוכלו לקחת את הפלטה ולהתאים אותה למה שתרצו, אך נקודת הפתיחה כבר תהיה מבוססת על היגיון מסוים ולא בחירה שרירותית של צבע. לדעתי כל דבר שמכניס היגיון לעיצוב הופך אותו לטוב יותר, עיצוב הוא ההיפך מאומנות בהרבה מקרים וההחלטות שלנו אינן שרירותיות אלא מתיישבות על אסטרטגיה עסקית.
מקווה שאחרי הפוסט הזה תסתכלו על צבעים בצורה קצת אחרת, לטובה 🙂
