צבע

The CSS Podcast – 006: Color Part One

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

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

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

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

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

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

h1 {
  color: #b71540;
}

סימון הקסדצימלי (שנקרא בדרך כלל 'hex') הוא תחביר מקוצר של 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 (כי המספר הקסדצימלי מבוסס על 16) ואז להוסיף את הספרה השנייה. ניקח לדוגמה את BF עם אלפא של 75%:

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

האלפא מוגדר ב-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. אלה שמות באנגלית פשוטה, כמו 'סגול', 'עגבני' ו'סולידגו'. לפי Web Almanac, חלק מהצבעים הפופולריים ביותר הם שחור, לבן, אדום, כחול ואפור. הצבעים האהובים עלינו כוללים את goldenrod,‏ aliceblue ו-hotpink.

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

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

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

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

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

משאבים