CSS color-mix()

אדם ארגייל

Twitter GitHub

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

תמיכה בדפדפן

• 111
• 111
• 113
• 16.2

מקור

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

לפני עם SCSS

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

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

לפני עם HSL

.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.

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

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

להתנסות בהדגמה

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

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

שילוב עם תחבירי צבעים שונים

עד עכשיו שילבנו בעיקר צבעי 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(). הוא מזהה ומדגיש את התחביר, יוצר תצוגה מקדימה של השילוב ליד הסגנון בחלונית 'סגנונות' ומאפשר לבחור צבעים חלופיים.

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

איזה כיף במיקס!