5 טעויות קריטיות בשימוש ב-Display-P3 ו-OKLCH ב-CSS (ואיך לתקן אותן)

בכל פעם שאני פותח אתר שנבנה ב-2026 על מסך MacBook Pro או iPhone ורואה שם ירוק דהוי או כחול עייף, אני מבין שהמפתח עדיין כלוא בסטנדרט sRGB מ-1996. ראיתי שוב ושוב את אותן 5 טעויות במימוש של Display-P3 ומרחבי צבע מתקדמים ב-CSS. אלו טעויות שעולות לבעלי אתרים ברושם ראשוני אנמי.

הנה הטעויות השכיחות ביותר ואיך לתקן אותן מיד.

הגדרה · Display-P3

Display-P3 הוא מרחב צבעים (Color Gamut) רחב ב-50% מ-sRGB הקלאסי. הוא מאפשר להציג אדומים, ירוקים וסגולים עמוקים וזוהרים בהרבה במסכים מודרניים.

טעות 1: להישאר עם HEX ו-RGB ולצפות לתוצאה מודרנית

קוד HEX כמו #ff0055 מוגבל מעצם הגדרתו ל-sRGB. המסך שלכם מסוגל להציג ניאון מטורף, אבל הקוד שכתבתם עוצר אותו בדרך.

זה קורה פשוט מתוך הרגל. מפתחים רגילים ללחוץ Copy מ-Figma של קוד HEX. המעצב צייר צבע P3 עוצמתי, אבל היצוא ל-CSS דרס את העומק הזה.

איך לתקן?

עברו לשימוש ב-oklch() או color(display-p3 ...) עבור צבעי הדגש באתר.

/* ישן ומוגבל */
.button {
  background-color: #00ff88;
}

/* מודרני וחי */
.button {
  background-color: oklch(0.85 0.29 150);
}

זה עובד. המסך מתעורר לחיים.

טעות 2: הגדרת צבעי P3 בלי Fallback למסכים ישנים

כתבתם color: color(display-p3 1 0 0.2) והכל נראה מדהים אצלכם. אבל מה קורה כשלטקסט צופה פקיד קבלת קהל על מסך מחשב נייח מ-2018?

דפדפנים ישנים או מסכים שלא תומכים ב-Wide Gamut יתעלמו מההגדרה או יציגו צבע לא צפוי.

איך לתקן?

משתמשים ב-CSS Variables עם נפילה מבוקרת (Fallback), או בשאילתת @supports:

:root {
  --primary: #ff0055; /* sRGB fallback */
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --primary: color(display-p3 0.98 0.02 0.38);
  }
}

💡

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

טעות 3: יצירת שיפועים (Gradients) ב-RGB שמייצרים "אזור אפור מת"

חבורת המעצבים שמחברת כחול וצהוב ב-linear-gradient ומתפלאת למה באמצע השיפוע נוצר גוון בוץ אפור מלוכלך.

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

איך לתקן?

ציינו ל-CSS באיזה מרחב צבעים לבצע את השיפוע בעזרת מילת המפתח in oklch:

/* מעבר נקי בלי אזורים אפורים */
.hero-gradient {
  background: linear-gradient(to right in oklch, #0066ff, #ff0055);
}

ההבדל בולט תוך שניה.

טעות 4: העמסת צבעי ניאון ששורפת את העיניים

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

זה מייצר עומס חזותי קשה. המשתמש נוטש אחרי 4 שניות.

איך לתקן?

שמרו את ה-Chroma הגבוה (מעל 0.2 ב-OKLCH) ל-5% מהאלמנטים במסך בלבד. השאר עובד מעולה בצבעים רגועים.

טעות 5: התעלמות מנגישות וניגודיות (WCAG)

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

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

איך לתקן?

בדקו ניגודיות בעזרת כלי פיתוח התומכים ב-APCA או WCAG 2.1. אל תסתמכו על העין בלבד.

/* דוגמה לטקסט קריא עם מקור P3 */
.badge {
  background-color: oklch(0.3 0.15 260); /* כחול עמוק */
  color: oklch(0.98 0.01 260); /* לבן כמעט טהור */
}

סיכום והמלצה אחת מתועדפת

אין סיבה להישאר ב-1996. המסכים של הלקוחות שלכם מוכנים לצבעים עשירים.

אם יש דבר אחד שכדאי לעשות כבר היום: המירו את השיפועים (Gradients) שלכם ל-in oklch. זה שינוי של מילה אחת בקוד שמשפר מיידית את המראה הוויזואלי של האתר בכל מסך מודרני.