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

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

Adam Argyle

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

https://almanac.httparchive.org/en/2022/css#colors

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

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

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

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

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

סקירה כללית

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

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

אפשר לראות תצוגה מקדימה ב-Codepen

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

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

שתי תערובות הצבעים המובילות הן ב-sRGB עם צבעים ב-sRGB. שני תמהילי הצבעים התחתונים נמצאים ב-Display p3. ל-Display p3 יש צבעים ססגוניים יותר והמיקסים מניבים תמונה בשחור-לבן באמצע. sRGB נראה קצת לא רוויי והמיקסים שבאמצע לא נראים בצבעי שחור-לבן.
https://codepen.io/web-dot-dev/pen/poZgXQb

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

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

מהו מגוון צבעים?

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

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

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

טווח הצבעים הוויזואלי של בני אדם

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

מקור: ויקיפדיה

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

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

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

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

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

https://en.wikipedia.org/wiki/HSL_and_HSV

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

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

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

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

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

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

למעלה מוצגת קבוצת החלקיקים ב-sRGB שמתאימה למרחב הצבע של קוביית RGB מקור התמונה

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

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

מאז שנות ה-2000, אפשר להשתמש באפשרויות הבאות לכל מאפייני ה-CSS שמקבלים צבע כערך: 16 עשרונית (מספרים 16 עשרוניים), rgb(), rgba(), לפי שם כמו hotpink או באמצעות מילות מפתח כמו currentColor.

בסביבות 2010, בהתאם לדפדפן שלכם, שירות CSS עשוי להשתמש בצבעי hsl(). לאחר מכן, ב-2017, הופיע קוד הקסדצימלי עם אלפא. לבסוף, רק לאחרונה נוספה תמיכה ב-hwb() בדפדפנים.

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

HEX

תמיכה בדפדפנים

• 1
• 12
• 1
• 1

מקור

מרחב הצבעים ההקסדצימלי מציין 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

תמיכה בדפדפנים

• 1
• 12
• 1
• 1

מקור

מרחב הצבעים 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% / .5);

  --empty-channels: rgb(none none none);
}

HSL

תמיכה בדפדפנים

• 1
• 12
• 1
• 3.1

מקור

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

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

HWB

תמיכה בדפדפנים

• 101
• 101
• 96
• 15

מקור

מרחב צבעים נוסף של sRGB gamut שמבוסס על האופן שבו בני אדם מתארים צבעים הוא 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 Color Module Level 4 מ-W3C

• CSS Color Module Level 5 מ-W3C

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

• טוב יותר מ-Labs? צמצום של סולם הצבעים: CIE Lab ו-OKLab

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

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

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

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

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

• מרחבי צבעים, מאת Hannah Weller

• צבעים בסולם רחב ב-CSS באמצעות Display-P3

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

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

• מרחבי צבעים של Bartosz Ciechanowski

וכלים:

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