עוברים ל-OKLCH ו-color-mix(): איך לבנות דיזיין סיסטם חכם ב-CSS נקי

מערכות עיצוב (Design Systems) רבות מתמודדות עדיין עם בעיה ישנה: איך מייצרים פלטת צבעים גמישה בלי לשכפל מאות משתני CSS ובלי להכביד על האתר עם ספריות JavaScript מנופחות?

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

היום, הכללים השתנו לחלוטין.

לפני: הסיוט של משתני HEX וקוד JS מיותר

עד לא מזמן, אם רציתם ליצור גוון ריחוף (hover) לכפתור, היו לכם שתי אפשרויות גרועות. הראשונה: להגדיר ידנית משתנה CSS עבור כל מצב.

:root {
  --primary: #3b82f6;
  --primary-hover: #1d4ed8;
  --primary-light: #93c5fd;
}

האפשרות השנייה הייתה להעמיס ספריית JavaScript כמו chroma.js או color שיודעת לחשב גוונים בזמן ריצה.

הגדרה · sRGB / HSL

מרחבי צבעים קלאסיים המבוססים על אופן הפעולה של מסכים ישנים (sRGB) או על מתמטיקה צילינדרית (HSL). הם אינם מתחשבים בדרך שבה העין האנושית תופסת בהירות.

מה הבעיה? HSL ו-HEX סובליםמ"עיוורון בהירות". אם תציבו צבע צהוב וצבע כחול עם ערך בהירות (Lightness) של 50% ב-HSL, הצהוב יישרף בעיניים והכחול יישאר כהה מאוד.

HEX פשוט עיוור לרשתית האנושית.

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

אחרי: מרחב צבעים אנושי וערבוב CSS חי

כשאנחנו עוברים ל-OKLCH יחד עם color-mix(), האתר מפסיק לחשב צבעים בדרכים עקומות. הדפדפן עצמו הופך למנוע העיצוב.

הגדרה · OKLCH

מרחב צבעים תפיסתי (Perceptually Uniform). ב-OKLCH, ערך בהירות של 60% יישאר בעל אותה בהירות ויזואלית עבור העין, ללא קשר לגוון (Hue) הנבחר.

כך נראית המערכת החדשה:

:root {
  --brand-hue: 250;
  --primary: oklch(0.6 0.22 var(--brand-hue));
  --primary-hover: color-mix(in oklch, var(--primary), black 15%);
  --primary-soft: color-mix(in oklch, var(--primary), transparent 85%);
}

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

איך לבצע את המעבר ב-3 צעדים מעשיים

1. הבנת הגיאומטריה של OKLCH

מרחב OKLCH נבנה משלושה פרמטרים פשוטים:

• L (Lightness): אחוז הבהירות (0% עד 100%).
• C (Chroma): רוויית הצבע (מ-0 עד 0.37 בקירוב).
• H (Hue): זווית הגוון על גלגל הצבעים (0 עד 360).

צבע זה פיזיקה.

כאשר שומרים על ערך L קבוע ומשנים רק את ה-H, מקבלים פלטת צבעים הרמונית שבה לכל הצבעים יש משקל ויזואלי זהה.

2. יצירת סולם גוונים אוטומטי עם color-mix()

הפונקציה color-mix() מקבלת את מרחב הערבוב, ואת שני הצבעים לערבוב.

.button {
  background: var(--primary);
}
.button:hover {
  background: color-mix(in oklch, var(--primary), white 12%);
}
.button:active {
  background: color-mix(in oklch, var(--primary), black 12%);
}

3. הנגשה ומצב כהה (Dark Mode) בלחיצת כפתור

מכיוון שהבהירות ב-OKLCH אמיתית, יצירת ערכות נושא לניגודיות גבוהה נהיית פשוטה. אם הטקסט שלכם דורש יחס ניגודיות של 4.5:1, אתם פשוט מבטיחים הפרש קבוע בערך ה-L בין הרקע לטקסט.

💡

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

סיכום

הפסיקו לחשב צבעים ב-JavaScript או להעתיק עשרות משתנים מ-Figma. בשנת 2026, הדפדפנים מציעים מנוע צבע מתקדם, מדויק וקל משקל.

העבירו את הדיזיין סיסטם שלכם ל-OKLCH ול-color-mix(). האתר שלכם יהיה מהיר יותר, נגיש יותר ויציב פי כמה.

💡

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