צבעים בשפת CSS

צבעים בשפת CSS

  • פרסומת

לפני שמתחילים, מומלץ לצפות בהדגמה בשביל לראות את התוצאה של הקוד בזמן אמת. ניתן גם להוריד את הקוד לשימוש אישי.

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

  • color name – הגדרת הצבע לפי שמות מוגדרים מראש
  • hexadecimal – הגדרת הצבע על ידי צירוף של אותיות וספרות
  • rgb – הגדרת הצבע על ידי שלושה מספרים (אדום, ירוק וכחול)
  • rgba – דומה לשיטת ה-rgb, רק שמספר נוסף מגדיר את השקיפות (alpha) של הצבע.
  • hsl – הגדרת הצבע על ידי שלושה מספרים (hue, saturation, lightness)
  • hsla – דומה לשיטת hsl, רק שמספר נוסף מגדיר את השקיפות (alpha) של הצבע.

שם הצבע

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

הדוגמה הבאה מראה איך ניתן להגדיר את הצבעים אדום, ירוק, לבן ושחור:

#el1 {background-color: red;}
#el2 {background-color: green;}
#el3 {background-color: white;}
#el4 {background-color: black;}

שיטת hexadecimal

צבעים בשיטה זו מוגדרים על ידי צירוף של שישה תווים המכילים ספרות מ-0 עד 9 ואותיות מ-a עד f (ועל כן השם. במילים אחרות, ספירה על בסיס 16). לדוגמה, הצבע הלבן בשיטה זו מיוצג על ידי הצירוף #FFFFFF.

אין הבדל בין אותיות גדולות לבין קטנות (#FFFFFF ו- #ffffff זה אותו הצבע). אם הצבע מוגדר מתווים דומים, ניתן לקצר את שם הצבע לשלושה תווים (לדוגמה, #FFFFFF ו- #FFF זה אותו הצבע).

הדוגמה הבאה מראה איך ניתן להגדיר את הצבעים אדום, ירוק, לבן ושחור בשיטת hexadecimal:

#el1 {background-color: #F00;}     /* Red */
#el2 {background-color: #06FF00;}  /* Green */
#el3 {background-color: #FFF;}     /* White */
#el4 {background-color: #000;}     /* Black */

שיטת rgb

rgb הם ראשי תיבות של red, green, blue. צבעים בשיטה זו מוגדרים על ידי שילוב של שלושה מספרים בין 0 ל-255 כשהמספר הראשון מגדיר את הגוון האדום, השני מגדיר את הגוון הירוק והשלישי את הגוון הכחול של הצבע.

הדוגמה הבאה מראה איך ניתן להגדיר את הצבעים אדום, ירוק, לבן ושחור בשיטת rgb:

#el1 {background-color: rgb(255,0,0);}     /* Red */
#el2 {background-color: rgb(0,255,0);}     /* Green */
#el3 {background-color: rgb(255,255,255);} /* White */
#el4 {background-color: rgb(0,0,0);}       /* Black */

שיטת rgba

rgba הם ראשי תיבות של red, green, blue, alpha. צבעים בשיטה זו מוגדרים על ידי שלושה מספרים כמו בשיטת rgb, אך מספר נוסף בין 0 ל-1 מגדיר את שקיפות הצבע כש-0 מגדיר שקיפות מוחלטת ו-1 מגדיר אטימות מוחלטת.

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

#el1 {background-color: rgb(255,0,0,1);}     /* Red */
#el2 {background-color: rgb(0,255,0,0.5);}   /* Green */
#el3 {background-color: rgb(255,255,255,0);} /* White */
#el4 {background-color: rgb(0,0,0,0.75);}    /* Black */

שיטת hsl

hsl הם ראשי תיבות של hue, saturation, lightness. צבעים בשיטה זו מוגדרים על ידי שלושה מספרים. המספר הראשון (hue) מוגדר על ידי מעלות (מספר בין 0 ל-360). המספר השני (saturation) מוגדר על ידי אחוז בין 0% לבין 100%. המספר השלישי (lightness) מוגדר גם הוא על ידי אחוז בין 0% לבין 100%.

הדוגמה הבאה מראה איך ניתן להגדיר את הצבעים אדום, ירוק, לבן ושחור בשיטת hsl:

#el1 {background-color: hsl(0, 100%, 50%);}     /* Red */
#el2 {background-color: hsl(120, 100%, 50%);}   /* Green */
#el3 {background-color: hsl(120, 100%, 100%);}  /* White */
#el4 {background-color: hsl(0, 0%, 0%);}        /* Black */

שיטת hsla

hsla הם ראשי תיבות של hue, saturation, lightness, alpha. בדומה לשיטה הקודמת, צבעים אלו מוגדרים על ידי שלושה מספרים ומספר רביעי בין 0 ל-1 המגדיר את השקיפות של הצבע (בדומה ל-rgba) כש-0 מגדיר שקיפות מוחלטת ו-1 מגדיר אטימות מוחלטת.

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

#el1 {background-color: hsla(0, 100%, 50%, 0.5);}  /* Red */
#el2 {background-color: hsla(120, 100%, 50%, 1);}  /* Green */
#el3 {background-color: hsla(120, 100%, 100%, 0);} /* White */
#el4 {background-color: hsla(0, 0%, 0%, 0.25);}    /* Black */