צבע בעיצוב לאינטרנט

כתבה סיגלית אריאלי, מרצה בקורס בניית ועיצוב אתרים במנטור

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

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

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

גלגל הצבעים הבסיסי. כל הצבעים נוצרו מצהוב, אדום וכחול ושילוב בין שניים מהם.

במאמר זה אשתמש באתר http://colorschemedesigner.com על מנת להדגים שיטות שונות ליצירת פלטת צבעים.
השיטה הראשונה מבוססת על צבע אחד (Mono) – בסיסי או משלים – ושימוש בגוונים שלו (בהירים וכהים מצבע המקור). רובנו נעדיף משהו מגוון יותר.

בחירת צבע בודד (אדום). האתר מציג מספר גוונים של אותו צבע ומאפשר ליצור מהם פלטת צבעים

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

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

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

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

כדאי לשים לב שהאתר מחלק את הצבעים לחמים (מושפעים מהאדום) וקרים (מושפעים מהכחול). במידה וקרבתם בין שתי הנקודות הבהירות, שניים מהצבעים יהיו מהמשפחה הקרה או החמה.
האתר מציע עוד שלוש דרכים נוספות ליצירת פלטת צבעים שבהחלט שווה לבדוק.
כדי לבחון את פלטת הצבעים ואיך היא תראה באתר, אפשר ללחוץ על אחד משני הכפתורים מתחת לתצוגת הצבעים מימין. האחד מציג אתר בהיר (Light page) והשני מציג אתר כהה (Dark page). לחיצה על אפשרות Show sample text מציגה את המילה text בשלושה צבעים – לבן, אפור ושחור – על רקע כל אחד מדוגמיות הצבע. מאד שימושי וכדאי לבדוק אפשרויות אלו לפני שבוחרים את הצבעים.

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