מרחבי צבע חדשים של CSS ופונקציות חדשות בכל המנועים העיקריים

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

Rachel Andrew

עכשיו יש ב-CSS תמיכה במרחבי צבעים שמאפשרים לנו לגשת לצבעים מחוץ ללוח הצבעים של sRGB. פירוש הדבר הוא שאפשר לתמוך במסכים באיכות HD (איכות גבוהה) באמצעות צבעים מטווחים של HD. התמיכה הזו כוללת פונקציות חדשות שיעזרו לכם להשתמש בצבע בצורה טובה יותר באינטרנט.

גישה למרחבי צבעים מ-CSS

כבר יש לנו כמה פונקציות שמאפשרות לנו לגשת לצבעים בתוך מגוון הצבעים של sRGB – rgb(),‏ hsl() ו-hwb(). עכשיו יש תמיכה בדפדפנים בפונקציה color(), דרך רגילה לגשת לצבעים בכל מרחב צבעים מסוג RGB. כולל sRGB,‏ Display P3 ו-Rec2020. דוגמאות לכך מפורטות בקוד ה-CSS הבא:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge: ‏ 111.
  • Firefox: ‏ 113.
  • Safari: 15.

מקור

יש תמיכה גם בכמה פונקציות שמאפשרות גישה למרחבי צבעים שאינם sRGB באמצעות lch(),‏ lab(),‏ oklch() ו-oklab().

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge: ‏ 111.
  • Firefox: ‏ 113.
  • Safari: 15.

מקור

מידע על כל המרחבים השונים של צבעים זמין במדריך הצבעים של CSS ברזולוציה גבוהה.

הפונקציה color-mix()

בנוסף למרחבי הצבעים החדשים האלה, כל המנועים תומכים עכשיו בפונקציה color-mix(). הפונקציה הזו מאפשרת לערבב צבע אחד בצבע אחר, בכל אחת מסביבות הצבע. בקוד ה-CSS הבא, 25% כחול מעורבב עם לבן במרחב הצבעים srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

תמיכה בדפדפנים

  • Chrome: ‏ 111.
  • Edge: ‏ 111.
  • Firefox: ‏ 113.
  • Safari: 16.2.

מקור

מידע נוסף על color-mix()

הפונקציות ומרחבי הצבעים החדשים האלה מבטיחים להביא לאינטרנט צבעים עזים באיכות HD. כדי לקבל השראה, כדאי להתחיל ליצור מעברים צבעוניים יפים באמצעות הכלי ליצירת מעברים צבעוניים באיכות HD בכתובת gradient.style.