שיטות לייצוג צבעים במחשב, מודל RGB ומודל HSL

מודל RGB לייצוג צבעים בתיכנות מחשבים

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

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

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

עם השנים ושיפור הטכנולוגיה של כרטיסי המסך ושל מסכי המחשב, מנעד הצבעים האפשרי לייצוג במחשב (המבוסס על שילובים שונים של צבעי היסוד) השתפר. במסכים הצבעוניים הראשונים מסוג CGA, ניתן היה לראות רק 4 צבעים המבוססים על צבעי היסוד, במסכי EGA ניתן היה לראות כבר 16 צבעים, במסכי VGA כבר היה מדובר על 256 צבעים. כיום, הסקאלה של כל אחד מצבעי היסוד יכולה לנוע מ-0 ל-255 (סה"כ 256 אפשרויות), ולכן מגוון האפשרויות מאפשר 256x256x256 צבעים ובסה"כ 16,777,216 אפשרויות. כמות הצבעים הזו מאפשרת תצוגה בצבעים עשירה במיוחד שקרובה מאוד למה שהעין רואה במציאות.

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

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

בעולם המחשבים, נהוג לשמור נתונים באמצעות סיביות בינאריות. סיבית, או באנגלית bit, יכולה לקבל ערך של 0 או 1 בלבד.

רצף של 4 סיביות מאפשר יצוג של 16 אפשרויות שונות (לכל סיבית יש 2 אפשרויות, 0 או 1, ובסה"כ 16 אפשרויות בחירה עבור 4 סיביות) ורצף של 8 סיביות (הרצף מכונה בייט Byte) מאפשר בחירה של 256 אפשרויות.

כדי להקל על השימוש בשמירת הנתונים, נהוג לקבץ כל 4 סיביות ולהציג את הנתונים בבסיס הקסדצימלי (בסיס 16). הספרות בבסיס הקסדצימלי נעות מ-0 ועד F, ואלו הן: הספרות 0,1,2,3,4,5,6,7,8,9 ולאחריהן נשתמש באות A שתייצג 10, באות B שתייצג 11, באות C שתייצג 12, באות D שתייצג 13, באות E שתייצג 14 ובאות F שתייצג 15. באופן הזה, כל סיפרה מייצגת מספר בין 0 ל-F בבסיס 16 (שזה בין 0 ל-15 בבסיס העשרוני הדצימלי שכולנו מכירים).

לדוגמה, המספר 2B בבסיס הקסדצימלי מייצג את המספר הדצימלי (בבסיס עשרוני) שהוא 43. אופן החישוב הוא: המספר ההקסדצימלי 2B מורכב מ-2 עשרות ועוד B אחדות, ובמעבר מהעולם ההקסדצימלי לעולם הדצימלי נחשב 2x16+11=43.

כאשר נרצה לייצג צבע כלשהו, נייצג אותו או כערבוב של 3 צבעי הירוק RGB, או בבסיס דצימלי (כל מספר בערך 0 עד 255) או בבסיס הקסדצימלי דו-סיפרתי (כל מספר בערך 00 עד FF).

מודל HSL לייצוג צבעים

נוסף על שיטת RGB, קיימת שיטה נוספת לייצג צבעים, המכונה HSL. בשיטה זו מיוצג כל צבע באמצעות 3 פרמטרים: Hue, Saturation, Lightness. שם השיטה HSL נובע מראשי התיבות של 3 הפרמטרים האלו.

אלו הפרמטרים של שיטת HSL:

1. Hue - גלגל צבעים הנע מ-0 עד 360. 0 מתאר אדום, 120 מתאר ירוק ו-240 מתאר כחול.
2. Saturation - מספר באחוזים מ-0% עד 100% המתאר עומק של אפור. 0% מתאר גוון אפור, 100% מתאר גוון של צבע מלא.
3. Lightness - דרגת כהות, או שילוב של שחור בצבע. 0% מתאר שחור, 100% מתאר לבן.

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

שקיפות צבעים

ניתן לעיתים להוסיף שקיפות לצבע, כך שאם יש שכבות שונות של צבעים זו מעל זו, הצבע הסופי יקבע כערבוב בין הצבעים בהתאם לרמת השקיפות של כל שכבה. השקיפות מיוצגת על ידי שבר עשרוני בין 0 (שקוף לגמרי) ל-1 (אטום לגמרי). הערך הזה מכונה אלפא (Alpha).

אם לדוגמה קיים צבע רקע אדום (ערך R=255, ערך G=0, ערך B=0) ועליו נשים בשקיפות של 0.5 (כלומר צבע חצי שקוף) פיקסל בצבע כחול, אז הפיקסל לא יראה כחול כי אם בגוון כלשהו של סגול (כי הצבע הכחול מתערבב עם האדום שברקע).

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

ייצוג צבעים בקבצי CSS

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

1. מילת מפתח - שימוש במילה המציינת את הצבע מתוך רשימה של כמה עשרות מילים שהדפדפן מזהה. לדוגמה: aqua, azure, coral, hotpink, green, blue וכן הלאה.
2. ייצוג RGB דצימלי - שימוש ב-3 מספרים המייצגים כל אחד מצבעי היסוד. כל מספר בתחום 0 עד 255 בבסיס דצימלי.
3. ייצוג RGB דצימלי עם שקיפות - כמו במקרה הקודם, בתוספת שבר עשרוני בתחום 0 עד 1, המייצג שקיפות (0 שקוף לגמרי, 1 אטום לגמרי).
4. ייצוג RGB הקסדצימלי (HEX) - שימוש ברצף של 6 ספרות הקסדצימליות, כאשר כל זוג ספרות מייצג צבע יסוד בתחום 00 עד FF בבסיס הקסדצימלי. זו השיטה הנפוצה ביותר לייצוג צבעים ב-CSS וכדאי להכירה היטב.
5. ייצוג HSL - שימוש ב-3 מספרים המייצגים ייצוג ב-HSL. המספר הראשון בין 0 ל-359, השני בין 0% ל-100% והשלישי בין 0% ל-100%.
6. ייצוג HSL עם שקיפות - כמו במקרה הקודם, בתוספת שבר עשרוני בתחום 0 עד 1, המייצג שקיפות (0 שקוף לגמרי, 1 אטום לגמרי).

דוגמה:

p {
	color:#ff00ff;
	background-color:rgb(220, 220, 220);
}

p .marked {
	background-color:hsla(44, 95.8%, 47.1%, 0.6);
}

בדוגמה זו קבענו את צבע הגופן שיהיה ff00ff שהוא אדום בייצוג RGB הקסדצימלי, עם רקע rgb(220,220,220) שהוא אפור בייצוג RGB דצימלי. אלמנטים מהמחלקה marked שבתוך פיסקה יהיו עם רקע hsla(44,95.8%,47.1%,0.6) שהוא גוון של כתום בייצוג HSL עם שקיפות.

סרטון מומלץ למי שרוצה להעמיק בנושא: