צבעים, גוונים, טפטפות צבע ומחוללי פלטות - כל מיני כלים והשראות שיהפכו את בחירת הצבעים בפרויקט למעניינת יותר.
אבל האמת? אני כמעט ולא מוצאת שימוש לאתרים של מחוללי פלטות. יש אחלה כלים בתוך התוכנות עצמן של אדובי, ואם כבר, יש את המחולל שלהם שהוא סופר נוח. בנוסף, יש לי מניפת פנטון, זה לא לינק אבל כשמעצבים לדפוס, בשלב מסוים לא תהיה ברירה אלא לקנות אחת, זה משנה חיים.
ישנם גם ספרים שווים במיוחד לצבעים. כשלמדתי בשנקר היה לי כזה - עם מיליון שילובים ושימושים והסברים על CMYK ו-RGB (מבטיחה שבקרוב אפרסם בעצמי מדריך שכזה, זה מעניין) ואז. ואז!!! השאלתי את הספר למישהו, ומעולם לא קיבלתי את הספר חזרה (אם אתה קורא את זה משאיל יקר… זה בסדר, אני לא כועסת, רק מאוכזבת).
אז למה בכל מקרה יש לי רשימה נאה של לינקים בנושאי צבע? כי לפעמים בחירת צבעים דורשת השראה משל עצמה, כדי להביא שילובים רעננים וגוונים לא שגרתיים - לכל אחד ואחת כדאי לפעמים לשטוף את העיניים בהשראות חדשות.
בנוסף, לפעמים נצטרך עזרה של כלים טכניים עבור דברים כמו בדיקת ניגודיות (כמה קריא צבע הטקסט על צבע הרקע), וזאת כדי לעמוד בדרישות של נגישות. נגישות באתרים היא דבר חשוב ובארץ אפילו מעוגן בחוק. כחלק מתהליך העיצוב כדאי לנו לבדוק שהבחירות שלנו עומדות במבחן, לא רק בשביל להתאים לתנאי הנגישות אלא בכלל לוודא שהדברים נוחים לקריאה.
אז כן, יש אינסוף לינקים שמתעסקים בצבע והרבה מהם חוזרים על עצמם, לכן כאן הכנסתי רק כאלה שאני אהבתי את עיצוב הממשק שלהם, את נוחות השימוש וכמובן, שגם נותנים איזשהו ערך נוסף.
אז יאללה - נתחיל.
*במידה ויש הורדות או תנאי שימוש כלשהם בלינקים ששיתפתי פה, זה על אחריות הקורא.ת בלבד לבדוק את זכויות היוצרים, זכויות השימוש ואת כל שאר האותיות הקטנות.
חילקתי את הלינקים לשני חלקים: החלק הראשון הם כאלה שהם פשוט מעניינים והחלק השני אלה לינקים שיעילים במיוחד לעיצוב ממשקים ונגישות.
// פשוט מעניינים //
מדריך ויזואלי ומעניין על צבעים וניגודיות (contrast). מה שכן, יש פה יותר קריאה מאשר משחק עם צבעים. ממליצה להכין קפה/תה/יין ולשבת לקרוא, במיוחד על Color Spaces ו- Color Models*. מזל שיש בצד תוכן עניינים לחיץ! * או שתחכו שאני אסיים לכתוב גם על אלה, כי אני באמצע (:
אתר השראה לצבעים. בשונה מאתרי צבעים אחר בחירת הצבעים כאן לא אין סופית אלא עברה אוצרות ע״י המעצבת יוג׳יניה גרסיה. יחד עם כל צבע מוצגים מספר צילומים המכילים את אותו הצבע וככה נותנים לנו תחושה איך הצבע נראה בפעולה ובמינונים שונים.
אתר שמשתמש בסוג של בינה מלאכותית כדי לתת לנו שילובי צבעים. נתחיל עם בחירה של 50 גוונים שנראים לנו (נקבל הודעה תוך כדי בחירה אם כדאי לבחור יותר מצבעים מסוימים כדי לקבל תוצאות טובות). לאחר מכן נקבל הרבה שילובי צבעים מעניינים המתבססים על הבחירה הראשונית שלנו. את אלה נוכל לראות לראות כטקסטים, צמדים, מעברי צבע (gradients), תמונות duotone או כפלטה קלאסית. בנוסף אפשר לשנות את צבע ממשק האתר ליום ולילה, מה שגם יכול לעזור לבחון צבעוניות.
אתר סופר פשוט המאפשר בחירת צבעים בעזרת הזזת סמן העכבר על המסך. בגדול הצבעים מסודרים לפי מודל HSL (Hue-Saturation-Lightness, שנמצא גם בתוכנות אדובי), ברגע שהגענו למשהו יפה, אפשר ללחוץ על המסך, הצבע יישמר ונעבור לצבע הבא בפלטה. זה קצת מוזר לבחור ככה צבעים - לא בטוחה שזה נוח במיוחד אבל בהחלט בזבזתי הרבה זמן במשחק עם העכבר והחלפת צבעים.
תצוגת הצבעים פה פשוט יפה - לא מתחכמת מידי ומוגשת עם אנימציות קטנות שפשוט קנו אותי. יש אופציות מאוד נוחות להגביר או להחליש את הרוויה (saturation) והבהירות (lightness) של הצבעים, או בכלל להתמקד בצבע ספציפי. כשסיימתי להסתנוור ממלבנים עם פינות מעוגלות (באנימציה!) ראיתי שיש אפשרויות נוספות כמו להוריד SVG - בעיני זה סופר מגניב כי מתקבל קובץ עם קוביות צבע + ערכי RGB + מספר פנטון + מספר HEX. אני שעובדת הרבה עם ״קוביות״ צבע, לפני שאני מכניסה צבע ל-Swatches בקובץ, יכולה מאוד להנות מזה שאני לא צריכה לעשות העתק-הדבק לכל מיני מספרים. חלק קצת מבאס באתר - יש גם אופציה של ״צרו לוגו!״ מצמד הצבעים שנבחרו. כמובן שזה מאוד תבניתי וחסר מעוף אבל ב-40$ אפשר לראות איך יהיו כאלה שילכו על זה במקום לפנות למעצבת או מעצב. עם זאת, זאת כן יכולה להיות גם נקודת מוצא וחלק מתהליך חיפוש השראות לעיצוב.
מאותו בית של הלינק הקודם אבל דגש על מעברי צבע - למה זה פה? כי גם כאן אפשר להוריד קובץ SVG ואני אישית קצת שונאת ליצור מעברי צבע באילוסטרייטור, אז זה נחמד שהם מגיעים ״מוכנים״.
אממ... תודה גוגל! מה שקורה פה זה שגוגל לקחו הרבה מאוד יצירות אומנות, סרקו אותן והוציאו מהן פלטות צבעים. ככה נוכל לחפש צבעים ולראות איזה יצירות אמנות מתקשרות אליהם. אפשר לקבל על כל יצירה גם פרטים נוספים כמו המקור שלה - על הדרך גם נוכל ללמוד קצת על אמנות. אפשר, כמובן, גם לעלות תמונה משלנו כדי לקבל ממנה פלטת צבעים ויצירות אמנות קשורות.
תוסף נחמד לדפדפן כרום שמאפשר לנו להוציא פלטת צבעים מכל תמונה באינטרנט. כשנעשה לחצן ימני על תמונה - תופיע האופציה ״Palette Creator".
מחולל הצבעים של אדובי. תכלס, לא צריך מעבר לזה אם כל מה שתחפשו זה כלי פשוט לפלטות - מאוד ישר ולעניין, אפשר לבחור את הצבעים בעזרת מודלים שונים - RGB, HSL, CMYK, וכו׳. יש אפשרות ליצור פלטה בהתאם להרמוניות - מונוכרום, משלים, אנלוגי ועוד כל מיני אופציות וגם כמובן - לשמור את הפלטה ל-Libraries שלנו, ככה שנוכל לפתוח אותה ישירות בתוך התוכנות של אדובי, בלי צורך להעתיק ולהדביק מספרים וערכים. אפשר גם להעלות תמונה כדי לייצר פלטה מתוכה, או להשתמש בתמונה כרפרנס למעבר צבע.
מחשבון צבע. בחירת הצבעים פה לא מאוד נוחה אבל מה שמעניין זה שהאתר נותן לנו לבחור לפי איזו הרמוניית צבעים נרצה את הפלטה - מונוכרום, משלים, מנוגד וכו׳. הייתי בוחרת צבעים במקום אחר, מעניין יותר, ורק מביאה את המספר שלהם לפה.
// ממשקים ונגישות //
כלי נוסף מבית מוזלי - פלטות צבעים להשראה בדגש לשימוש עבור ממשקים. נבחר צבע בסיס להתחיל איתו ומשם הכלי יציע לנו מספר שילובים, או שנוכל לבחור בעצמנו כל צבע. את אלה הוא ידגים לנו על עיצוב ממשק פשוט, ככה נוכל לקבל רושם ראשוני האם השילוב יעבוד או לא.
דיברתי בהתחלה על בדיקת ניגודיות לטובת נגישות, בדיוק בשביל זה יש את האתר הזה. בנוסף, הוא מכיל בתוכו עוד מידע על נגישות אתרים שכדאי להכיר. עם זאת, יש לקחת בחשבון שחוקי נגישות עלולים להיות קצת שונים בארץ לעומת מקומות אחרים ומומלץ להיעזר בשירותים של מומחים לזה
(אבל שימו לב - אף אחד מהלינקים שבודקים ניגודיות הוא לא עצה משפטית או התחייבות. אני לא אומרת שבעזרת האתרים האלה תעמדו בחוקי נגישות, על אחריותכם ואחריותכן בלבד לוודא מול מומחה או מומחית לנושא).
עוד אתר נחמד העוסק במציאת צבעים עם דגש על נגישות. כל מקום עם כפתור ״אקראי״ הוא מקום כלבבי אבל פה יש לנו גם אפשרות לשחק עם צבע, רוויה ובהירות. את אלה נראה על דוגמת טקסט בכמה גדלים ואפילו נקבל ניקוד נגישות! כשיש מספיק ניגודיות נקבל את הציון AAA, AA או AA Large (כלומר עובר רק בטקסטים גדולים) או אם הבחירה שלנו כושלת (מבחינת ניגודיות, נו), אז נקבל ציון FAIL.
אוקיי זה אתר מגניב מאוד, למרות שהממשק לא מלבב במיוחד. המטרה כאן היא לעזור לנו למצוא צבעים שמספיק שונים זה מזה לטובת יצירת גרפים, טבלאות וכו׳ - כלומר גרפיקות הכוללות מידע רב ודורשות בידול צבעוני נוח. גם פה אפשר להכניס פרמטרים של צבע, רוויה ובהירות ולפי זה לייצר פלטות. בנוסף נקבל רשימה ארוכה של צמדי צבע מתוך הפלטה ודירוג הניגודיות ביניהם לטובת ענייני נגישות.
אתר צבעים המתמקד בשימוש האינטרנטי שלהם - ערכים, שמות וגם הסבר קצר מה זה בכלל HEX? (אל דאגה, לא חובה לקרוא את הכל, בקרוב אפרסם מדריך צבעים).
אתר צבעים שיש בתוכו כמה כלים מגניבים. הרעיון מאחוריהם לא מאוד חדשני אבל הממשק די נוח (אם נתעלם מהפרסומות). מה מגניב פה? בדיקת ניגודיות לצבעים שבחרנו (שכבר ציינתי כמה זה חשוב לנגישות), מחולל מעברי צבע ומחולל פלטות. מה שמיוחד במחולל הפלטות כאן זה שהאתר נותן לנו עוד שכבות מידע על הצבעים - מפת בהירות, מעבר צבע מהפלטה שלנו, אפשרויות לראות מצבים שונים של עיוורון צבעים, יכולת לראות כמה גוונים (Tint) של אותו צבע מהפלטה ולשנות בהתאם. בכלל ה״גלילה״ בין הצבעים נעשית עם מקש הרווח במקלדת - נוכל ללחוץ שוב ושוב עד שיגיע צבע יפה, קצת כמו רולטה, לנעול את הצבע שאהבנו ולהמשיך להריץ את הרולטה עבור שאר הצבעים.
מסיבות היסטוריות, CSS תומך ב-147 צבעים לפי שם. למשל, במקום לכתוב את הצבע a9a9a9# לפי הערך המספרי שלו, נוכל לכתוב פשוט ״darkgrey״. האתר הזה בא להראות בגריד נוח לשימוש ומיון את אותם הצבעים שיש להם שם. כיום כנראה יש כבר קצת יותר מ-147 (לכן כנראה בלוגו של האתר המספר 147 מחוק 😂).
זאת ספרייה די מצומצמת עם פואנטה ספציפית, בעיני היא יותר מעניינת כפרט טריוויה. עובדה משעשעת - הצבע שהוגדר בתור ״אפור כהה״ בהיר יותר מהצבע שהוגדר בתור ״אפור״.
אז אלה הם הלינקים שלי בנושאי צבע, זה די מדהים איך אפשר לקחת נושא אחד כמו ״פלטת צבעים״ ולייצר ממנה כל כך הרבה עניין ומשחק.
יש לכם או לכן לינק שווה על צבעים שלא נמצא פה? ספרו לי בתגובות!
אני תמיד שמחה להכיר דברים חדשים.