צבע

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

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

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

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

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

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

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

h1 {
  color: #b71540;
}

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

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

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

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

  • 0% אלפא – שקוף לחלוטין – הוא 00: #00000000
  • 50% מהאלפא הוא 80: #00000080
  • 75% אלפא הוא BF: #000000BF

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

  1. B שווה ל-11, שכאשר כופלים אותו ב-16 שווה 176
  2. F שווה ל-15
  3. 191 = 156 + 176
  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 הוא גוון, רוויה ובהירות. גוון מתאר את הערך בגלגל הצבעים, מ-0 עד 360 מעלות, מתחיל באדום (0 ו-360). גוון של 180 או 50% יהיה בטווח הכחול. זה המקור של הצבע שאנחנו רואים.

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

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

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

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

Alpha מוגדר ב-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).

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

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

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

  • 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 חוקי.

מקורות מידע