מה זה סולם צבע?
סולם צבע הוא אוסף מסודר של גוונים מאותו גוון בסיס, ממוספר לרוב מ-50 עד 900, שנבנה כך שהמדרגות ייראו אחידות לעין וששילובים מסוימים יעמדו ביחסי ניגודיות ידועים. הוא מאפשר לבחור צבע לפי תפקיד ומדרגה במקום לפי ערך הקסדצימלי שרירותי.
מוסכמת המספור
רוב המערכות ממספרות סולמות מ-50 (הבהיר ביותר) עד 900 או 950 (הכהה ביותר), בקפיצות של 100. המוסכמה הגיעה מ-Material Design וחוזקה על ידי Tailwind, והיום היא נפוצה מספיק כדי שכדאי ללכת לפיה.
--blue-50: #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8Aהערך של מוסכמה משותפת הוא ש"תשתמש ב-blue-600 למסגרת" אומר אותו דבר למעצבת, למפתח ולעוזר AI.
מה עושה סולם טוב
אחידות תפיסתית. המדרגות צריכות להיראות מרוחקות במידה שווה. אינטרפולציה במרחב sRGB לא משיגה את זה - היא מייצרת סולמות שנערמים באמצע ונעשים בוציים בגוונים מסוימים. עבודה במרחב אחיד תפיסתית כמו OKLCH נותנת תוצאות טובות בהרבה.
ניגודיות צפויה. בסולם בנוי היטב, שילובים מסוימים אמינים: מדרגה 600 ומעלה על מדרגה 50 עומדת ב-AA לטקסט רץ, ו-500 מספיקה לטקסט גדול. כשהיחסים האלה מתקיימים, אנשים מפסיקים לבדוק ניגודיות ידנית בשילובים שגרתיים.
גוון עקבי. שינוי בהירות נאיבי מזיז את הגוון בקצוות. כחולים נוטים לסגול כשהם מתכהים; צהובים הולכים לירוק. שמירה על גוון נתפס יציב לאורך הסולם דורשת תיקון מכוון.
כמה מדרגות
עשר (50 עד 900) היא ברירת המחדל הנפוצה ומתאימה לרוב המוצרים. יש מערכות שמשתמשות באחת-עשרה, ומוסיפות 950 לערכות כהות שצריכות משהו מתחת ל-900.
פחות משבע בערך נוטה להשאיר חורים במקומות שבהם מישהו צריך גוון שלא קיים, וזה בדיוק המקום שבו הסחיפה מתחילה.
אילו סולמות מערכת צריכה
- סולם ראשי לצבע המותג
- סולם ניטרלי או אפור, שנמצא בשימוש יותר מכל האחרים יחד
- סולמות סמנטיים להצלחה, אזהרה, שגיאה ומידע
- ובאופן אופציונלי סולם משני או סולם הדגשה
הסולם הניטרלי ראוי לתשומת הלב הרבה ביותר, כי שם רוב הממשק באמת חי. גוון קל באפורים, חם או קר, הוא בדרך כלל מה שמבדיל בין ממשק מחושב לממשק ברירת מחדל.
איפה Flash DSM נכנס
מערכות שנוצרות כוללות סולמות מלאים לצבעים ראשיים, משניים, ניטרליים וסמנטיים, שנוצרים במרחב אחיד תפיסתית, עם גרסאות בהירה וכהה וניגודיות שנבדקת על פני השילובים.