מרחבי צבע חדשים של 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);
}

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

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

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

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

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

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

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