CSS color-mix()

Adam Argyle

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

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

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass עשה עבודה מעולה כדי לעמוד במפרט ה-CSS של הצבעים. עם זאת, לא הייתה דרך אמיתית לערבב צבעים ב-CSS. כדי להתקרב, צריך לבצע פעולות מתמטיות של ערכי צבעים חלקיים. בהמשך מוצגת דוגמה מקוצרת לאופן שבו שירות CSS מדמה ערבוב:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

באמצעות color-mix() אפשר לשלב צבעים ב-CSS. המפתחים יכולים לבחור את מרחב הצבעים שלהם ואת מידת הדומיננטיות של כל צבע בשילוב.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

זה מה שאנחנו רוצים. גמישות, עוצמה וממשקי API כלולים. אוהבים שיר,

שילוב צבעים ב-CSS

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

להצגת מבוא אינטראקטיבי, כדאי לנסות את הכלי color-mix(): - לבחון את האפקטים של כל מרחב צבעים. - בודקים את ההשפעות של אינטרפולציית גוון כשמערבבים במרחב צבעים גליל (lch, oklch, hsl ו-hwb). - לוחצים על אחת משתי תיבות הצבעים העליונות כדי לשנות את הצבעים שמעורבים. - משתמשים בפס ההזזה כדי לשנות את יחס השילוב. - קוד CSS color-mix() שנוצר זמין בתחתית הדף.

שילוב של מרחבי הצבעים השונים

מרחב הצבעים המוגדר כברירת מחדל לערבוב (ולהדרגתיות) הוא oklab. כך מתקבלות תוצאות עקביות. תוכלו גם לציין מרחבי צבע חלופיים כדי להתאים את השילוב לפי הצרכים שלכם.

ניקח לדוגמה black ו-white. מרחב הצבעים שהן משלבים לא יעשה את כל ההבדל, נכון? שגוי.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

יש לזה השפעה רבה!

ניקח לדוגמה blue ו-white. בחרתי באפשרות הזו במיוחד, כי זה מקרה שבו צורה של מרחב צבעים יכולה להשפיע על התוצאות. במקרה הזה, רוב המרחבים הצבעוניים הופכים לסגולים כשהם עוברים מלבן לכחול. זה גם מראה עד כמה מרחב הצבעים oklab הוא כל כך אמין לערבוב, הוא הכי קרוב לציפיות של רוב האנשים לערבב בין לבן לכחול (לא סגול).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

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

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

אם אתם תוהים מהו מרחב הצבעים "הטוב ביותר", אין כזה. לכן יש כל כך הרבה אפשרויות! גם לא היו ממציאים מרחבי צבעים חדשים (ראו oklch ו-oklab), אם אחד מהם היה 'הטוב ביותר'. לכל מרחב צבעים יכול להיות רגע ייחודי לבהק ולהיות הבחירה הנכונה.

לדוגמה, אם רוצים לקבל תוצאת מיקס מרהיבה, צריך להשתמש ב-hsl או ב-hwb. בהדגמה הבאה, שני צבעים עזים (מג'נטה וליים) מעורבים יחד ו-hsl ו-hwb מניבים תוצאה תוססת, ו-srgb ו-oklab מפיקים צבעים בלתי-רוויים.

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

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

כוונון שיטת אינטרפולציית הגוון

אם בחרתם לשלב מרחב צבעים גליל, למעשה כל מרחב צבעים עם ערוץ גוון h שמקבל זווית, תוכלו לציין אם האינטרפולציה היא shorter, longer, decreasing ו-increasing. למידע נוסף, תוכלו להיעזר בנושא הזה במדריך הצבעים HD.

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

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

שילוב עם טקסטים שונים של צבעים

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

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

בדוגמה הקודמת, הערכים hsl ו-display-p3 יומרו ל-oklch ואז ישלבו. די מגניב וגמיש.

כוונון יחסי השילוב

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

כדי להתחיל בנושא, הנה דוגמה של מיקסים שכולם מקבילים (ומהמפרט):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

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

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

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

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

הכלל האחרון הוא קצת פחות ברור; מה קורה כאשר מצוינים אחוזים לשני הצבעים, והם לא מסתכמים ל-100%?

color-mix(in lch, purple 20%, plum 20%)

השילוב של color-mix() מניב שקיפות, 40%. אם היחסים לא מסתכמים ל-100%, התערובת שתיווצר לא תהיה אטומה. הצבעים לא יהיו מעורבים באופן מלא.

מקונן color-mix()

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

color-mix(in lch, purple 40%, color-mix(plum, white))

כדי לקבל את התוצאה הרצויה, אתם יכולים לקנן כמה שיותר.

יצירת ערכת צבעים בהירה וכהה

רוצה ליצור ערכות צבעים בעזרת color-mix()?

ערכת צבעים בסיסית

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

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

כל זה מתבצע על ידי שילוב של לבן או שחור לצבע המותג.

ערכת צבעים בינונית

אפשר לקחת את זה צעד אחד קדימה, ולהוסיף עוד עיצובים בהירים או כהים. בהדגמה הבאה, שינויים בקבוצת רדיו מעדכנים מאפיין בתג ה-HTML [color-scheme="auto"], וכך מאפשרים לסלקטורים להחיל עיצוב צבעים באופן מותנה.

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

עוד תרחישים מעניינים

לאנה טיודור יש הדגמה נהדרת עם כמה תרחישים לדוגמה ללימודים:

ניפוי באגים color-mix() באמצעות כלי פיתוח

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

זה ייראה בערך כך בכלי הפיתוח:

שיהיה לך מיקס נעים!