צור קשר
פוסטים אחרונים
שימוש מושכל בצבעים יכול לשפר את חוויית המשתמש בתוכנות מחשב ובאתרי אינטרנט ולהגדיל אחוזי המרה באתרי מכירות. בעולם המחשבים, צבעים מיוצגים באמצעות מודלים שונים, כגון RGB ו-HSL.
במאמר זה, נדון במודלים אלה ונלמד כיצד לפענח צבעים ב-hex. המאמר הוא מעט טכני ומיועד למעצבי אתרים ומפתחים באינטרנט.
מודל הצבע RGB
מודל RGB לייצוג צבעים הוא המודל הנפוץ ביותר היום במחשבים ובאינטרנט. שמו נגזר מראשי התיבות Red, Green, Blue (אדום, ירוק, כחול). הצבעים אדום, ירוק וכחול הם צבעי היסוד המרכיבים את יתר הצבעים במסכי המחשב המבוססים שתי וערב של נורות (לא לבלבל עם צבעי היסוד אדום, צהוב וכחול שהם צבעי היסוד במקרה של עירבוב צבעים אמיתיים).
במודל RGB, כל צבע נוצר על ידי שילוב עוצמות שונות של שלושת צבעי היסוד, הנעים בין 0 ל-255. לדוגמה, כדי ליצור את הצבע האדום, אנו משתמשים בעוצמה מלאה עבור אדום (255) ובעוצמה אפס עבור ירוק וכחול (0, 0). באופן דומה, כדי ליצור את הצבע הצהוב, אנו משתמשים בעוצמה מלאה עבור אדום וירוק (255, 255) ובעוצמה אפסית עבור כחול (0). באופן הזה, ניתן לייצג 256x256x256 גווני צבע שונים, שהם בסה"כ 16,777,216 גוונים. אמנם בטבע יש הרבה יותר גווני צבע מאשר 16,777,216 גוונים, אבל העין האנושית כמעט שאינה מבחינה בהבדלים הדקים בין מיליוני הגוונים השונים, ולכן, הייצוג הזה של הצבעים במחשב הוא מספיק טוב כדי להציג תמונות חדות שנראות מציאותיות לחלוטין לעין האנושית.
כאשר נרצה לייצג צבע כלשהו לפי מודל RGB, נציג אותו כשלשה של מספרים בתוך סוגריים, כגון (255,0,0) עבור אדום או (255,255,0) עבור צהוב. מספרים אלה מכונים ערכי RGB של הצבע.
מודל הצבע HSL
מודל HSL לייצוג צבעים הוא מודל שאף הוא נפוץ, בעיקר במסכי טלוויזיה, אך גם בתוכנות גרפיות רבות במחשב. שם המודל נגזר מראשי התיבות Hue, Saturation, Lightness (גוון, רוויית הצבע, בהירות). מודל צבע זה מבוסס על התפיסה החזותית של צבעים ומספק דרך אינטואיטיבית יותר לתיאור צבעים.
לפי מודל זה, גוון מייצג את הצבע בפועל, רוויה מייצגת את טוהר הצבע, והבהירות מייצגת את בהירות הצבע. הגוון נמדד במעלות, הנעות בין 0 ל-360, כאשר אדום נמצא ב-0 מעלות, ירוק ב-120 מעלות וכחול ב-240 מעלות. הרוויה מיוצגת כאחוז הנע בין 0% (אפור) ל-100% (רווי מלא). הבהירות מיוצגת גם כאחוז, כאשר 0% הם שחור, 50% הם הצבע המקורי ו-100% הם לבן.
לדוגמה, כדי ליצור צבע אדום רווי מלא במודל HSL, אנו משתמשים בגוון של 0 מעלות, רוויה של 100% ובהירות של 50%.
צבעים במודל HSL יכולים להיות מיוצגים כשלשה של מספרים בתוך סוגריים, כגון (50% ,100% ,0) עבור אדום רווי מלא או (50% ,100% ,120) עבור ירוק רווי מלא.
קידוד צבעים בבסיס HEX
בעיצוב אתרים, נהוג לייצג צבע באמצעות קוד בן 6 ספרות הקסדצימליות. סיפרה הקסדצימלית, היא סיפרה בבסיס הספירה 16, כאשר היא יכולה להיות 0,1,2,3,4,5,6,7,8,9 או האותיות A,B,C,D,E,F (האות A בבסיס 16 שקולה למספר 10 בבסיס 10, האות B שקולה ל-11 בבסיס עשר וכך עד F השקול למספר 15 בבסיס 10). דוגמה: הצבע האדום המלא מיוצג באמצעות הקוד FF0000 והצבע הירוק המלא מיוצג באמצעות הקוד 00FF00. קודים אלה מייצגים את ערכי ה-RGB של הצבע בפורמט הקסדצימלי.
כל זוג ספרות בקוד מייצג את העוצמה של אדום, ירוק או כחול בצבע, כאשר שתי הספרות הראשונות מייצגות אדום, שתי הספרות השניות מייצגות ירוק, ושתי הספרות האחרונות מייצגות כחול.
כדי לפענח קוד צבע , נוכל להמיר כל זוג ספרות למקבילה העשרונית שלו. לדוגמה, FF0000 שווה ל-(255,0,0) ב-RGB, כיוון שהמספר ההקסדצימלי FF הוא למעשה המספר 255 בבסיס 10. באינטרנט קיימים לא מעט מחשבוני המרה מקוונים שיודעים לתרגם ייצוג צבע בן 6 ספרות הקסדצימליות לייצוג ה-RGB השקול, או להיפך.
השימוש בייצוג בבסיס HEX מקצר את הייצוג של הצבע "ודוחס" אותו ל-6 תווים בלבד. לכן, הוא בשימוש נרחב בקבצי CSS המשמשים לעיצוב אתרי אינטרנט, בתוכנות גרפיקה רבות (כגון פוטושופ) ובכלל בעולם המחשבים והאינטרנט.
