CSS Color 4 מספק באינטרנט כלים ויכולות של מבחר צבעים רחב: יותר צבעים, פונקציות שינוי צבעים והדרגה טובה יותר.
במשך יותר מ-25 שנה, sRGB (כחול אדום-ירוק רגיל) היה לוח הצבעים היחיד של צבעים וגרפים של CSS, עם אפשרויות של מרחב צבעים כמו rgb(), hsl() והקסדצימלי. זהו מכלול הצבעים הנפוץ ביותר בין המסכים. התרגלנו מאוד לציין צבעים במערך הזה.
ככל שיש יותר יכולת להציג בתצוגות מגוון רחב של צבעים, ל-CSS יש צורך בדרך לציון צבעים מתוך הטווחים הרחבים האלה. בפורמטים הנוכחיים של הצבעים אין שפה לטווחי צבעים רחבים.
אם שירות ה-CSS לא יתעדכן אף פעם, הוא ייתקע בטווחי הצבעים של שנות ה-90 באופן סופי, ולא יאלץ להתאים אף פעם את מבחר המוצרים הרחב שנמצאים בתמונות ובסרטונים. לכוד, מוצגים רק 30% מהצבעים שהעין האנושית יכולה לראות. תודה ל-CSS Color Level 4 שעזר לנו להימלט מהמלכוד הזה. נכתב בעיקר על ידי לאה ורו וכריס לילי.
ב-Chrome 111 יש תמיכה בלוחות צבעים ובמרחבי צבעים של CSS Color 4. ההצטרפות מצטרפת ל-Safari, שמקבל תמיכה ב-display-p3 מאז 2016. שירות CSS יכול עכשיו לתמוך במסכים באיכות HD (באיכות גבוהה), לציון צבעים מטבלאות איכות HD, תוך מתן מרחבי צבעים עם התמחות מסוימת. במדריך הזה נסביר איך להתחיל לנצל את היתרונות של עולם הצבעים החדש.
רוצים לנסות בעצמכם?
בדפדפנים תומכים, יש 50% יותר צבעים לבחירה! חשבתם ש-16 מיליון צבעים נשמעו המון, חכו עד שתראו כמה צבעים חלק מהמרחבים החדשים יכולים להופיע. בנוסף, כדאי לחשוב על כל ההדרגתיות שהשתלבה כי לא היה מספיק עומק ביט, וגם הבעיה נפתרה.
בנוסף לצבעים רבים יותר, שכן סביר שהצבעים הססגוניים ביותר יכולים להיות במסך, מרחבי צבעים חדשים מספקים שיטות וכלים ייחודיים לניהול וליצירה של מערכות צבעים. לדוגמה, עד עכשיו היה לנו HSL וערוץ "lightness" שלו, שהיה מפתחי האינטרנט הטובים ביותר. ב-CSS, יש לנו עכשיו את "מרווח התאורה" של LCH.
בנוסף, יש שדרוגים הדרגתיים וערבוב: תמיכה במרחב צבעים, אפשרויות אינטרפולציית גוונים ופחות פסים. בתמונה הבאה מוצגים חלק מהשדרוגים של השילוב. שתי תערובות הצבעים העליונות הן ב-sRGB. שתי תערובות הצבעים התחתונים מופיעות בתצוגת p3. ל-Display p3 יש צבע ססגוני יותר, והתמהילים מניבים שחור-לבן מלא באמצע. כש-sRGB נראה קצת לא רווי, והתערובות שבאמצע הן לא תוצאות מושלמות בשחור-לבן.
https://codepen.io/web-dot-dev/pen/poZgXQb
במדריך הזה נסביר על המקומות שבהם צבע היה, לאן הוא הולך ואיך שירות CSS יאפשר למפתחי אתרים לנהל צבע ויתמוך בהם.
סקירה
הבעיה עם צבע והאינטרנט היא ש-CSS אינו מוכן לחדות גבוהה, בעוד שהמסכים של רוב האנשים נמצאים בכיסים, בכיסים או בהתקנה על קיר, הם מערכים רחבים ומוכנים לצבעים באיכות גבוהה. יכולות הצבעים של המסכים גדלו מהר יותר מ-CSS, ועכשיו שירות ה-CSS נמצא כאן כדי להתעדכן.
יש הרבה יותר מ"עוד צבעים". בסוף המאמר תוכלו לציין צבעים נוספים, לשפר את ההדרגתיות ולבחור את מרחבי הצבעים ולוחות הצבעים הטובים ביותר לכל משימה.
מהו סולם צבעים?
לוח צבעים מייצג את הגודל של משהו. הביטוי "מיליוני צבעים" הוא הערה לגבי לוח הצבעים של המסך, או טווח הצבעים שנבחר ממנו. בתמונה הבאה מוצגת השוואה בין שלושה מסגרות, וככל שהגודל גדול יותר, כך יש יותר צבעים.
גם לסולם צבעים יכול להיות שם. כמו כדורסל לעומת בייסבול, או ספל קפה אוורור לעומת גרנד גרנדה; שם של גודל יכול לעזור לאנשים להתקשר. אם תקראו את השמות של לוחות הצבעים האלה תוכלו לתקשר ולהבין במהירות מגוון של צבעים.
מאמר זה מציג שבעה פלטפורמות הערכה חדשות, שלכולן יש טווח רחב יותר מ-sRGB, ומתוארות התכונות השונות שלהן כדי לעזור לכם לבחור באיזה מהם להשתמש:
מכלול ויזואלי אנושי
הרבה פעמים, משווה בין סולם הצבעים לבין מכלול הצבעים האנושי. אנחנו סבורים שהעין האנושית יכולה לראות את כל הצבעים. לרוב, HVS מוצג עם תרשים כרומטיות, כך:
הצורה החיצונית ביותר היא מה שאנחנו יכולים לראות כבני אדם, והמשולש הפנימי הוא טווח הפונקציות rgb(), כלומר מרחב הצבעים sRGB.
כפי שראית משולשים למעלה, השוואת גדלים של מערכים, כך תמצא משולשים למטה. זו הדרך של התעשייה להסביר את לוחות הצבעים ולהשוות ביניהם.
מהו מרחב צבעים?
מרחבי צבעים הם סידורים של לוח צבעים שיוצרים צורה ושיטת גישה לצבעים. רבות מהן הן צורות תלת-ממדיות פשוטות כמו קוביות או גלילים. מערך הצבעים קובע אילו צבעים יהיו זה לצד זה ואיך יפעלו הגישה לצבעים ואינטרפולציה שלהם.
RGB דומה למרחב צבעים מלבני, שאליו ניתן לגשת לצבעים על ידי ציון קואורדינטות בשלושה צירים. HSL הוא מרחב צבעים גלילי, שבו ניתן לגשת לצבעים באמצעות זווית גוון וקואורדינטות על שני צירים
המפרט של level 4 כולל 12 מרחבי צבעים חדשים לחיפוש צבעים מ-7 לוחות הזמנים החדשים ששותפו בעבר:
אלה הם בנוסף ל-4 מרחבי הצבעים שהיו זמינים בעבר:
סיכום של לוח הצבעים ומרחב הצבעים
מרחב צבעים הוא מיפוי של צבעים, שבו סולם צבעים הוא טווח של צבעים. חשוב על סולם צבעים כסכום כולל של חלקיקים ומרחב צבעים כבקבוק שנוצר כדי להכיל את טווח החלקיקים הזה.
לפניכם תצוגה אינטראקטיבית של אלכסיי ארדוב עם מרחבים של צבעים. בהדגמה הזו אפשר להצביע, לגרור ולשנות את מרחק התצוגה. שנו את מרחב הצבעים כדי לראות תצוגה חזותית של מרחבים אחרים.
- השתמשו בסולם צבעים כדי לדבר על מגוון צבעים, כמו טווח נמוך או מכלול צר לעומת טווח גבוה או מכלול רחב.
- השתמשו במרווחי צבעים כדי לדבר על סידורי צבעים, על תחביר שמשמש לציון צבע, לשינויי צבע ואינטרפולציה באמצעות צבע.
איך אפשר לגשת ליותר צבעים, מרחבים חדשים ותוצאות של ניפוי באגים
CSS Color 4 מתווה כמה תכונות וכלים חדשים ל-CSS ולצבע. ראשית, סיכום של המקומות שבהם הצבע היה לפני התכונות החדשות האלה. לאחר מכן סקירה כללית על מרחבי הצבעים, התחבירים והכלים החדשים.
ב-Codepen הבא מוצג כל תחבירי הצבע החדש והישן יחד:
סקירה של מרחבי הצבעים הקלאסיים
מאז שנות ה-2000, אפשר להשתמש במאפיינים הבאים לכל מאפייני CSS שמקבלים צבע כערך: הקסדצימלי (מספרים הקסדצימליים), rgb(), rgba(),
לפי שם כמו hotpink או עם מילות מפתח כמו
currentColor.
בסביבות 2010, בהתאם לדפדפן שלכם, CSS יכול להשתמש בצבעי hsl(). לאחר מכן, ב-2017, הופיע הקסדצימלי עם אלפא. ולאחרונה, רק לאחרונה, hwb() התחילה לקבל תמיכה בדפדפנים.
כל מרחבי הצבעים הקלאסיים האלה מפנים לצבע באותו משטח, sRGB.
הקסדצימלי
מרחב הצבעים ההקסדצימלי מציין את R, G, B ו-A עם מספרים הקסדצימליים. בדוגמאות הבאות של הקוד מופיעות כל הדרכים שבהן התחביר יכול לציין אדום, ירוק וכחול וגם אטימוּת.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
מרחב הצבעים RGB כולל גישה ישירה לערוצים האדום, הירוק והכחול. היא מאפשרת לציין סכום בין 0 ל-255 או כאחוז בין 0 ל-100. התחביר הזה היה קיים לפני שנרמול תחביר מסוים במפרטים, כך שתראו תחבירים ללא פסיקים ופסיקים באופן כללי. בהמשך אין יותר צורך להשתמש בפסיקים.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
HSL (רוויית גוון ובהירות) הוא אחד ממרחבי הצבעים הראשונים שנועדו להתרכז בשפה ובתקשורת אנושית. הוא מציע את כל הצבעים במערך ה-sRGB, בלי שהמוח צריך לדעת איך מקיימים אינטראקציה בין אדום, ירוק וכחול. בדומה ל-RGB, גם במקור היו פסיקים בתחביר, אבל אין יותר צורך להשתמש בפסיקים כדי להתקדם.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
חומרה
מרחב צבעים נוסף של סולם sRGB שמכוון לאופן שבו בני אדם מתארים צבע הוא HWB (גוון, לבן, שחור). המחברים יכולים לבחור גוון ולשלב בין הלבן או השחור כדי למצוא את הצבע הרצוי.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
נעים להכיר: מרחב הצבעים החדש באינטרנט
במרחבי הצבעים הבאים ניתן לגשת ללוחות צבעים גדולים יותר מ-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%.
יתרונות
- כמעט כל המסכים תומכים בטווח של מרחב הצבעים הזה.
- תמיכה בכלי העיצוב.
חסרונות
.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()
החלופה הלינארית הזו ל-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
במקום הראשון בפוסט הזה נעשה שימוש בתחביר לגישה לצבעים מחוץ ללוח ה-RGB! הוא גם הראשון שעוזר ליצור בקלות רבה יותר צבעים מלוח צבעים עבור תצוגה. הסיבה לכך היא שכל צבעי החלל של CIE (lch, oklch, lab, oklab) יכולים לייצג את כל קשת הצבעים הגלויה של האדם.
המודל של מרחב הצבעים הזה מבוסס על ראייה אנושית ומספק תחביר כדי לציין כל אחד מהצבעים האלה ועוד. ערוצי ה-LCH מתאפיינים בקלילות, בכרומה ובגוון. גוון הוא זווית, כמו ב-HSL ו-HWB. 'בהירות' היא ערך בין 0 ל-100, אבל לא כמו הבהירות של HSL, היא בהירות מיוחדת, 'לינארית', שממוקדת בבני אדם. 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 של 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.
יתרונות
- תרחישים לדוגמה שימושיים לגישה לאור לינארי.
- מצוין לשילוב צבעים פיזי.
חסרונות
- לא לינאריים באופן מובן כמו 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);
}
לא רואים את ההדגמה של Codepen?
ואז מה קורה כשעוברים מצבע במרחב אחד לצבע במרחב אחר לגמרי:
.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%));
}
לא רואים את ההדגמה של Codepen?
למרבה המזל, המפרט של 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)
תצוגה מלמעלה למטה, של גליל 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%)
);
}
כדי לסגור את אינטרפולציית הגוון, הנה מגרש משחקים כיפי שבו אפשר לשנות את הגוון בין שתי עצירות צבע ולראות את ההשפעות של בחירת אינטרפולציית גוון, כמו גם איך מרחבי צבעים משנים את ההדרגתיות של התוצאות. האפקטים יכולים להיות שונים מאוד. חשבו על זה בתור ארבעה טריקים חדשים שנכנסו עכשיו לרצועת הכלים של הצבעים.
צבעים הדרגתיים במרחבי צבעים שונים
כל מרחב צבעים, על סמך הצורה וסידור הצבעים הייחודיים שלו, יוביל להדרגתיות שונה. עיין בדוגמאות הבאות, במיוחד בכיתוב "כחול ללבן". בדקו איך כל מרחב צבעים מתייחס לכך באופן שונה. שימו לב כמה צבעים מופיעים בסגול באמצע, הפעולה הזו נקראת 'שינוי גוון' בזמן אינטרפולציה.
לא רואים את ההדגמה של Codepen?
התמונה שמוצגת היא רק דוגמה אחת מתוך דוגמאות רבות מ-Codepen. כדאי לנסות את Canary או Safari Tech Preview כדי לראות אותם בעצמכם.
חלק מההדרגתיות במרחבים האלה יהיו מלאי חיים יותר מאחרים, או שהם יעברו פחות דרך אזורים מתים.
במרחבים כמו 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%));
}
לא רואים את ההדגמה של Codepen?
בדוגמה הזו נעשה שימוש באותם צבעים ב-hwb, אבל הוא מציין את מרחב הצבעים לאינטרפולציה ל-hwb או ל-oklab. hwb הוא מרחב צבעים נהדר עם חיוניות גבוהה
אבל אזורים מתים או כתמים בהירים (ראו את הנקודה החמה ציאן בדוגמה העליונה). oklab מתאים במיוחד להדרגתיות לינארית באופן תחושה שנשארים רוויים. התכונה הזו כיפית מאוד, כי אפשר לנסות כמה מרחבי צבעים שונים כדי לראות איזה גוון מדורג הכי מתאים לך.
הנה Codepen שעורך ניסויים עם הדרגתיים ומרחבי צבעים, ומשלבים אסטרטגיות שונות כדי לחקור את האפשרויות. גם המעבר משחור ללבן שונה בכל מרחב צבעים!
לא רואים את ההדגמה של Codepen?
אכיפת מינימום
קיימים תרחישים שבהם צבע עשוי לבקש משהו מחוץ ללוח. כדאי לבחור את הצבע הבא:
rgb(300 255 255)
הערך המקסימלי לערוץ צבעים במרחב הצבעים rgb הוא 255, אבל כאן ציינת
300 לאדום. מה קורה אכיפת מינימום.
הלחיצה היא פעולה שבה פשוט מסירים מידע מיותר. 300 יהפוך ל-255
פנימי במנוע הצבע. עכשיו הצבע הוכנס לגבולות שלו.
בחירת מרחב צבעים
אנשים רבים, אחרי שהם לומדים על מרחבי הצבעים האלה וההשפעות שלהם, מרגישים מוצפים ורוצים לדעת באיזה "אחד" לבחור. מהמחקרים והניסיון שלי, אני לא רואה מרחב צבעים אחד לכל המשימות שלי. לכל אחד יש רגעים שבהם הוא מניב את התוצאה הרצויה.
אם היה מרחב אחד הכי טוב, לא היו מוצגים כל כך הרבה מרחבים חדשים.
עם זאת, אפשר לומר שהמרחבים של CIE – lab, oklab, lch ו-oklch – הם המקומות שבהם אני מתחיל. אם התוצאה שלהם לא תואמת למה שחיפשתי, אבדוק מרחבים אחרים. לשילוב צבעים וליצירת הדרגות, אני מסכים/ה עם בחירת ברירת המחדל למפרט oklab. למערכות צבעים ולצבעים כלליים של ממשק המשתמש, אהבתי את oklch.
ריכזנו כאן כמה מאמרים שבהם אנשים שיתפו את אסטרטגיות הצבעים המעודכנות שלהם בזכות מרחבי הצבעים והתכונות החדשות. לדוגמה, אנדריי סיטניק עבד על oklch, אולי הם ישכנעו אתכם לעשות את אותו הדבר:
- OKLCH ב-CSS: למה עברנו מ-RGB ומ-HSL על ידי אנדריי סיטניק
- פורמטים של צבעים מאת ג'וש וו. קומאו
- OK, OKLCH מאת כריס קוייר
עובר לצבע CSS באיכות HD
יש שתי אסטרטגיות עיקריות לעדכון הצבע של פרויקט אינטרנט כדי לתמוך במסכים רחבים:
פגיעות חיננית
שימוש במרחבי הצבעים החדשים ומאפשר לדפדפן ולמערכת ההפעלה להבין איזה צבע להציג בהתאם ליכולות התצוגה.שיפור הדרגתי
ניתן להשתמש ב-@supportsוב-@mediaכדי להעריך את יכולות הדפדפן של המשתמש, ואם התנאים מתקיימים, מומלץ לספק צבעים רחבים.
אם הדפדפן לא מבין צבע display-p3:
color: red;
color: color(display-p3 1 0 0);
אם הדפדפן מבין צבע display-p3:
color: red;
color: color(display-p3 1 0 0);
לכל אחת מהן יש יתרונות וחסרונות. הנה רשימה קצרה של יתרונות וחסרונות:
ירידה חיננית
- יתרונות
- המסלול הפשוט ביותר.
- הדפדפן ימפה לוח או יצמד ל-sRGB אם לא תצוגת מערכים רחבים, לכן האחריות היא על הדפדפן.
- חסרונות
- הדפדפן עשוי ללחוץ על משטח או משטח למיפוי לצבע שאינך אוהב.
- יכול להיות שהדפדפן לא יבין את הבקשה להוספת צבע וייכשל לגמרי. עם זאת, אפשר לצמצם את התופעה הזו על ידי ציון פעמיים של הצבע, וכך לאפשר למפל לחזור לצבע הקודם כפי שהוא מבין.
שיפור הדרגתי
- יתרונות
- שליטה טובה יותר ברמת דיוק צבעים מנוהלת.
- שיטה נוספת שלא משפיעה על הצבעים הנוכחיים.
- חסרונות
- יש לנהל שני תחבירי צבע נפרדים.
- עליך לנהל שני מערכי צבעים נפרדים.
המערכת בודקת אם יש תמיכה בלוח צבעים ובמרחב צבעים
הדפדפן מאפשר לבדוק אם יש תמיכה ביכולות טווח רחבות ובתמיכה בתחביר צבעים מ-CSS ומ-JavaScript. טווח הצבעים המדויק שיש למשתמש לא זמין. ניתן תשובה כללית כדי לשמור על פרטיות המשתמש. עם זאת, יש תמיכה במרחב הצבעים המדויק, כי היא לא ספציפית ליכולות של חומרת המשתמש, כמו gamut.
שאילתות תמיכה בלוח צבעים
דוגמאות הקוד הבאות בודקות את טווח הצבעים של המשתמש המבקר בתצוגה שלו.
בדיקה משירות CSS
הפנייה הכי פחות ספציפית היא שאילתת המדיה dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
אפשר לבדוק תמיכה קרובה או יותר באמצעות שאילתת המדיה של color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
יש שתי שאילתות מדיה נוספות לבדיקת התמיכה:
בדיקה מ-JavaScript
ב-JavaScript, אפשר לקרוא לפונקציה window.matchMedia() ולהעביר שאילתת מדיה לצורך הערכה.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
אפשר להעתיק את הדפוס שלמעלה לשאר שאילתות המדיה.
שאילתות תמיכה בנושא מרחב צבעים
דוגמאות הקוד הבאות בודקות את הדפדפן של המשתמש המבקר ואת מבחר מרחבי הצבעים שלו.
בדיקה משירות CSS
אפשר לברר תמיכה במרחב צבעים מסוים באמצעות השאילתה @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
בדיקה מ-JavaScript
ב-JavaScript, אפשר לקרוא לפונקציה CSS.supports() ולהעביר אותה באמצעות צמד של מאפיין וערך, כדי לראות אם הדפדפן מבין אותם.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
שילוב בדיקות החומרה והניתוח
בזמן ההמתנה להטמעה של תכונות הצבע החדשות האלה בדפדפן, מומלץ לבדוק גם את יכולות החומרה וגם את יכולת ניתוח הצבע. בדרך כלל זה מה שאני עושה כדי לשפר בהדרגה צבעים ל-HD:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
צבע לניפוי באגים באמצעות כלי הפיתוח ל-Chrome
כלי הפיתוח של Chrome מעודכנים והם מצוידים בכלים חדשים שיעזרו למפתחים ליצור, להמיר ולנפות באגים בצבע HD.
בוחר הצבעים עודכן
בוחר הצבעים תומך עכשיו בכל מרחבי הצבעים החדשים. מתן אפשרות למחברים לבצע אינטראקציה עם ערכי הערוץ, בדיוק כפי שהם היו עושים זאת.
גבולות הגמוט
נוסף גם קו גבול מסולסל, שמשרטט קו בין פלטפורמות srgb ו-Display-p3. הדגשה של באיזה סולם נכללים הצבע שנבחר.
כך מחברים יכולים להבחין באופן חזותי בין צבעים באיכות HD לבין צבעים שאינם באיכות HD.
היא שימושית במיוחד בעבודה עם הפונקציה color() ועם מרחבי הצבעים החדשים, כי הם יכולים להפיק צבעים שאינם באיכות HD וגם צבעים באיכות HD. כדי לבדוק באיזה סולם צבעים, תוכלו לפתוח את בוחר הצבעים ולראות!
המרת צבעים
כבר שנים רבות בכלי הפיתוח ניתן להמיר צבעים בין פורמטים נתמכים כמו hsl, hwb, RGB ו-hex. shift + click על דוגמית צבע מרובעת בחלונית הסגנונות על מנת לבצע את ההמרה. כלי הצבעים החדשים לא רק מציגים המרות מחזוריות, אלא יוצרים חלון קופץ שבו מחברים יכולים לראות ולבחור את ההמרה הרצויה.
בזמן ההמרה, חשוב לדעת אם ההמרה נחתכה כדי להתאים לשטח. בכלי הפיתוח מופיע עכשיו סמל אזהרה לצבע לאחר ההמרה, כדי להזהיר אתכם לגבי החיתוך.
בהודעה האחרונה שלנו תוכלו למצוא מידע נוסף על תכונות נוספות לניפוי באגים בשירות ה-CSS בכלי הפיתוח.
סיכום
השימוש במרחבי צבע שאינם sRGB באינטרנט נמצא בתחילת דרכם, אבל אני מאמינה שעם הזמן נראה עלייה בשימוש בקרב מעצבים ומפתחים. למשל, חשוב לדעת על איזה מרחב צבעים לבנות מערכת עיצובית כדי להתבלט ברצועת כלים של יוצרים. לכל מרחב צבעים יש תכונות ייחודיות והסיבה לכך שהוא נוסף למפרט ה-CSS, ואפשר להתחיל בקטן ולהוסיף אותם לפי הצורך.
נהנים לשחק עם צעצועי הצבע החדשים האלה! חיוניות יותר, מניפולציות עקביות ואינטרפולציות באופן כללי, הן מספקות חוויה צבעונית יותר למשתמשים.
מקורות מידע נוספים
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/