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() היא ידע נהדר גם ליצירת מעברי צבעים. התחביר של Color 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 הראשוני.

עוד תרחישים מעניינים לדוגמה

Ana Tudor יצרה הדגמה מצוינת עם כמה תרחישים לדוגמה ללימוד:

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

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

כך זה ייראה ב-DevTools:

תהנו מהמיקס!