מדריך צבעים ב-CSS באיכות גבוהה

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

במשך יותר מ-25 שנה, sRGB (כחול אדום-ירוק רגיל) היה לוח הצבעים היחיד של צבעים וגרפים של CSS, עם אפשרויות של מרחב צבעים כמו rgb(), hsl() והקסדצימלי. זהו מכלול הצבעים הנפוץ ביותר בין המסכים. התרגלנו לציין צבעים בתוכו.

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

אם שירות ה-CSS לא יתעדכן אף פעם, הוא ייתקע בטווחי הצבעים של שנות ה-90 באופן סופי, ולא יאלץ להתאים אף פעם את מבחר המוצרים הרחב שנמצאים בתמונות ובסרטונים. Trended (לכוד), ומציג רק 30% מהצבעים שהעין האנושית יכולה לראות. תודה ל-CSS Color Level 4 שעזרנו לנו להימלט ממנו. ההודעה נכתבה בעיקר על ידי לאה וורו וכריס לילי.

Chrome תומך בלוחות צבעים ובמרחבי צבעים של CSS Color 4. שירות CSS יכול עכשיו לתמוך במסכים של HD (איכות גבוהה), שמפרט צבעים מטבלאות איכות HD, ומציע גם מרחבי צבעים עם התמחות.

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

סקירה כללית

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

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

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

בתמונה הבאה אפשר לראות חלק מהשדרוגים של השילוב.

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

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

מהו סולם צבעים?

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

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

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

מכלול ויזואלי אנושי

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

הצורה החיצונית ביותר היא מה שאנחנו יכולים לראות כבני אדם, והמשולש הפנימי הוא טווח הפונקציות rgb(), כלומר מרחב הצבעים sRGB.

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

מהו מרחב צבעים?

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

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

המפרט של רמה 4 כולל 12 מרחבי צבע חדשים לחיפוש צבעים. אלה הם בנוסף ל-4 מרחבי הצבעים שהיו זמינים בעבר:

• הקסדצימלי
• RGB
• HSL
• HWB

סיכום של לוח הצבעים ומרחב הצבעים

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

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

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

סקירה של מרחבי הצבעים הקלאסיים {#classic-color-spaces}

CSS Color 4 מתווה כמה תכונות וכלים חדשים ל-CSS ולצבע. ראשית, סיכום של המקומות שבהם הצבע היה לפני התכונות החדשות האלה.

מאז שנות ה-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%);
}

השלבים הבאים

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

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

משאבים

קוראים את המאמרים שלנו בנושא רמת צבע 5.

• תחביר צבע יחסי של CSS
• שילוב צבעים בשירות CSS

בנוסף, תוכלו למצוא מקורות מידע נוספים באינטרנט:

• מודול צבע CSS רמה 4 מ-W3C

• מודול צבע CSS רמה 5 מ-W3C

• צבעי LCH ב-CSS: מה, למה ואיך?

• טוב יותר מ-Lab? הפחתת אומדנים: CIE Lab ו-OKLab

• מעבר לצבעים עשירים יותר באינטרנט

• Okhsv ו-Okhsl: שני מרחבי צבע חדשים לבחירת צבע

• למעבר לצבעים עשירים יותר ב-Chromium (PDF)

• LCH הוא מרחב הצבעים הטוב ביותר!

• עיצוב מערכות צבע נגישות

• Color Spaces, מאת האנה וולר

• צבע טווח רחב ב-CSS עם Display-P3

• מרחב צבעים CIE 1931

• פורמטים של צבעים ב-CSS

• מרחבי צבעים של ברטוש צ'יחנוסקי

וכלים:

• afc163.github.io/color3d/
• המחשה חזותית של משוואות
• מחולל צבעים הדרגתיים