CSS color-mix()

Adam Argyle

שירות ה-CSS color-mix() מאפשרת לכם לשלב צבעים בכל מרחב צבעים נתמך, ישירות מתוך ה-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.

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

ל-Ana Tudor יש הדגמה מעולה עם מספר תרחישים לדוגמה ללימודים:

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

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

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

מיקס שמח לכולם!