צבעים ב- CSS

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

שימוש בצבעים מוגדרים מראש

דרך שימושית אחת, היא להשתמש באחד הצבעים שמוגדרים מראש ב- CSS. רשימת הצבעים המוגדרים מראש כוללת 140 צבעים שונים ואפשר לראות אותה, למשל, כאן 1.

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

.h2
{
   color: MediumBlue
}

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

מודל צבע RGB

האלטרנטיבה לשימוש בצבעים מוגדרים מראש, היא להגדיר את הצבע בעצמנו. כדי לעשות זאת אנחנו מסתמכים על מודל RGB. RGB זה ראשי תיבות של Red, Green, Blue. בעולם המחשבים זהו מודל צבע סופר שימושי ויכול מאוד להיות ששמעתם עליו.

כך מגדירים ב- CSS צבע באמצעות מודל RGB:

.h2
{
   color: rgb(180, 17, 255)
}

הרעיון הוא שהצבעים אדום, ירוק וכחול משמשים כצבעי בסיס ועל ידי שילובם אפשר לקבל כל צבע שנרצה. הגמישות הרבה במודל זה נובעת מכך שאנו לא רק בוחרים האם נשתמש בכל אחד מצבעי הבסיס, אלא אנו גם קובעים באיזו מידה נשתמש בו. משתמשים בסקלה של 0 עד 255 עבור כל אחד משלושת צבעי הבסיס, כאשר 0 אומר שצבע הבסיס הזה לא משתתף כלל ו- 255 אומר שהוא משתתף במלואו. בחישוב מהיר, זה אומר שמספר הצבעים הכולל שניתן לקבל על ידי שימוש במודל הוא:

255•255•255 = 16581375

כלומר מעל 16 מיליון צבעים!

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

rgb(255, 0, 0)

ואילו הייצוג של הצבע הירוק:

rgb(0, 255, 0)

הצבע השחור הוא למעשה היעדר צבע, לכן ייצוגו:

rgb(0, 0, 0)

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

rgb(255, 255, 255)

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

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

הנה דוגמה של הגדרת צבע ב- CSS כמספר הקסדצימלי:

.h2
{
   color: #b411ff
}

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

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

שימוש ב- Color picker

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

כלי שיכול מאוד לעזור במשימה הזו, הוא color picker - כלי ויזואלי שעוזר בבחירת צבעים. תוכלו למצוא כלי כזה כמעט בכל תוכנה מודרנית של עיבוד תמונה (אפילו ב- paint המובנה בוינדוס), אבל גם אם אין לכם תוכנה כזו - אין בעיה! פשוט חפשו בגוגל Color picker, ובוחר הצבעים של גוגל יוצג לפניכם

 

 

ה- Color picker של גוגל עובד במודל צבע שונה - במקום RGB, הוא משתמש במודל HSV. במודל זה, מתחילים בבחירת הגוון (Hue) על ידי הסליידר האופקי. לאחר מכן, בוחרים את ערכי ה- Saturation וה- Value.

  • ציר X הוא ציר ה- Saturation שקובע כמה הצבע “טהור”, כלומר כמה לבן מעורבב בו. 100% אומר שאין לבן כלל, רק הצבע עצמו. 0% אומר שיש רק לבן.
  • ציר Y הוא ציר ה- Value שקובע את מידת הבהירות. ככל שערכו נמוך יותר הצבע יהיה קרוב יותר לשחור.

מודל HSV מאפשר לבנות משפחות צבעים בקלות, גם בלי עין מקצועית. אפשר פשוט לבחור גוון ועל ידי שינוי ערכי ה- saturation וה- value לקבל משפחת צבעים בעלת קו אחיד. ה- color picker של גוגל נוח לשימוש, כיוון שהוא מציג את ערך ה- RGB של הצבע שבחרנו, כמו גם את הייצוג ההקסדצימלי שלו, ואותם ניתן להעתיק לקוד ה- CSS.