צבע

הפודקאסט של CSS – 006: צבע חלק ראשון

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

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

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

צבעים מספריים

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

צבעים הקסדצימליים

h1 {
  color: #b71540;
}

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

הטווחים ההקסדצימליים הם 0-9 ו-A-F. בשימוש ברצף של 6 ספרות, הם מתורגמים לטווחים המספריים של RGB שהם 0-255. שתואמים לערוצי הצבע אדום, ירוק וכחול בהתאמה.

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

מכיוון שהסולם ההקסדצימלי הוא 0-9 ו-A-F, סביר להניח שערכי השקיפות הם לא בדיוק מה שציפיתם שיהיו. הנה כמה ערכי מפתח נפוצים שנוספו לקוד ההקסדצימלי השחור, #000000:

  • 0% אלפא (שהוא שקיפות מלאה) הוא 00: #00000000
  • 50% אלפא הוא 80: #00000080
  • 75% אלפא הוא BF: #000000BF

כדי להמיר הקסדצימלי דו-ספרתי למספר עשרוני, לוקחים את הספרה הראשונה ומכפילים אותה ב-16 (כי הקסדצימאלי הוא בסיס 16), ואז מוסיפים את הספרה השנייה. שימוש ב-BF כדוגמה ל-75% alpha:

  1. B שווה ל-11, שכאשר כפול 16 שווה ל-176
  2. F שווה ל-15
  3. 191 = 176 + 15
  4. ערך האלפא הוא 191-75% מ-255

RGB (אדום, ירוק, כחול)

h1 {
  color: rgb(183, 21, 64);
}

צבעי RGB מוגדרים באמצעות פונקציית צבע rgb(), על ידי שימוש במספרים או באחוזים כפרמטרים. המספרים צריכים להיות בטווח של 0-255 והאחוזים הם בין 0% ל-100%. RGB פועל בסולם של 0-255, לכן 255 יהיה שווה ל-100%, ו-0% ל-0%.

כדי להגדיר צבע שחור ב-RGB, צריך להגדיר אותו כ-rgb(0 0 0), שהוא אפס אדום, אפס ירוק ואפס כחול. אפשר להגדיר שחור גם כ-rgb(0%, 0%, 0%). לבן הוא בדיוק ההפך: rgb(255, 255, 255) או rgb(100%, 100%, 100%).

גרסת אלפא מוגדרת ב-rgb() באחת משתי הדרכים הבאות. מוסיפים / אחרי הפרמטרים האדומים, הירוקים והכחולים, או להשתמש בפונקציה rgba(). אפשר להגדיר את האלפא באמצעות אחוז או מספר עשרוני בין 0 ל-1. לדוגמה, כדי להגדיר צבע אלפא של 50% בדפדפנים מודרניים, צריך לכתוב: rgb(0 0 0 / 50%) או rgb(0 0 0 / 0.5). לקבלת תמיכה רחבה יותר, באמצעות הפונקציה rgba(), כותבים: rgba(0, 0, 0, 50%) או rgba(0, 0, 0, 0.5).

HSL (גוון, רוויה, בהירות)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL הם ראשי תיבות של גוון, רוויה ובהירות. Hue מתאר את הערך על גלגל הצבעים, מ-0 עד 360 מעלות, שמתחיל באדום (הוא גם 0 וגם 360). גוון של 180 או 50% יהיה בטווח הכחול. זהו המקור של הצבע שאנחנו רואים.

גלגל צבעים עם תוויות של ערכי מעלות במרווחים של 60 מעלות, כדי לעזור להמחיש בצורה חזותית מה הערך של כל זווית

הרוויה היא מידת העצמה של הגוון שנבחר. צבע ללא רוויה לחלוטין (עם רוויה של 0%) ייראה בגווני אפור. לבסוף, בהירות היא הפרמטר שמתאר את קנה המידה מלבן לשחור של אור נוסף. בהירות של 100% תמיד תסומן בלבן.

באמצעות פונקציית הצבע hsl(), מגדירים שחור אמיתי על ידי כתיבת hsl(0 0% 0%), או אפילו hsl(0deg 0% 0%). הסיבה לכך היא שפרמטר הגוון מגדיר את הדרגה של גלגל הצבעים, אם משתמשים בסוג המספר, הוא 0-360. אפשר גם להשתמש בסוג הזווית, שהוא (0deg) או (0turn). גם הרוויה וגם הקלילות מוגדרות באמצעות אחוזים.

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

האלפא מוגדר ב-hsl(), באותה דרך כמו rgb(), על ידי הוספת הפרמטר / אחרי הפרמטרים של הגוון, הרוויה והבהירות או באמצעות hsla(). אפשר להגדיר את האלפא באמצעות אחוז או מספר עשרוני בין 0 ל-1. לדוגמה, כדי להגדיר אלפא של 50% לשחור, משתמשים ב: hsl(0 0% 0% / 50%) או hsl(0 0% 0% / 0.5). באמצעות הפונקציה hsla(), כותבים: hsla(0, 0%, 0%, 50%) או hsla(0, 0%, 0%, 0.5).

מילות מפתח בצבע

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

מלבד הצבעים הרגילים, קיימות גם מילות מפתח מיוחדות:

  • transparent הוא צבע שקוף לחלוטין. זה גם הערך הראשוני של background-color
  • currentColor הוא הערך הדינמי שמחושב לפי הקשר בנכס color. אם צבע הטקסט הוא red ואז הגדרתם את border-color להיות currentColor, הוא יהיה גם אדום. אם לאלמנט שמגדירים את currentColor אין ערך עבור color, חישוב של currentColor יתבצע על ידי הקבוצה

איפה משתמשים בצבע בכללי CSS

אם נכס CSS מקבל את <color> כערך, הוא יקבל את כל אחת מהשיטות שלמעלה לציון צבע. לעיצוב טקסט, יש להשתמש במאפיינים color, text-shadow ו-text-decoration-color שבהם כולם מקבלים את הצבע בתור ערך או צבע כחלק מהערך.

לרקעים, אפשר להגדיר צבע כערך של background או של background-color. אפשר להשתמש בצבעים גם בהדרגתיות, כמו linear-gradient. מעברונים הם סוג של תמונה שאפשר להגדיר באופן פרוגרמטי ב-CSS. ציונים מקבלים שני צבעים או יותר בכל שילוב של פורמט צבע, כגון הקסדצימלי, RGB או hsl.

לסיום, border-color ו-outline-color מגדירים את הצבע של הגבולות והמתארים בתיבות. המאפיין box-shadow מקבל גם צבע כאחד מהערכים.

בדיקת ההבנה

בוחנים את הידע שלכם על צבע

אילו מהצבעים הבאים הם צבעים תקינים?

rbga(400 0 1)
rbga היא שגיאת הקלדה של rgba ו-400 גדול מכדי שהוא יקבל בכל מקרה, ולכן הוא לא תקין.
#0f08
🎉
#OOFZ2
זה לא ערך הקסדצימלי, הוא כולל רק 5 מספרים וכולל Z, ולכן הוא לא חוקי.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

מאתרים את צבע ה-hsl הלא תקין.

hsl(5, 0%, 90%)
זהו ערך hsl חוקי.
hsl(.5turn 40% 60%)
זהו ערך hsl חוקי.
hsl(0, 0, 0)
🎉 מצאת את זה, הערכים השני והשלישי צריכים להיות אחוזים.
hsl(2rad 50% 50%)
זהו ערך hsl חוקי.
hsl(0 0% 0% / 20%)
זהו ערך hsl חוקי.

משאבים