אפשר לייצג את הצבעים הנראים לעין באמצעות שילוב של שלושה צבעי יסוד: אדום, ירוק וכחול. ייצוג זה, הקרוי RGB, הוא הייצוג המקובל בעולם המחשבים [1], והוא נוח לשימוש במצלמות ובמסכים. אולם ציירים ומעצבים מתקשים להשתמש בייצוג מספרי לשם בחירת צבע, ומפתחי אפליקציות בשנות השבעים אכן חיפשו דרכים לאפשר בחירת צבעים וגוונים באופן ויזואלי. באחת השיטות, הקרויה HSB או HSV, הצבע נבחר באמצעות סימון נקודה במעגל-צבעים. כיצד ניתן להמיר ייצוג צבע בפורמט RGB לייצוג נקודה במעגל כזה? הפתרון המתמטי המדויק היה די מורכב למימוש, אולם המפתחים מצאו פתרון מקורב שהתלהבנו ממנו. נספר עליו, ונדגים באמצעות אפליקציה שימוש מודרני של HSB למימוש פילטרי צבע, כמו באינסטגרם.

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

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

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

הצבעים שצבענו על המעגל החיצוני נקראים "רוויים" ("saturated"), כיוון שהם 'טהורים' - כשרים למהדרין ללא שמץ לבן. מידת הרוויה הולכת וקטנה ככל שמתקרבים למרכז. מרכז המעגל הוא לבן.

עם זאת, מעגל הצבעים אינו מכיל את הייצוג המלא של הצבע, משום שעדיין חסר פרמטר משמעותי – בהירות (brightness), השקול להמרה של הצבע לשחור-לבן, שכתבנו עליה בעבר [2]. מודל שלם המכיל את שלושת הפרמטרים – גוון (Heu), רוויה (Saturation) ובהירות (Brightness או Value) – נקרא HSB או HSV [1].

לעומת HSB, בייצוג RGB מנורמל, כל צבע נשמר כצירוף של שלושה מספרים (R,G,B), המבטאים את עוצמתו של כל אחד משלושת רכיבי צבע כערך בין 0 ל-1. למשל: (1,0,0) הוא אדום (R) רווי, (1,1,1) הוא לבן, ו-(0.1 ,1,1) הוא ערבוב של אדום (R) וירוק (G) שמתקבל ממנו צהוב, אך עם מידה פחותה של רוויה, כי יש בו גם ערבוב קל של כחול (B), שמוסיף לו גוון אפרפר.

ניתן לייצג את הצבעים הללו בצורה גיאומטרית באמצעות קובייה שאורך צלעה 1: הקודקוד (0,0,0) ייצבע בשחור, הקודקוד שמולו (1,1,1) בלבן, ששת הקודקודים האחרים ייצבעו בצבעי הקשת מאדום עד סגול, וכל נקודה בתוך הקובייה תיצבע בהתאם לקואורדינאטות שלה (ראו פוסט שכתבנו בעבר [1]).

אכן, אנשי המחשבים משתמשים בקובייה הצבעונית, והציירים והמעצבים במעגל הצבעים. כל שנותר כעת הוא לגשר ביניהם, ולמפות כל נקודה בתוך הקובייה לנקודה מתאימה לה על מעגל הצבעים. דרך סטנדרטית להמרה היא באמצעות שילוב טריגונומטריה עם קואורדינטות קוטביות [4], אולם זהו פתרון מסורבל, שהיה קשה למימוש במחשבים אי-אז בשנות ה-70 [5]. כיצד הייתם אתם ניגשים אל המשימה?

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

וכך, באמצעות בנייה פשוטה שבה מבצעים הטלה למישור של קובייה הנטויה בזווית מתאימה, מתקבל משושה היכול לשמש קירוב למעגל הצבעים. הנה:

חישוב מיקום ההיטל של נקודה כלשהי (R,G,B) שבקובייה לתוך המשושה הזה כבר פשוט למדי, ומצריך גיאומטריה בסיסית [3]. הבנייה החכמה אפשרה ליצור משוואות פשוטות, שקל היה לממשן.

בתוכנות פופולריות נוכל למצוא שלל דרכים לבחירת צבע, אולם שיטה דומה לזו שתיארנו משמשת גם כיום ליצירת אפקטים מעניינים בתמונות, כמו פילטרים הדומים לאלו שיש באינסטגרם. למשל, בשימוש בתוכנת CSS המשמשת לעיצוב דפים ברשת, הפונקציה (hue-rotate(20deg משנה את כל הצבעים בתמונה על ידי 'הזזתם' ב-20 מעלות, והפונקציה (saturate(85% מקטינה את הרוויה של כל צבע ב-15% על ידי ערבובו עם לבן. זהו אחד האפקטים המשמשים לאמולציה של הפילטר Aden באינסטגרם [6].

אפליקציה שתוכלו לשחק בה עם ערכי HSB (פיתוח: משפחת אורנשטיין)

פיתוח אפליקציה: טניה אורנשטיין

ליווי מדעי: עלי שמשוני

עריכה: חגי גלרנטר

עיצוב התמונה: סמדר רבן

מקורות והרחבות:

[1] צבעים בעולם דיגיטלי

[2] המרה לצבעי שחור-לבן

[3] שימוש HSB או HSV

[4] המרת צבע בקואורדינטות פולריות

[5] ניתוח גאומטרי

[6] אמולציה של פילטרים באינסטגרם ב-CSS