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

תורת הצבע, בלי ז'רגון
רוב ההרמוניות מגיעות מרעיון פשוט אחד: היכן הצבעים יושבים על הגלגל ביחס אחד לשני. למדו ארבעה דפוסים ותוכלו לקרוא או לבנות כמעט כל סכימה.
- משלימים (Complementary) משתמשים בשני צבעים ממש מנוגדים, כמו כחול וכתום. זה אנרגטי מאוד ומצוין למשיכת תשומת לב, אם כי יותר מדי משניהם נלחם על פוקוס, אז תנו לאחד להוביל והשתמשו בשני כאקצנט.
- אנלוגיים (Analogous) משתמשים בשלושה צבעים שיושבים זה ליד זה, כמו אדום, כתום, וצהוב. זו הרמוניה בעלת ניגודיות נמוכה, רגועה, מהסוג שרואים בכל הטבע. נעים לעין, אבל ייתכן שתצטרכו להוסיף ניגודיות איפשהו כדי שהדברים לא ייראו שטוחים.
- שלושוני (Triadic) משתמש בשלושה צבעים מרווחים באופן שווה סביב הגלגל, כמו אדום, צהוב, וכחול. בהיר ומאוזן, זה עובד הכי טוב כאשר צבע אחד שולט והשניים האחרים משחקים תפקיד תומך.
- מונוכרומטי (Monochromatic) נצמד לגוון אחד ומגוון את הבהירות והרוויה שלו. זו הסכימה הכי בטוחה שיש, נקייה ולכידה, וגיבוי טוב כשכלום אחר לא מרגיש נכון.
מחולל אקראי כיף לצורך השראה, אבל מצבי ההרמוניה הם המקום שבו יושב הערך האמיתי. הם שומרים על הצבעים שלכם קשורים מתמטית, כך שהם נראים כאילו הם שייכים יחד עוד לפני שתתקנו משהו.
HEX, RGB ו-HSL בשפה פשוטה
כל צבע שאתם מעתיקים מגיע בכמה סימונים, וכולם מתארים את אותו הדבר בצורה שונה.
HEX הוא הקוד בן שישה התווים שאתם רואים הכי הרבה, כמו #3A7BD5. זה פשוט אדום, ירוק, וכחול ארוזים למחרוזת אחת, שני תווים כל אחד. זה קומפקטי וזה מה שתדביקו ב-CSS או בכלי עיצוב.
RGB מפרש את אותם שלושה ערוצים כמספרים מ-0 עד 255, כמו rgb(58, 123, 213). אותו צבע, ידידותי יותר לקריאה, ושימושי כשאתם רוצים ערוץ אלפא לשקיפות.
HSL מתאר צבע בדרך שאנשים באמת חושבים: גוון (איזה צבע, 0 עד 360 מעלות סביב הגלגל), רוויה (עד כמה חי), ובהירות (עד כמה בהיר). זה הפורמט הכי קל לכוונון ידני, כי הזזת בהירות או רוויה עושה בדיוק את מה שהייתם מצפים בלי ניחושים. אם אתם צריכים אי פעם לעבור בין פורמטים, המרת HEX ל-RGB מהירה הופכת את זה לקל.

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