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

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

Adam Argyle

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

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

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

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

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, והתצוגות לרוב האנשים יש בכיסים, בברכיים או על הקירות הם מטווח רחב, מוכנים לצבעים באיכות HD. יכולת הצבעים של המסכים הפעילות גדלה מהר יותר משירות CSS. עכשיו שירות CSS יכול להתעדכן.

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

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

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

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

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

סולם חזותי אנושי

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

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

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

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

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

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

RGB הוא כמו מרחב צבעים מלבני, שבו אפשר לגשת לצבעים על ידי ציון על שלושה צירים. 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 שמקבלים צבע כערך: הקסדצימלי (מספרים הקסדצימליים), rgb(), rgba(), מאת בשם hotpink, או עם מילות מפתח כמו currentColor

בסביבות 2010, בהתאם לדפדפן שלך, שירות CSS יכול להשתמש hsl() צבעים. וב-2017, הופיע hex עם alpha. אחרון, בלבד לאחרונה, 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% / 50%);

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

HSL

תמיכה בדפדפן

• 1
• 12
• 1
• 3.1

מקור

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

HWB

תמיכה בדפדפן

• 101
• 101
• 96
• 15

מקור

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

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

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

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

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

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

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

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

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

• מרחבי צבעים, מאת חנה וולר

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

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

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

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

וכלים:

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