הפודקאסט של 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:
- B שווה ל-11, שכאשר כופלים אותו ב-16 שווה 176
- F שווה ל-15
- 191 = 156 + 176
- ערך האלפא הוא 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% יהיה בטווח הכחול. זה המקור של הצבע שאנחנו רואים.
הרוויה מייצגת את העוצמה של הגוון שנבחר.
צבע ללא רוויה לחלוטין (עם רוויה של 0%
) יופיע בגווני אפור.
לבסוף, בהירות היא הפרמטר שמתאר את קנה המידה של אור נוסף מלבן לשחור.
בהירות של 100%
תיתן לך תמיד צבע לבן.
באמצעות פונקציית הצבע hsl()
, מגדירים שחור אמיתי על ידי כתיבת hsl(0 0% 0%)
או אפילו hsl(0deg 0% 0%)
.
הסיבה לכך היא שפרמטר הגוון מגדיר את המידה בגלגל הצבעים. אם משתמשים בסוג המספר, היא תהיה 0-360.
אפשר גם להשתמש בסוג הזווית, שהוא (0deg
) או (0turn)
.
גם רוויה וגם בהירות מוגדרים באחוזים.
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)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
יש לאתר את צבע ה-hsl הלא חוקי.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)