קוד HEX דוחס שלושה מספרים בני 8 ביט לתוך שישה תווים הקסה-דצימליים. המרה מ-HEX ל-RGB פירושה לפרק את התווים לזוגות ולקרוא כל זוג כמספר עשרוני בין 0 ל-255 — בדיוק הערכים ש-CSS, Figma ועורכי תמונות מצפים להם.
איך מתבצעת ההמרה מ-HEX ל-RGB
- הסר את ה-# המוביל ואם הקוד מכיל רק שלושה תווים הכפל כל אחד: #f53 נהפך ל-#ff5533.
- חלק את ששת התווים לשלושה זוגות — RR, GG ו-BB.
- קרא כל זוג כמספר בסיס-16 והמר אותו לבסיס 10: FF נהפך ל-255, 57 ל-87, 33 ל-51.
- כתוב את שלושת התוצאות כ-rgb(R, G, B).
דוגמה עובדת
המרה זו מדויקת. HEX ו-RGB מתארים את אותם ערכי sRGB בניסוח שונה, כך שאין עיגול או איבוד מידע בשום כיוון.
HEX ו-RGB מוסברים
מה זה HEX?
קוד HEX הוא מספר הקסה-דצימלי בן שישה תווים שמאחסן את ערוצי האדום, הירוק והכחול של הצבע אחרי סימן מוביל #. כל זוג תווים מייצג ערוץ אחד, מ-00 (ללא) עד FF (מלא), מה שמניב את אותם 16.7 מיליון צבעים כמו RGB בניסוח קצר יותר. HEX הוא ברירת המחדל ב-CSS, בכלי עיצוב ובהנחיות מותג.
- תחביר:
- #RRGGBB
- טווח:
- 00–FF לכל ערוץ
- מתאים ל:
- CSS, העברת עיצוב, הנחיות מותג
מה זה RGB?
RGB מתאר צבע כשלושה ערוצי אור — אדום, ירוק וכחול — כל אחד בטווח 0 עד 255. זה משקף את האופן שבו מסכים עובדים בפועל: כל שלושת הערוצים ב-255 נותנים לבן, כולם ב-0 נותנים שחור. RGB הוא הבחירה הנכונה בכל פעם שאתה צריך לחשב עם צבע, ו-rgba() מוסיף שקיפות מעליו.
- תחביר:
- rgb(R, G, B)
- טווח:
- 0–255 לכל ערוץ
- מתאים ל:
- קוד, canvas, שקיפות עם rgba()
טבלת עיון מ-HEX ל-RGB
צבעי CSS הנפוצים ביותר, מומרים מ-HEX ל-RGB.
| צבע | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |