גישה ליותר צבעים ומרחבים משותפים חדשים

המסמך הזה הוא חלק ממדריך הצבעים של CSS ברזולוציה גבוהה.

CSS Color 4 מתווה כמה תכונות וכלים חדשים ל-CSS ולצבע. ב-Codepen הבא מוצג כל תחבירי הצבעים החדשים והישנים יחד:

סקירה כללית של מרחבי צבע קלאסיים

המפרט של level 4 כולל 12 מרחבי צבעים חדשים לחיפוש צבעים, יותר מ-7 לוחות הצבעים החדשים ששותפו קודם:

• sRGB ליניארי
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

נעים להכיר: מרחב הצבעים החדש באינטרנט

במרחבי הצבעים הבאים ניתן לגשת ללוחות צבעים גדולים יותר מ-sRGB. במרחב הצבעים של Display-p3 יש כמות גדולה כמעט פי שניים של צבעים מ-RGB, ואילו ב-Rec2020 יש כמות גדולה כמעט פי שניים מזו של display-p3. זה הרבה צבעים!

הפונקציה color()

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

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

יתרונות

• מרחב מנורמל לגישה למרחבי צבעים שנעשה בהם שימוש בערוצי RGB.
• ניתן להתאים לכל מרחב צבעים רחב מבוסס RGB.

חסרונות

• לא פועל עם HSL, HWB, LCH, okLCH או okLAB

.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 באמצעות color()

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

יתרונות

• כמעט כל המסכים תומכים בטווח של מרחב הצבעים הזה.
• תמיכה בכלי העיצוב.

חסרונות

• לא לינארית באופן מובן (כמו lch())
• ללא טווח צבעים רחב.
• לרוב, אלמנטים הדרגתיים עוברים דרך אזור מת.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRGB לינארי דרך color() {#לינארי-srgb}

החלופה הלינארית הזו ל-RGB מציעה עוצמת ערוץ ניתנת לחיזוי.

יתרונות

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

חסרונות

• לא לינארית באופן מובן.
• שחור ולבן מסודרים בקצוות.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

בהמשך נדון בפירוט על הצבעים, אבל במהירות יהיה חשוב לראות את ההדרגתיות של srgb ו-linear-srgb בהדרגתיות של צבעי שחור-לבן כדי להמחיש את ההבדלים ביניהם:

LCH

LCH מוסיף תחביר לגישה לצבעים מחוץ ללוח ה-RGB. הוא גם הראשון שיקל מאוד על יצירת צבע מחוץ לטווח עבור תצוגה. הסיבה לכך היא שכל צבעי החלל של CIE (lch, oklch, lab, oklab) יכולים לייצג את ספקטרום הצבעים הגלוי לכל אדם.

המודל של מרחב הצבעים הזה מבוסס על ראייה אנושית ומספק תחביר כדי לציין כל אחד מהצבעים האלה ועוד. ערוצי ה-LCH מתאפיינים בקלילות, בכרומה ובגוון. גוון הוא זווית, כמו ב-HSL ו-HWB. מידת הבהירות היא ערך בין 0 ל-100. זו בהירות מיוחדת 'ליניארית בתחושה' וממוקדת בבני אדם. Chroma דומה לרוויה; הוא יכול לנוע בין 0 ל-230, אבל מבחינה טכנית אין גבולות.

יתרונות

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

חסרונות

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

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

Google Labs

נוסף מרחב צבעים כדי לגשת לסולם CIE, שוב עם מאפיין בהירות ליניארית באופן שמבדיל אותו (L). A ו-B ב-LAB מייצגים את הצירים הייחודיים של ראייה לפי צבע אנושי: אדום-ירוק וכחול-צהוב. כש-A מקבל ערך חיובי, הוא מוסיף אדום ומוסיף ירוק כאשר הוא מתחת ל-0. כשנותנים ל-B מספר חיובי הוא מוסיף צהוב, והנתונים השליליים מכוונים לכחול.

יתרונות

• הדרגות עקביות באופן שמבדיל אותו.
• טווח דינמי גבוה.

חסרונות

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

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

מרחב הצבעים הזה מתקן ל-LCH. כמו LCH, (L) ממשיך לייצג בהירות ליניארית מבחינה חושית, C לכרומה ו-H עבור גוון.

במרחב המשותף הזה אפשר להכיר אם עבדתם עם HSL או LCH. בחר זווית בגלגל הצבעים עבור H, בחר מידת בהירות או כהות על ידי כוונון L, אבל יש לנו את Chroma במקום רוויה. הם די זהים, אבל התאמות לבהירות ולכרומה בדרך כלל מופיעות בזוגות, או שפשוט קל לבקש צבעי כרומה גבוהים שנמצאים מחוץ למסגרת היעד.

יתרונות

• אין הפתעות בעבודה עם גוונים כחולים וסגולים.
• תאורה ליניארית מבחינה לינארית.
• הדף משתמש בערוצים מוכרים.
• טווח דינמי גבוה.
• כולל בורר צבעים מודרני – של Evil Martians.

חסרונות

• קל לצאת מלוח הציור.
• חדשים ולא נחקרים יחסית.
• מעט בוחרי צבעים.

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKLAB

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

יתרונות

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

חסרונות

• חדשים ולא נחקרים יחסית.
• מעט בוחרי צבעים.

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

מסך P3

לוח הצבעים ומרחב הצבעים לתצוגה הפכו לפופולריים מאז ש-Apple תמכה בהם מאז 2015 ב-iMac שלהם. Apple תמכה גם בפורמט p3 לרשת המדיה בדפי אינטרנט באמצעות CSS מאז 2016, חמש שנים לפני כל דפדפן אחר. אם אתם מגיעים מ-sRGB, זהו מרחב צבעים מצוין להתחיל לעבוד בו כשמעבירים סגנונות לטווח דינמי גבוה יותר.

יתרונות

• התמיכה מצוינת, נראה שמדובר הבסיס למסכי HDR.
• 50% יותר צבעים מ-sRGB.
• כלי הפיתוח מציעים בוחר צבעים מצוין.

חסרונות

• בסופו של דבר יעקפו את המרחבים המשותפים של Rec2020 ו-CIE.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020 הוא חלק מהתנועה ל-UHDTV (טלוויזיה באיכות אולטרה גבוהה (UHD), שמספק מגוון רחב של צבעים לשימוש במדיה של 4K ו-8K. Rec2020 הוא עוד מכלול מבוסס-RGB, גדול יותר מ-display-p3, אבל פחות נפוץ בקרב צרכנים כמו Display P3.

יתרונות

• צבעים באיכות Ultra HD.

חסרונות

• פחות נפוץ בקרב צרכנים (עדיין).
• לא נמצא בדרך כלל במכשירים ניידים או בטאבלטים.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB {#a98-rgb}

פורמט A98 RGB של Adobe 1998 RGB הוא מציע יותר צבעים מאשר sRGB, בעיקר בגוונים ציאן וירוק.

יתרונות

• גדול יותר ממרחבי הצבעים sRGB ו-Display P3.

חסרונות

• זה לא מרחב משותף שמעצבים דיגיטליים עבדו בו.
• אין הרבה אנשים שמעבירים לוחות צבעים מ-CMYK.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhoto RGB

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

יתרונות

• שינויי גוון מינימליים כשיש שינוי בבהירות.
• צבעי יסוד עזים.

חסרונות

• כ-13% מהצבעים שלה הם דמיוניים, כלומר לא נמצאים בספקטרום הגלוי האנושי.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

מרחב הצבעים CIE XYZ כולל את כל הצבעים שגלויים לאדם עם ראייה ממוצעת. לכן הוא משמש כהפניה סטנדרטית של מרחבי צבעים אחרים. Y הוא מידת הארה, X ו-Z הם כרומות אפשריות בתוך בהירות ה-Y.

ההבדל בין d50 ל-d65 הוא הנקודה הלבנה, שבה d50 משתמש בנקודות הלבנות d50, ו-d65 משתמש בנקודה הלבנה של d65.

מונח מפתח: נקודה לבנה היא תכונה של מרחב צבעים, שבה בתוך המרחב נמצא לבן אמיתי. במסכים אלקטרוניים, D65 היא הנקודה הלבנה הנפוצה ביותר, והיא קצרה ל-6,500 קלווין. בהמרת צבעים, חשוב שהנקודות הלבנות יתאימו כדי שלא תהיה השפעה על טמפרטורת הצבעים (חמימות או קרות).

יתרונות

• תרחישים לדוגמה שימושיים לגישה לאור לינארי.
• מצוין לשילוב צבעים פיזי.

חסרונות

• לא לינאריים באופן מובן כמו Lch, oklch, lab ו-oklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

מרחבי צבעים בהתאמה אישית

המפרט של CSS Color 5 כולל גם דרך ללמד את הדפדפן מרחב צבעים מותאם אישית. זהו פרופיל ICC שמסביר לדפדפן איך לפענח צבעים.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

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

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

אינטרפולציית צבע

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

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

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

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

מה חדש באינטרפולציית צבעים

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

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

ואז מה קורה כשעוברים מצבע במרחב אחד לצבע במרחב אחר לגמרי:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

למרבה המזל, המפרט של Color 4 כולל הוראות לדפדפנים איך לטפל באינטרפולציות האלה של מרחב צבעים צולב. ב-.gradient, דפדפנים מבחינים במרווחי הצבעים המבדלים ומשתמשים בברירת המחדל של מרחב הצבעים oklab.

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

פחות פסים בזכות צבע של 16 ביט

לפני שהצבעים האלה נשמרו, כל הצבעים נשמרו במספר שלם אחד של 32 סיביות כדי לייצג את כל ארבעת הערוצים: אדום, ירוק, כחול ואלפא. מדובר ב-8 ביט לכל ערוץ וב-2^ של 24 צבעים אפשריים (בהתעלמות מגרסת האלפא). 2 ^ 24 = 16,777,216, "מיליוני צבעים".

אחרי שהצבע הזה הופעל, ארבעה ערכי נקודות צפות של 16 ביט, לכל ערוץ יש נקודה צפה (floating) משלו במקום להיות מקובצים יחד. מדובר בסה"כ נתונים של 64 ביט, שהתוצאה שלהם היא יותר ממיליוני צבעים.

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

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

שליטה באינטרפולציה

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

linear-gradient(to right, #94e99c, #e06242)

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

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

ציון עצירות נוספות הדרגתיות כדי להימנע מהאזור המת

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

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

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

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

אמנם הכלי עושה עבודה מעולה, אבל מה אם תוכלו לקבל שליטה דומה או גדולה יותר ישירות מ-CSS?

כיוון אינטרפולציית הצבע

בצבע 4 נוספה האפשרות לשלוט באסטרטגיה של אינטרפולציית גוון, והיכולת לעקוף את האזור המתים (:wink:). חשבו על זווית גוון וחשבו על הדרגה של 2 עצירות שמשנה רק את הזווית, תוך שינוי הגוון מ-140deg ל-240deg.

אינטרפולציית גוון קצרה לעומת גוון ארוך יותר

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

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

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

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

ה-Codepen שלמעלה השתמש ב-ColorJS כדי להדגים את התוצאה הצפויה. שירות ה-CSS שתכתבו כדי להשיג את אותו תוצאה בלי ספריית JavaScript יהיה:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

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

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

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

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

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

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

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

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

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

אכיפת מינימום

קיימים תרחישים שבהם צבע עשוי לבקש משהו מחוץ ללוח. כדאי לבחור את הצבע הבא:

rgb(300 255 255)

הערך המקסימלי לערוץ צבעים במרחב הצבעים rgb הוא 255, אבל כאן ציינת 300 לאדום. מה קורה אכיפת מינימום.

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

בחירת מרחב צבעים

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

אם היה מרחב אחד הכי טוב, לא היו מוצגים כל כך הרבה מרחבים חדשים.

עם זאת, אפשר לומר שהמרחבים של CIE – lab, oklab, lch ו-oklch – הם המקומות שבהם אני מתחיל. אם התוצאה שלהם לא תואמת למה שחיפשתי, אבדוק מרחבים אחרים. לשילוב צבעים וליצירת הדרגות, אני מסכים/ה עם בחירת ברירת המחדל למפרט oklab. למערכות צבעים ולצבעים כלליים של ממשק המשתמש, אהבתי את oklch.

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

1. OKLCH ב-CSS: למה עברנו מ-RGB ומ-HSL על ידי אנדריי סיטניק
2. פורמטים של צבעים מאת ג'וש וו. קומאו
3. OK, OKLCH מאת כריס קוייר

השלבים הבאים

עכשיו, אחרי שקראתם על מרחבי הצבעים והכלים החדשים, תוכלו לעבור לצבעי HD.

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

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