ממיר צבעים HEX ל-RGB

HEX ו-RGB: שתי דרכים לכתוב את אותו הצבע

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

איך קוראים קוד הקסדצימלי

קוד צבע הקסדצימלי נראה כמו #1E90FF. סימן הסולמית רק מסמן את ההתחלה; ששת התווים שאחריו הם שלושה זוגות, כתובים בתבנית #RRGGBB. הזוג הראשון הוא אדום, השני ירוק, השלישי כחול. כל זוג הוא מספר כתוב בבסיס הקסדצימלי, כלומר בסיס 16, שבו הספרות רצות מ-0 עד 9 ואז A, B, C, D, E, F מייצגים 10 עד 15. זוג אחד יכול להחזיק ערכים מ-00 (הערוץ כבוי לחלוטין) עד FF (דלוק לחלוטין). בעשרוני רגיל הטווח הזה הוא בדיוק 0 עד 255, אותו סולם ש-RGB משתמש בו. עם 256 רמות אפשריות לכל ערוץ, הצורה בת שש הספרות יכולה לתאר 16,777,216 צבעים נבדלים.

המרה בשני הכיוונים, עם דוגמה מפורטת

כדי לעבור מ-HEX ל-RGB, פצלו את הקוד לשלושת הזוגות שלו והמירו כל אחד מבסיס 16 לעשרוני רגיל. קחו את #1E90FF. הזוג האדום הוא 1E: זה 1 כפול 16, ועוד 14 (E), שווה 30. הזוג הירוק 90 הוא 9 כפול 16, ועוד 0, שווה 144. הזוג הכחול FF הוא 15 כפול 16, ועוד 15, שווה 255. אז #1E90FF הופך ל-rgb(30, 144, 255) — הכחול המוכר בשם dodger blue.

ההליך ההפוך זהה לחלוטין רק בכיוון ההפוך. קחו כל מספר RGB וכתבו אותו כשתי ספרות הקסדצימליות. אדום טהור, rgb(255, 0, 0), נותן FF, 00 ו-00, שמתחברים לכדי #FF0000. דבר אחד שכדאי לזכור: אם ערך נמוך מ-16, עדיין צריך שתי ספרות, כך ש-5 נכתב 05 ולא רק 5. הממיר מטפל בריפוד הזה עבורכם, אבל הוא מכשיל אנשים כשהם עושים זאת ידנית.

היכן משתמשים בכל פורמט

HEX היא שפת היומיום של הרשת. CSS, HTML ורוב הקוד שאתם כותבים פונים לקודים הקסדצימליים כי הם קומפקטיים וקלים להעתקה. RGB נוטה לצוף בתוך כלי עיצוב ותמונה — Figma, Photoshop, Sketch ו-Illustrator בדרך כלל מציגים מחוונים או שדות בטווח 0-255, וגם אפליקציות הקלטת מסך ווידאו לרוב מצפות ל-RGB. כך שלעיתים קרובות תלקטו קוד הקסדצימלי מגיליון סגנונות ותצטרכו את הצורה שלו ב-RGB כדי להקליד אותה בלוח עיצוב, או להפך. המסע הלוך-חזור הזה הוא כל הסיבה שממיר כל כך שימושי. אם אתם צריכים לבנות סט שלם של גוונים תואמים במקום לתרגם אחד, מחולל פלטת הצבעים שלנו הוא נקודת ההתחלה הטובה יותר, ותמצאו עוד כלים כאלה תחת כלי מפתחים.

שקיפות (Alpha), אטימות ו-HSL

לשני הסימונים יש צורה מורחבת המוסיפה שקיפות. RGB הופך ל-rgba(30, 144, 255, 0.5), כאשר הערך הרביעי הוא alpha — 0 שקוף לחלוטין ו-1 אטום לחלוטין. HEX מוסיף זוג רביעי לאותה מטרה, ונותן קוד בן שמונה ספרות #RRGGBBAA; 80, לדוגמה, הוא בקירוב 50 אחוז אטימות. כמה ממירים מציעים גם HSL (גוון, רוויה, בהירות), שמתאר צבע בדרך שבן אדם היה חושב עליה — בחרו גוון על הגלגל, ואז כווננו את עוצמתו ובהירותו. HSL הוא מודל חשיבה שונה ולא פלטה שונה, כך שהוא יכול להיות אינטואיטיבי יותר כשאתם רוצים להבהיר או לעמעם צבע בלי לג'נגל שלושה מספרים נפרדים.

שאלות נפוצות