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

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

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

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

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

• sRGB לינארי
• LCH
• okLCH
• LAB
• okLAB
• רשת המדיה p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

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

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

הפונקציה color()

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הגרסה החדשה 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 Gamut, בDisplay P3 Gamut או ב-Rec2020 Gamut. עד 77.6% מהספקטרום הגלוי.

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() {#inline-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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

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

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

זהירות: Chroma יכולה לאפשר למחברים בקלות לחרוג מטווח התצוגה של המסך. זהירות עם ערכי C עם כרומה גבוה.

LAB

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

מרחב צבעים נוסף שניתן לגשת אליו באמצעות סולם 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

תמיכה בדפדפן

• 111
• 111
• 113
• 15.4

מקור

מרחב הצבעים הזה מתקן ל: LCH. וכמו LCH, (L) ממשיך לייצג בהירות ליניארית שנראית לינארית, ל-Chroma ול-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

תמיכה בדפדפן

• 111
• 111
• 113
• 15.4

מקור

המרחב המשותף הזה מתקן ל-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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הערה: הצבעים נמצאים בDisplay P3 Gamut. 45.5% מהספקטרום הגלוי.

סולם P3 ומרחב הצבעים של המסך הפכו לפופולריים מאז שנתמכים על ידי Apple מאז 2015 ב-iMac. Apple תומכת גם ב-Display-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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הערה: הצבעים נמצאים בRec2020 Gamut. 77.6% מכל הספקטרום הגלוי.

Rec2020 הוא חלק מהתנועה אל UHDTV (טלוויזיה באיכות אולטרה-HD), מגוון רחב של צבעים לשימוש במדיה 4k ו-8k. Rec2020 כבר כאן מטווח מבוסס RGB, גדול יותר מ-Display-p3, אך לא כמעט נפוץ בקרב צרכנים ברשת המדיה (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}

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הערה: הצבעים נמצאים בRGB 98 Gamut. 52.1% מהספקטרום הגלוי.

Short עבור Adobe 1998 RGB, A98 RGB נוצר על ידי Adobe כדי להציג את רוב צבעים שניתן להשיג ממדפסות CMYK. יש יותר צבעים מ-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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הערה: הצבעים נמצאים בProPhoto Gamut. 90% מכל הספקטרום הגלוי.

מרחב המקרא הרחב הזה, שנוצר על ידי 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

תמיכה בדפדפן

• 111
• 111
• 113
• 15

מקור

הערה: הצבעים נמצאים בHVS Gamut. 100% מספקטרום גלוי אנושי (HVS).

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

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

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

יתרונות

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

חסרונות

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

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

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

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

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

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

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

@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%));
}

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

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

פחות פסים הודות לצבע של 16 סיביות

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

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

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

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

מקור התמונה

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

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

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

(הדגמה מדומה)
תצוגה מלמעלה למטה של גליל HSL עם קו בין עצירות הצבע

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

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

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

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

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

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

(הדגמה מדומה)
תצוגה מלמעלה למטה של גליל HSL עם קו מעוקל עם 9 עצירות בצבעים

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

אמנם הכלי עושה עבודה נהדרת, אבל אולי כדאי ישירות מ-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%)
  );
}

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

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

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

במרחבים האלה יש הדרגתיות של צבעי מים עזים יותר מאחרים או פחות דרך אזורים מתים. מרחבים כמו 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. פורמטים של צבעים מאת ג'וש וו. Comeau
3. OK, OKLCH מאת כריס קוייר

השלבים הבאים

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

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

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